feat: add contributors to exercise

mok-it · Jan 6, 2025 · 0757081 · 0757081
1 parent f831c67
commit 0757081
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 19 deletions.
diff --git a/src/components/ContributorsSelector.tsx b/src/components/ContributorsSelector.tsx
@@ -0,0 +1,30 @@
+import { FC } from "react";
+import { UsersQuery, useUsersQuery } from "@/generated/graphql.tsx";
+import { Skeleton } from "@mui/material";
+import { MultiSelect } from "@/components/MultiSelect.tsx";
+
+type ArrayElement<ArrayType extends readonly unknown[]> =
+  ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+
+type ContributorsSelectorProp = {
+  selectedUsers: string[];
+  onChange: (value: UsersQuery["users"]) => void;
+};
+
+export const ContributorsSelector: FC<ContributorsSelectorProp> = (props) => {
+  const { data, loading } = useUsersQuery();
+
+  if (loading) return <Skeleton variant="rounded" width={200} height={10} />;
+  if (!data) return "Failed to load users";
+
+  return (
+    <MultiSelect<ArrayElement<UsersQuery["users"]>>
+      label="Közreműködők"
+      items={data.users}
+      value={data.users.filter((user) => props.selectedUsers.includes(user.id))}
+      getItemLabel={(item) => item.name}
+      getItemKey={(item) => item.id}
+      onChange={props.onChange}
+    />
+  );
+};
diff --git a/src/components/CreatedByItem.tsx b/src/components/CreatedByItem.tsx
@@ -0,0 +1,20 @@
+import { User } from "@/generated/graphql.tsx";
+import { Avatar, Typography } from "@mui/material";
+
+export const CreatedByItem = ({
+  user,
+}: {
+  user: Pick<User, "avatarUrl" | "name">;
+}) => {
+  return (
+    <>
+      <Avatar
+        src={user.avatarUrl ?? undefined}
+        sx={{ height: 24, width: 24 }}
+      />
+      <Typography variant="body2" sx={{ color: "text.secondary" }}>
+        {user.name}
+      </Typography>
+    </>
+  );
+};
diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx
@@ -678,7 +678,7 @@ export type SelectExerciseQueryVariables = Exact<{
 }>;
 
 
-export type SelectExerciseQuery = { __typename: 'Query', exercise?: { __typename: 'Exercise', id: string, status: ExerciseStatus, description: string, solutionOptions: Array<string>, solution: string, solveIdea?: string | null, source?: string | null, createdAt: string, helpingQuestions: Array<string>, alert?: { __typename: 'ExerciseAlert', description: string, severity: AlertSeverity } | null, sameLogicExerciseGroup?: { __typename: 'SameLogicExerciseGroup', exercises: Array<{ __typename: 'Exercise', id: string, description: string, createdAt: string, difficulty: Array<{ __typename: 'ExerciseDifficulty', difficulty: number, ageGroup: ExerciseAgeGroup }>, exerciseImage?: { __typename: 'Image', url: string } | null, tags: Array<{ __typename: 'Tag', id: string, name: string }>, createdBy: { __typename: 'User', id: string, userName: string, avatarUrl?: string | null } }> } | null, exerciseImage?: { __typename: 'Image', id: string, url: string } | null, solutionImage?: { __typename: 'Image', id: string, url: string } | null, createdBy: { __typename: 'User', id: string, name: string, avatarUrl?: string | null }, solveIdeaImage?: { __typename: 'Image', id: string, url: string } | null, tags: Array<{ __typename: 'Tag', id: string, name: string }>, difficulty: Array<{ __typename: 'ExerciseDifficulty', ageGroup: ExerciseAgeGroup, difficulty: number }>, checks: Array<{ __typename: 'ExerciseCheck', id: string, type: ExerciseCheckType, createdAt: string, user: { __typename: 'User', id: string, name: string } }> } | null };
+export type SelectExerciseQuery = { __typename: 'Query', exercise?: { __typename: 'Exercise', id: string, status: ExerciseStatus, description: string, solutionOptions: Array<string>, solution: string, solveIdea?: string | null, source?: string | null, createdAt: string, helpingQuestions: Array<string>, alert?: { __typename: 'ExerciseAlert', description: string, severity: AlertSeverity } | null, sameLogicExerciseGroup?: { __typename: 'SameLogicExerciseGroup', exercises: Array<{ __typename: 'Exercise', id: string, description: string, createdAt: string, difficulty: Array<{ __typename: 'ExerciseDifficulty', difficulty: number, ageGroup: ExerciseAgeGroup }>, exerciseImage?: { __typename: 'Image', url: string } | null, tags: Array<{ __typename: 'Tag', id: string, name: string }>, createdBy: { __typename: 'User', id: string, userName: string, avatarUrl?: string | null } }> } | null, exerciseImage?: { __typename: 'Image', id: string, url: string } | null, solutionImage?: { __typename: 'Image', id: string, url: string } | null, createdBy: { __typename: 'User', id: string, name: string, avatarUrl?: string | null }, contributors: Array<{ __typename: 'User', id: string, name: string, avatarUrl?: string | null }>, solveIdeaImage?: { __typename: 'Image', id: string, url: string } | null, tags: Array<{ __typename: 'Tag', id: string, name: string }>, difficulty: Array<{ __typename: 'ExerciseDifficulty', ageGroup: ExerciseAgeGroup, difficulty: number }>, checks: Array<{ __typename: 'ExerciseCheck', id: string, type: ExerciseCheckType, createdAt: string, user: { __typename: 'User', id: string, name: string } }> } | null };
 
 export type ExerciseHistoryByExerciseQueryVariables = Exact<{
   exerciseId: Scalars['ID']['input'];
@@ -1366,6 +1366,11 @@ export const SelectExerciseDocument = gql`
       name
       avatarUrl
     }
+    contributors {
+      id
+      name
+      avatarUrl
+    }
     solveIdeaImage {
       id
       url

diff --git a/src/graphql/exercise.graphql b/src/graphql/exercise.graphql
@@ -65,6 +65,11 @@ query selectExercise($exerciseId: ID!) {
       name
       avatarUrl
     }
+    contributors {
+      id
+      name
+      avatarUrl
+    }
     solveIdeaImage {
       id
       url

diff --git a/src/pages/ExerciseDetails.tsx b/src/pages/ExerciseDetails.tsx
@@ -13,7 +13,6 @@ import { ExerciseFieldsType } from "@/util/types";
 import { LoadingButton } from "@mui/lab";
 import {
   Alert,
-  Avatar,
   Button,
   Card,
   Divider,
@@ -34,6 +33,7 @@ import ExerciseFields from "./createExercise/ExerciseFields";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import { useNavigate } from "react-router-dom";
 import { AlertColor } from "@mui/material/Alert/Alert";
+import { CreatedByItem } from "@/components/CreatedByItem.tsx";
 
 const ExerciseDetails: FC = () => {
   const { enqueueSnackbar } = useSnackbar();
@@ -73,6 +73,8 @@ const ExerciseDetails: FC = () => {
               exerciseImage: formDataToSend.exerciseImage,
               solutionImage: formDataToSend.solutionImage,
               solveIdeaImage: formDataToSend.solveIdeaImage,
+
+              contributors: formDataToSend.contributors,
             },
           },
         });
@@ -197,6 +199,7 @@ const ExerciseDetailsForm: FC<{ updateSignal: boolean }> = ({
         exerciseImage: data.exercise.exerciseImage?.id,
         solutionImage: data.exercise.solutionImage?.id,
         solveIdeaImage: data.exercise.solveIdeaImage?.id,
+        contributors: data.exercise.contributors.map((c) => c.id),
         source: data.exercise.source,
         tags: data.exercise.tags.map((tag) => tag.id),
       });
@@ -287,18 +290,14 @@ const ExerciseDetailsForm: FC<{ updateSignal: boolean }> = ({
                       component="span"
                       sx={{ color: "text.primary" }}
                     >
-                      Beküldő:{" "}
-                    </Typography>
-                    <Avatar
-                      src={exercise.createdBy.avatarUrl ?? undefined}
-                      sx={{ height: 24, width: 24 }}
-                    />
-                    <Typography
-                      variant="body2"
-                      sx={{ color: "text.secondary" }}
-                    >
-                      {exercise.createdBy.name}
+                      {exercise.contributors.length > 0
+                        ? "Beküldők: "
+                        : "Beküldő:"}
                     </Typography>
+                    <CreatedByItem user={exercise.createdBy} />
+                    {exercise.contributors.map((user) => (
+                      <CreatedByItem user={user} />
+                    ))}
                   </Stack>
                   <Typography
                     variant="body2"

diff --git a/src/pages/createExercise/CreateExercise.tsx b/src/pages/createExercise/CreateExercise.tsx
@@ -57,6 +57,8 @@ export const CreateExercise = () => {
             exerciseImage: formDataToSend.exerciseImage,
             solutionImage: formDataToSend.solutionImage,
             solveIdeaImage: formDataToSend.solveIdeaImage,
+
+            contributors: formDataToSend.contributors,
           },
         },
       });

diff --git a/src/pages/createExercise/ExerciseFields.tsx b/src/pages/createExercise/ExerciseFields.tsx
@@ -21,6 +21,7 @@ import { useDebounce } from "react-use";
 import { KaTeX } from "../../components/Katex.tsx";
 import { MultiSelect } from "../../components/MultiSelect.tsx";
 import { SolutionOptions } from "@/components/SolutionOptions/SolutionOptions.tsx";
+import { ContributorsSelector } from "@/components/ContributorsSelector.tsx";
 
 const ExerciseFields: FC = () => {
   const { values, handleChange, handleBlur, setFieldValue } =
@@ -303,12 +304,25 @@ const ExerciseFields: FC = () => {
           {categoryDifficultySelect}
         </Grid2>
       </Grid2>
-      <HelpingQuestions
-        value={values.helpingQuestions}
-        onChange={(value) => {
-          setFieldValue("helpingQuestions", value);
-        }}
-      />
+      <Stack gap={2}>
+        <HelpingQuestions
+          value={values.helpingQuestions}
+          onChange={(value) => {
+            setFieldValue("helpingQuestions", value);
+          }}
+        />
+        <SimpleAccordion summary="Közreműködő felhasználók">
+          <ContributorsSelector
+            onChange={(user) => {
+              setFieldValue(
+                "contributors",
+                user.map((u) => u.id),
+              );
+            }}
+            selectedUsers={values.contributors}
+          />
+        </SimpleAccordion>
+      </Stack>
     </Box>
   );
 };

diff --git a/src/util/const.ts b/src/util/const.ts
@@ -108,6 +108,7 @@ export const createExerciseInitialValue: ExerciseFieldsType = {
       ageGroup: "JEGESMEDVE",
     },
   ],
+  contributors: [],
   helpingQuestions: [],
   solution: "",
   solutionOptions: [],

diff --git a/src/util/types.ts b/src/util/types.ts
@@ -68,6 +68,7 @@ export type ExerciseFieldsType = {
   source?: InputMaybe<Scalars["String"]["input"]>;
   status?: ExerciseStatus;
   tags: Array<InputMaybe<Scalars["ID"]["input"]>>;
+  contributors: Array<Scalars["String"]["input"]>;
 
   exerciseImageUrl?: string | null | undefined;
   solutionImageUrl?: string | null | undefined;