feat: add role selector to create quest form

packages/web/components/Quest/QuestForm.tsx

@@ -12,6 +12,7 @@ import {
 } from '@metafam/ds';
 import {
   GuildFragmentFragment,
+  PlayerRole,
   QuestFragmentFragment,
   QuestRepetition_Enum,
   QuestStatus_Enum,
@@ -23,6 +24,7 @@ import { Controller, FieldError, useForm } from 'react-hook-form';
 import { QuestRepetitionHint, URIRegexp } from '../../utils/questHelpers';
 import { CategoryOption, SkillOption } from '../../utils/skillHelpers';
 import { FlexContainer } from '../Container';
+import { RolesSelect } from '../Roles';
 import { SkillsSelect } from '../Skills';
 import { WYSIWYGEditor } from '../WYSIWYGEditor';
 import { RepetitionColors } from './QuestTags';
@@ -120,24 +122,24 @@ type Props = {
   guilds: GuildFragmentFragment[];
   editQuest?: QuestFragmentFragment;
   skillChoices: Array<CategoryOption>;
+  roleChoices: Array<PlayerRole>;
   onSubmit: (data: CreateQuestFormInputs) => void;
   success?: boolean;
   fetching?: boolean;
   submitLabel: string;
   loadingLabel: string;
-  roleChoices: [];
 };
 
 export const QuestForm: React.FC<Props> = ({
   guilds,
   skillChoices,
+  roleChoices,
   onSubmit,
   success,
   fetching,
   submitLabel,
   loadingLabel,
   editQuest,
-  roleChoices,
 }) => {
   console.log('roleChoices', roleChoices);
   const defaultValues = useMemo(() => getDefaultFormValues(editQuest, guilds), [
@@ -329,7 +331,25 @@ export const QuestForm: React.FC<Props> = ({
           </FlexContainer>
         </Field>
 
-        <Flex justify="center" align="center" my="2em ! important" w="100%">
+        <Field label="Roles">
+          <FlexContainer w="100%" align="stretch" maxW="50rem">
+            <Controller
+              name="roles"
+              control={control}
+              defaultValue={[]}
+              render={({field : { onChange, value }}) => (
+                <RolesSelect
+                  roleChoices={roleChoices}
+                  roles={value}
+                  setRoles={onChange}
+                  placeHolder="Select required roles"
+                />
+              )}
+            />
+          </FlexContainer>
+        </Field>
+
+        <Flex justify="space-between" mt={4} w="100%">
           <MetaButton
             disabled={guilds.length === 0}
             isLoading={fetching}

packages/web/components/Roles.tsx

@@ -0,0 +1,36 @@
+import { SelectSearch } from '@metafam/ds';
+import { PlayerRole } from 'graphql/autogen/types';
+import React from 'react';
+import { RoleOption } from 'utils/roleHelpers';
+
+export type SetupRolesProps = {
+  roleChoices: Array<PlayerRole>;
+  placeHolder: string;
+  roles: Array<RoleOption>;
+  setRoles: React.Dispatch<React.SetStateAction<Array<RoleOption>>>;
+  id?: string;
+};
+
+export const RolesSelect: React.FC<SetupRolesProps> = ({
+  roleChoices,
+  placeHolder,
+  roles,
+  setRoles,
+  id,
+}) => (
+  <SelectSearch
+    menuPlacement="top"
+    isMulti
+    value={roles}
+    onChange={(value) => setRoles(value as Array<RoleOption>)}
+    options={roleChoices.map((roleChoice) => ({
+      label: roleChoice.label,
+      value: roleChoice.role,
+    }))}
+    autoFocus
+    closeMenuOnSelect={false}
+    placeholder={placeHolder}
+    id={`roles-select-container-${id || ''}`}
+    inputId={`roles-select-input-${id || ''}`}
+  />
+);

packages/web/pages/quest/create.tsx

@@ -6,9 +6,10 @@ import {
   QuestRepetition_ActionEnum,
   useCreateQuestMutation,
 } from 'graphql/autogen/types';
+import { getPlayerRoles } from 'graphql/queries/enums/getRoles';
 import { getSkills } from 'graphql/queries/enums/getSkills';
 import { getGuilds } from 'graphql/queries/guild';
-import { useUser } from 'lib/hooks';
+// import { useUser } from 'lib/hooks';
 import { InferGetStaticPropsType } from 'next';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -17,8 +18,7 @@ import { parseSkills } from 'utils/skillHelpers';
 
 type Props = InferGetStaticPropsType<typeof getStaticProps>;
 
-const CreateQuestPage: React.FC<Props> = ({ guilds, skillChoices }) => {
-  useUser({ redirectTo: '/quests', redirectIfNotFound: true });
+const CreateQuestPage: React.FC<Props> = ({ guilds, skillChoices, roleChoices }) => {
   const router = useRouter();
   const toast = useToast();
   const [createQuestState, createQuest] = useCreateQuestMutation();
@@ -71,7 +71,7 @@ const CreateQuestPage: React.FC<Props> = ({ guilds, skillChoices }) => {
       <MetaHeading mb={4}>Create a Quest</MetaHeading>
 
       <QuestForm
-        {...{ guilds, skillChoices, roleChoices: [],  onSubmit }}
+        {...{ guilds, skillChoices, onSubmit, roleChoices }}
         success={!!createQuestState.data?.createQuest?.success}
         fetching={createQuestState.fetching}
         submitLabel="Create Quest"
@@ -82,6 +82,7 @@ const CreateQuestPage: React.FC<Props> = ({ guilds, skillChoices }) => {
 };
 
 export const getStaticProps = async () => {
+  const roleChoices = await getPlayerRoles();
   const guilds = await getGuilds();
   const skills = await getSkills();
   const skillChoices = parseSkills(skills);
@@ -90,6 +91,7 @@ export const getStaticProps = async () => {
     props: {
       guilds,
       skillChoices,
+      roleChoices,
     },
     revalidate: 1,
   };

packages/web/utils/roleHelpers.ts

@@ -0,0 +1,35 @@
+import { PlayerRole } from '../graphql/autogen/types';
+
+export type RoleMap = {
+  [category: string]: CategoryOption;
+};
+
+export type RoleOption = PlayerRole & {
+  value: string;
+  label: string;
+};
+
+export type CategoryOption = {
+  label: string;
+  options: Array<RoleOption>;
+};
+
+// export const parseRoles = (
+//   roles: Array<PlayerRole>,
+// ): Array<CategoryOption> => {
+//   const rolesMap: RoleMap = {};
+//   roles.forEach((role) => {
+//     if (!(role.category in rolesMap)) {
+//       rolesMap[role.category] = {
+//         label: role.category,
+//         options: [],
+//       };
+//     }
+//     rolesMap[role.category].options?.push({
+//       value: role.id,
+//       label: role.name,
+//       ...role,
+//     });
+//   });
+//   return Object.values(rolesMap);
+// };