reverse card expand (#243)

Co-authored-by: Mailn Nifeli Snieske <[email protected]>
kartverket · Jan 21, 2025 · 6046f89 · 6046f89
1 parent 0251c49
commit 6046f89
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 71 deletions.
diff --git a/src/components/delete-function-modal.tsx b/src/components/delete-function-modal.tsx
@@ -23,7 +23,7 @@ type Props = {
 export function DeleteFunctionModal({ onClose, isOpen, functionId }: Props) {
 	const { func, removeFunction } = useFunction(functionId);
 	const navigate = Route.useNavigate();
-	const { path, flags, filters, expandedCards } = Route.useSearch();
+	const { path, flags, filters } = Route.useSearch();
 
 	return (
 		<Modal onClose={onClose} isOpen={isOpen} isCentered>
@@ -62,7 +62,6 @@ export function DeleteFunctionModal({ onClose, isOpen, functionId }: Props) {
 												: pathString,
 										) ?? ["1"],
 										filters,
-										expandedCards,
 										flags: flags,
 									},
 								});

diff --git a/...ents/function-card-expandable-content.tsx → ...omponents/function-card-selected-view.tsx b/...ents/function-card-expandable-content.tsx → ...omponents/function-card-selected-view.tsx
@@ -3,9 +3,10 @@ import { MetadataView } from "./metadata/metadata-view";
 import { useMetadata } from "@/hooks/use-metadata";
 import { Route } from "@/routes";
 import { OboFlowFeature } from "../../frisk.config";
-import { Stack } from "@kvib/react";
+import { Flex, Skeleton, Stack, Text } from "@kvib/react";
+import { EditAndSelectButtons } from "./edit-and-select-buttons";
 
-export function FunctionCardExpandableContent({
+export function FunctionCardSelectedView({
 	functionId,
 }: { functionId: number }) {
 	const { func } = useFunction(functionId);
@@ -14,7 +15,21 @@ export function FunctionCardExpandableContent({
 	const { flags } = Route.useSearch();
 
 	return (
-		<Stack pl="10px" overflow="hidden">
+		<Stack pl="10px" w="100%" overflow="hidden">
+			<Flex alignItems="center" w="100%" flex-wrap="wrap">
+				<Skeleton isLoaded={!func.isLoading} flex={1} minWidth={0}>
+					<Text
+						fontWeight="bold"
+						as="span"
+						display="flex"
+						w="100%"
+						overflow="hidden"
+					>
+						{func.data?.name ?? "<Det skjedde en feil>"}
+					</Text>
+				</Skeleton>
+				<EditAndSelectButtons functionId={functionId} selected />
+			</Flex>
 			{config.metadata?.map((meta) => (
 				<MetadataView key={meta.key} metadata={meta} functionId={functionId} />
 			))}

diff --git a/src/components/function-card.tsx b/src/components/function-card.tsx
@@ -1,10 +1,10 @@
 import { useFunction } from "@/hooks/use-function";
 import { Route } from "@/routes";
-import { Card, Flex, IconButton, Skeleton, Stack, Text } from "@kvib/react";
+import { Card, Flex, IconButton, Skeleton, Text } from "@kvib/react";
 import { FunctionCardEdit } from "./function-card-edit";
-import { FunctionCardExpandableContent } from "./function-card-expandable-content";
+import { FunctionCardSelectedView } from "./function-card-selected-view";
 import { EditAndSelectButtons } from "./edit-and-select-buttons";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { useHasFunctionAccess } from "@/hooks/use-has-function-access";
 
 export function FunctionCard({
@@ -16,21 +16,6 @@ export function FunctionCard({
 	const search = Route.useSearch();
 	const navigate = Route.useNavigate();
 
-	const isCardExpanded = useMemo(() => {
-		return search.expandedCards?.includes(functionId) ?? false;
-	}, [functionId, search.expandedCards]);
-
-	const toggleCardExpanded = () => {
-		navigate({
-			search: {
-				...search,
-				expandedCards: isCardExpanded
-					? search.expandedCards?.filter((id) => id !== functionId)
-					: [...(search.expandedCards ?? []), functionId],
-			},
-		});
-	};
-
 	const [bottomMargin, setBottomMargin] = useState(0);
 
 	function getParentDistance() {
@@ -71,7 +56,6 @@ export function FunctionCard({
 								? [func?.data?.path.slice(0, func?.data?.path.lastIndexOf("."))]
 								: [`${func?.data?.path}`]),
 						],
-						expandedCards: search.expandedCards,
 						filters: search.filters,
 						edit: search.edit,
 						flags: search.flags,
@@ -90,47 +74,32 @@ export function FunctionCard({
 			>
 				{search.edit === functionId && hasAccess ? (
 					<FunctionCardEdit functionId={functionId} />
+				) : selected ? (
+					<FunctionCardSelectedView functionId={functionId} />
 				) : (
-					<Stack w="100%">
-						<Flex alignItems="center" w="100%" flex-wrap="wrap">
-							<IconButton
-								type="button"
-								colorScheme="gray"
-								variant="ghost"
-								aria-label="drag"
-								icon="drag_indicator"
-								isDisabled={!hasAccess}
-							/>
-							<IconButton
-								colorScheme="gray"
-								variant="tertiary"
-								aria-label={isCardExpanded ? "close card" : "expand card"}
-								icon={isCardExpanded ? "keyboard_arrow_down" : "chevron_right"}
-								onClick={(e) => {
-									e.stopPropagation();
-									toggleCardExpanded();
-								}}
-							/>
-							<Skeleton isLoaded={!func.isLoading} flex="1" minWidth={0}>
-								<Text
-									fontWeight="bold"
-									as="span"
-									display="flex"
-									w="100%"
-									overflow="hidden"
-								>
-									{func.data?.name ?? "<Det skjedde en feil>"}
-								</Text>
-							</Skeleton>
-							<EditAndSelectButtons
-								functionId={functionId}
-								selected={selected}
-							/>
-						</Flex>
-						{isCardExpanded && (
-							<FunctionCardExpandableContent functionId={functionId} />
-						)}
-					</Stack>
+					<>
+						<IconButton
+							type="button"
+							colorScheme="gray"
+							variant="ghost"
+							aria-label="drag"
+							icon="drag_indicator"
+							isDisabled={!hasAccess}
+						/>
+
+						<Skeleton isLoaded={!func.isLoading} flex="1" minWidth={0}>
+							<Text
+								fontWeight="bold"
+								as="span"
+								display="flex"
+								w="100%"
+								overflow="hidden"
+							>
+								{func.data?.name ?? "<Det skjedde en feil>"}
+							</Text>
+						</Skeleton>
+						<EditAndSelectButtons functionId={functionId} selected={false} />
+					</>
 				)}
 			</Flex>
 		</Card>

diff --git a/src/components/search-field.tsx b/src/components/search-field.tsx
@@ -23,13 +23,10 @@ export function SearchField() {
 				}}
 				onChange={(newFunc: { value: string } | null) => {
 					if (newFunc) {
-						const newPath = newFunc.value;
-						const newId = Number.parseInt(newPath.split(".").pop() ?? "1");
 						navigate({
 							search: {
 								...search,
 								path: [newFunc.value],
-								expandedCards: [newId],
 							},
 						});
 					}

diff --git a/src/effects/create-and-redirect-effect.ts b/src/effects/create-and-redirect-effect.ts
@@ -13,7 +13,6 @@ export function CreateAndRedirectEffect() {
 		newMetadataKey,
 		newMetadataValue,
 		redirect,
-		expandedCards,
 	} = Route.useSearch();
 
 	const { func } = useFunction(functionId ?? 1);
@@ -40,7 +39,6 @@ export function CreateAndRedirectEffect() {
 							search: {
 								path: path,
 								flags: flags,
-								expandedCards: expandedCards,
 							},
 						});
 					}
@@ -54,7 +52,6 @@ export function CreateAndRedirectEffect() {
 		path,
 		flags,
 		addMetadata,
-		expandedCards,
 		navigate,
 	]);
 

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -20,7 +20,6 @@ const functionSearchSchema = object({
 		),
 		["1"],
 	),
-	expandedCards: array(number()).optional(),
 	functionId: number().optional(),
 	edit: number().optional(),
 	newMetadataKey: string().optional(),