Merge remote-tracking branch 'origin/main'

mok-it · Dec 28, 2024 · f795093 · f795093
2 parents 69d87f3 + 5c9783e
commit f795093
Show file tree

Hide file tree

Showing 8 changed files with 253 additions and 555 deletions.
diff --git a/src/components/compose/Container.tsx b/src/components/compose/Container.tsx
@@ -1,47 +1,32 @@
 import type { UniqueIdentifier } from "@dnd-kit/core";
 import { useDroppable } from "@dnd-kit/core";
-import {
-  SortableContext,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
 import { createContext, memo, type FC } from "react";
 
-import { ExerciseView, composeStore } from "@/util/composeStore";
 import { Stack } from "@mui/material";
-import SortableItem from "./SortableItem";
+import { Item } from "./Item";
 
 export const ContainerContext = createContext<string | null>(null);
 
 const Container: FC<{ items: UniqueIdentifier[]; id: string }> = ({
   items,
   id,
 }) => {
-  const exerciseView = composeStore((state) => state.exerciseView);
   const { setNodeRef } = useDroppable({
     id: id,
   });
 
   return (
-    <ContainerContext.Provider value={id}>
-      <SortableContext
-        items={items}
-        strategy={verticalListSortingStrategy}
-        id={id}
-        disabled={exerciseView === ExerciseView.LIST}
-      >
-        <Stack
-          ref={setNodeRef}
-          height={"100%"}
-          alignItems={"center"}
-          gap={1}
-          pb={4}
-        >
-          {items.map((cardId: UniqueIdentifier) => (
-            <SortableItem key={cardId} id={cardId} />
-          ))}
-        </Stack>
-      </SortableContext>
-    </ContainerContext.Provider>
+    <Stack
+      ref={setNodeRef}
+      height={"100%"}
+      alignItems={"center"}
+      gap={1}
+      pb={4}
+    >
+      {items.map((cardId: UniqueIdentifier) => (
+        <Item key={cardId} id={cardId} />
+      ))}
+    </Stack>
   );
 };
 

diff --git a/src/components/compose/ExerciseCard.tsx b/src/components/compose/ExerciseCard.tsx
@@ -8,15 +8,15 @@ import {
   Card,
   Chip,
   Divider,
-  Grid,
+  Grid2,
   IconButton,
   Stack,
   Tooltip,
   Typography,
 } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { entries } from "lodash";
-import { FC, useContext, useMemo } from "react";
+import { FC, memo, useContext, useMemo } from "react";
 import { MdEdit, MdStar } from "react-icons/md";
 import FakeId from "../FakeId";
 import { ContainerContext } from "./Container";
@@ -28,7 +28,6 @@ const ExerciseCard: FC<{
   exercise: SelectExerciseQuery["exercise"] & { id: string };
 }> = ({ exercise, isTalon, isDragging }) => {
   const containerId = useContext(ContainerContext);
-  const highlightedid = composeStore((state) => state.highlightedid);
   const view = composeStore((state) => state.view);
   const exerciseView = composeStore((state) => state.exerciseView);
   const placements = useAtomValue(exercisePlacementsAtom);
@@ -63,7 +62,6 @@ const ExerciseCard: FC<{
         return (
           <Stack
             key={group}
-            bgcolor={isMissing ? "red" : "none"}
             width={20}
             height={20}
             alignItems={"center"}
@@ -73,7 +71,6 @@ const ExerciseCard: FC<{
             <Typography
               variant="caption"
               sx={{
-                color: isMissing ? "white" : "black",
                 fontWeight: isMissing ? "600" : "400",
                 opacity: value ? 1 : 0.2,
               }}
@@ -94,19 +91,13 @@ const ExerciseCard: FC<{
           borderRadius: 1,
           padding: 1,
           paddingBottom: 1.5,
-          cursor: isDetailedView ? "auto" : "grab",
+          cursor: "pointer",
           userSelect: isDetailedView ? "auto" : "none",
-          backgroundColor:
-            highlightedid === exercise.id ? "lightblue" : "white",
           opacity: isDragging ? 0.5 : 1,
-          border: isAgeGroupBad ? "1px solid red" : "none",
+          borderColor: isAgeGroupBad ? "red" : "divider",
+          borderWidth: 1,
+          borderStyle: "solid",
         }}
-        // onMouseEnter={() => {
-        //   setHighlightedid(exercise.id);
-        // }}
-        // onMouseLeave={() => {
-        //   setHighlightedid(null);
-        // }}
       >
         <Stack gap={1} p={isSingleView ? 1 : 0}>
           <Stack
@@ -122,7 +113,9 @@ const ExerciseCard: FC<{
                 #{exercise.id}
               </Typography>
             )}
-            <MdStar color="gold" />
+            <Box flexShrink={0}>
+              <MdStar color="gold" />
+            </Box>
             {isSingleView &&
               exercise.tags.map((tag) => (
                 <Chip key={tag.id} size="small" label={tag.name} />
@@ -165,9 +158,9 @@ const ExerciseCard: FC<{
               </Stack>
               {isDetailedView && (
                 <>
-                  <Grid container columns={2} spacing={2}>
+                  <Grid2 container columns={2} spacing={2}>
                     {exercise.helpingQuestions.length > 0 && (
-                      <Grid item xs={1}>
+                      <Grid2 size={1}>
                         <Typography variant="body2">Segítőkérdések:</Typography>
                         <ul>
                           {exercise.helpingQuestions.map((question) => (
@@ -178,10 +171,10 @@ const ExerciseCard: FC<{
                             </li>
                           ))}
                         </ul>
-                      </Grid>
+                      </Grid2>
                     )}
                     {exercise.solutionOptions.length > 0 && (
-                      <Grid item xs={1}>
+                      <Grid2 size={1}>
                         <Typography variant="body2">Válaszopciók:</Typography>
                         <ul>
                           {exercise.solutionOptions.map((question) => (
@@ -192,9 +185,9 @@ const ExerciseCard: FC<{
                             </li>
                           ))}
                         </ul>
-                      </Grid>
+                      </Grid2>
                     )}
-                  </Grid>
+                  </Grid2>
                   <Typography variant="body2">
                     Megoldás: <b>{exercise.solution}</b>
                   </Typography>
@@ -209,4 +202,5 @@ const ExerciseCard: FC<{
   );
 };
 
-export default ExerciseCard;
+const MemoizedExerciseCard = memo(ExerciseCard);
+export default MemoizedExerciseCard;
diff --git a/src/components/compose/SortableItem.tsx → src/components/compose/Item.tsx b/src/components/compose/SortableItem.tsx → src/components/compose/Item.tsx
@@ -1,18 +1,13 @@
 import ExerciseCard from "@/components/compose/ExerciseCard";
+import { useSelectExerciseQuery } from "@/generated/graphql.tsx";
 import type { UniqueIdentifier } from "@dnd-kit/core";
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
 import { Card, Stack, Typography } from "@mui/material";
-import type { FC } from "react";
-import { useSelectExerciseQuery } from "@/generated/graphql.tsx";
+import { FC, memo } from "react";
 
 export const Item: FC<{
   id: UniqueIdentifier;
   isDragging?: boolean;
 }> = ({ id, isDragging = false }) => {
-  //const exercises = useAtomValue(exerciseCardsAtom);
-  //const exercise = exercises.find((exercise) => exercise.id === id);
-
   const { data, loading } = useSelectExerciseQuery({
     variables: {
       exerciseId: String(id),
@@ -49,27 +44,5 @@ export const Item: FC<{
   );
 };
 
-const SortableItem: FC<{ id: UniqueIdentifier }> = ({ id }) => {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    alignSelf: "stretch",
-  };
-
-  return (
-    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-      <Item id={id} isDragging={isDragging} />
-    </div>
-  );
-};
-
-export default SortableItem;
+const MemoizedItem = memo(Item);
+export default MemoizedItem;
diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx
@@ -665,6 +665,14 @@ export type UpdateExerciseMutationVariables = Exact<{
 
 export type UpdateExerciseMutation = { __typename: 'Mutation', updateExercise: { __typename: 'Exercise', id: string } };
 
+export type UpdateExerciseSheetMutationVariables = Exact<{
+  updateExerciseSheetId: Scalars['ID']['input'];
+  sheetData: UpdateExerciseSheetInput;
+}>;
+
+
+export type UpdateExerciseSheetMutation = { __typename: 'Mutation', updateExerciseSheet: { __typename: 'ExerciseSheet', id: string } };
+
 export type UpdateUserMutationVariables = Exact<{
   data: UserUpdateInput;
 }>;
@@ -1644,6 +1652,40 @@ export function useUpdateExerciseMutation(baseOptions?: Apollo.MutationHookOptio
 export type UpdateExerciseMutationHookResult = ReturnType<typeof useUpdateExerciseMutation>;
 export type UpdateExerciseMutationResult = Apollo.MutationResult<UpdateExerciseMutation>;
 export type UpdateExerciseMutationOptions = Apollo.BaseMutationOptions<UpdateExerciseMutation, UpdateExerciseMutationVariables>;
+export const UpdateExerciseSheetDocument = gql`
+    mutation updateExerciseSheet($updateExerciseSheetId: ID!, $sheetData: UpdateExerciseSheetInput!) {
+  updateExerciseSheet(id: $updateExerciseSheetId, sheetData: $sheetData) {
+    id
+  }
+}
+    `;
+export type UpdateExerciseSheetMutationFn = Apollo.MutationFunction<UpdateExerciseSheetMutation, UpdateExerciseSheetMutationVariables>;
+
+/**
+ * __useUpdateExerciseSheetMutation__
+ *
+ * To run a mutation, you first call `useUpdateExerciseSheetMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUpdateExerciseSheetMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [updateExerciseSheetMutation, { data, loading, error }] = useUpdateExerciseSheetMutation({
+ *   variables: {
+ *      updateExerciseSheetId: // value for 'updateExerciseSheetId'
+ *      sheetData: // value for 'sheetData'
+ *   },
+ * });
+ */
+export function useUpdateExerciseSheetMutation(baseOptions?: Apollo.MutationHookOptions<UpdateExerciseSheetMutation, UpdateExerciseSheetMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpdateExerciseSheetMutation, UpdateExerciseSheetMutationVariables>(UpdateExerciseSheetDocument, options);
+      }
+export type UpdateExerciseSheetMutationHookResult = ReturnType<typeof useUpdateExerciseSheetMutation>;
+export type UpdateExerciseSheetMutationResult = Apollo.MutationResult<UpdateExerciseSheetMutation>;
+export type UpdateExerciseSheetMutationOptions = Apollo.BaseMutationOptions<UpdateExerciseSheetMutation, UpdateExerciseSheetMutationVariables>;
 export const UpdateUserDocument = gql`
     mutation UpdateUser($data: UserUpdateInput!) {
   updateUser(data: $data) {

diff --git a/src/graphql/updateExerciseSheet.graphql b/src/graphql/updateExerciseSheet.graphql
@@ -0,0 +1,8 @@
+mutation updateExerciseSheet(
+  $updateExerciseSheetId: ID!
+  $sheetData: UpdateExerciseSheetInput!
+) {
+  updateExerciseSheet(id: $updateExerciseSheetId, sheetData: $sheetData) {
+    id
+  }
+}