allow a player to store their pronouns as part of their profile

hasura/metadata/tables.yaml

@@ -308,6 +308,7 @@
       - ethereum_address
       - id
       - player_type_id
+      - pronouns
       - rank
       - role
       - timezone
@@ -322,10 +323,11 @@
       - color_mask
       - ethereum_address
       - id
+      - pronouns
       - rank
       - role
-      - total_xp
       - timezone
+      - total_xp
       - username
       filter: {}
       allow_aggregations: true
@@ -336,6 +338,7 @@
       - availability_hours
       - color_mask
       - player_type_id
+      - pronouns
       - role
       - timezone
       - username

hasura/migrations/1626453884524_alter_table_public_player_add_column_pronouns/down.sql

@@ -0,0 +1 @@
+ALTER TABLE "public"."player" DROP COLUMN "pronouns";

hasura/migrations/1626453884524_alter_table_public_player_add_column_pronouns/up.sql

@@ -0,0 +1 @@
+ALTER TABLE "public"."player" ADD COLUMN "pronouns" text NULL;

packages/web/components/Player/Section/PlayerHero.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, HStack, Link, Text, VStack } from '@metafam/ds';
+import { Box, Flex, HStack, Link, Text, VStack, WrapItem } from '@metafam/ds';
 import { PlayerAvatar } from 'components/Player/PlayerAvatar';
 import { PlayerFragmentFragment } from 'graphql/autogen/types';
 import { getPersonalityInfo } from 'graphql/getPersonalityInfo';
@@ -12,6 +12,7 @@ import { ColorBar } from '../ColorBar';
 import { PlayerContacts } from '../PlayerContacts';
 import { PlayerBrightId } from './PlayerBrightId';
 import { PlayerCollab } from './PlayerCollab';
+import { PlayerPronouns } from './PlayerPronouns';
 
 const MAX_BIO_LENGTH = 240;
 
@@ -71,6 +72,9 @@ export const PlayerHero: React.FC<Props> = ({ player }) => {
         <HStack mt={2}>
           <PlayerContacts player={player} />
         </HStack>
+        <HStack mt={2}>
+          <PlayerPronouns player={player} />
+        </HStack>
         <Box w="100%">
           <PlayerCollab player={player} />
         </Box>

packages/web/components/Player/Section/PlayerPronouns.tsx

@@ -0,0 +1,17 @@
+import { MetaTag } from '@metafam/ds';
+import { PlayerFragmentFragment } from 'graphql/autogen/types';
+import React from 'react';
+
+type PlayerPronounsProps = {
+  player: PlayerFragmentFragment;
+};
+
+export const PlayerPronouns = ({ player }: PlayerPronounsProps) => (
+  <>
+    {player.pronouns && (
+      <MetaTag size="md" fontWeight="normal" backgroundColor="gray.600">
+        {player.pronouns}
+      </MetaTag>
+    )}
+  </>
+);

packages/web/components/Setup/SetupAvailability.tsx

@@ -26,7 +26,7 @@ export const SetupAvailability: React.FC<SetupAvailabilityProps> = ({
   const { onNextPress, nextButtonLabel } = useSetupFlow();
 
   const [invalid, setInvalid] = useState(false);
-  const { user } = useUser({ redirectTo: '/' });
+  const { user } = useUser();
   const toast = useToast();
 
   useEffect(() => {

packages/web/components/Setup/SetupDone.tsx

@@ -7,7 +7,7 @@ import React, { useState } from 'react';
 
 export const SetupDone: React.FC = () => {
   const router = useRouter();
-  const { user } = useUser({ redirectTo: '/' });
+  const { user } = useUser();
   const [loading, setLoading] = useState(false);
   return (
     <FlexContainer flex={1}>

packages/web/components/Setup/SetupPersonalityType.tsx

@@ -30,7 +30,7 @@ export const SetupPersonalityType: React.FC<SetupPersonalityTypeProps> = ({
   setColorMask,
 }) => {
   const { onNextPress, nextButtonLabel } = useSetupFlow();
-  const { user } = useUser({ redirectTo: '/' });
+  const { user } = useUser();
   const toast = useToast();
   const [updateAboutYouRes, updateAboutYou] = useUpdateAboutYouMutation();
   const [loading, setLoading] = useState(false);

packages/web/components/Setup/SetupPlayerType.tsx

@@ -23,7 +23,7 @@ export const SetupPlayerType: React.FC<SetupPlayerTypeProps> = ({
   setPlayerType,
 }) => {
   const { onNextPress, nextButtonLabel } = useSetupFlow();
-  const { user } = useUser({ redirectTo: '/' });
+  const { user } = useUser();
   const toast = useToast();
 
   const [updateAboutYouRes, updateAboutYou] = useUpdateAboutYouMutation();

packages/web/components/Setup/SetupPronouns.tsx

@@ -0,0 +1,78 @@
+import { Input, MetaButton, MetaHeading, useToast } from '@metafam/ds';
+import { FlexContainer } from 'components/Container';
+import { useSetupFlow } from 'contexts/SetupContext';
+import { useUpdateProfilePronounsMutation } from 'graphql/autogen/types';
+import { useUser } from 'lib/hooks';
+import React, { useState } from 'react';
+
+export type SetupPronounsProps = {
+  pronouns: string | undefined;
+  setPronouns: React.Dispatch<React.SetStateAction<string | undefined>>;
+};
+
+export const SetupPronouns: React.FC<SetupPronounsProps> = ({
+  pronouns,
+  setPronouns,
+}) => {
+  const { onNextPress, nextButtonLabel } = useSetupFlow();
+  const { user } = useUser();
+  const toast = useToast();
+
+  const [
+    updatePronounsRes,
+    updatePronouns,
+  ] = useUpdateProfilePronounsMutation();
+  const [loading, setLoading] = useState(false);
+
+  const handleNextPress = async () => {
+    if (!user) return;
+
+    setLoading(true);
+    const { error } = await updatePronouns({
+      playerId: user.id,
+      input: {
+        pronouns: pronouns ?? '',
+      },
+    });
+
+    if (error) {
+      const errorDetail = 'The octo is sad 😢';
+      toast({
+        title: 'Error',
+        description: `Unable to update Player Pronouns. ${errorDetail}`,
+        status: 'error',
+        isClosable: true,
+      });
+      setLoading(false);
+      return;
+    }
+
+    onNextPress();
+  };
+
+  return (
+    <FlexContainer>
+      <MetaHeading mb={10} textAlign="center">
+        What pronouns would you like?
+      </MetaHeading>
+      <Input
+        background="dark"
+        placeholder="PRONOUNS"
+        value={pronouns}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+          setPronouns(e.target.value)
+        }
+        w="auto"
+      />
+
+      <MetaButton
+        onClick={handleNextPress}
+        mt={10}
+        isLoading={updatePronounsRes.fetching || loading}
+        loadingText="Saving"
+      >
+        {nextButtonLabel}
+      </MetaButton>
+    </FlexContainer>
+  );
+};

packages/web/components/Setup/SetupSkills.tsx

@@ -49,7 +49,7 @@ export const SetupSkills: React.FC<SetupSkillsProps> = ({
   setSkills,
 }) => {
   const { onNextPress, nextButtonLabel } = useSetupFlow();
-  const { user } = useUser({ redirectTo: '/' });
+  const { user } = useUser();
   const toast = useToast();
 
   const [updateSkillsRes, updateSkills] = useUpdatePlayerSkillsMutation();

packages/web/components/Setup/SetupTimeZone.tsx

@@ -15,7 +15,7 @@ export const SetupTimeZone: React.FC<SetupTimezoneProps> = ({
   setTimeZone,
 }) => {
   const { onNextPress, nextButtonLabel } = useSetupFlow();
-  const { user } = useUser({ redirectTo: '/' });
+  const { user } = useUser();
   const toast = useToast();
 
   const [updateProfileRes, updateProfile] = useUpdateProfileMutation();

packages/web/components/Setup/SetupUsername.tsx

@@ -15,7 +15,7 @@ export const SetupUsername: React.FC<SetupUsernameProps> = ({
   setUsername,
 }) => {
   const { onNextPress, nextButtonLabel } = useSetupFlow();
-  const { user } = useUser({ redirectTo: '/' });
+  const { user } = useUser();
   const toast = useToast();
 
   const [updateUsernameRes, updateUsername] = useUpdatePlayerUsernameMutation();

packages/web/graphql/fragments.ts

@@ -9,6 +9,7 @@ export const PlayerFragment = gql`
     ethereum_address
     availability_hours
     timezone
+    pronouns
     ColorAspect {
       name
       description

packages/web/graphql/mutations/player.ts

@@ -47,3 +47,13 @@ export const UpdateSkillsMutation = gql`
     }
   }
 `;
+
+export const UpdateProfilePronouns = gql`
+  mutation updateProfilePronouns($playerId: uuid!, $input: player_set_input!) {
+    update_player_by_pk(pk_columns: { id: $playerId }, _set: $input) {
+      id
+      availability_hours
+      timezone
+    }
+  }
+`;

packages/web/pages/profile/setup/availability.tsx

@@ -15,7 +15,7 @@ export type DefaultSetupProps = InferGetStaticPropsType<typeof getStaticProps>;
 
 const AvailabilitySetup: React.FC<DefaultSetupProps> = () => {
   const [availability, setAvailability] = useState<string>('');
-  const { user } = useUser({ redirectTo: '/' });
+  const { user } = useUser();
 
   if (user?.player) {
     const { player } = user;

packages/web/pages/profile/setup/personalityType.tsx

@@ -25,7 +25,7 @@ type Props = InferGetStaticPropsType<typeof getStaticProps>;
 
 const PersonalityTypeSetup: React.FC<Props> = (props) => {
   const { personalityTypes } = props;
-  const { user } = useUser({ redirectTo: '/' });
+  const { user } = useUser();
   const [colorMask, setColorMask] = useState<number | undefined>(
     user?.player?.ColorAspect?.mask,
   );

packages/web/pages/profile/setup/playerType.tsx

@@ -23,7 +23,7 @@ type Props = InferGetStaticPropsType<typeof getStaticProps>;
 const PlayerTypeSetup: React.FC<Props> = (props) => {
   const { playerTypeChoices } = props;
   const [playerType, setPlayerType] = useState<Player_Type>();
-  const { user } = useUser({ redirectTo: '/' });
+  const { user } = useUser();
 
   if (user?.player) {
     const { player } = user;

packages/web/pages/profile/setup/pronouns.tsx

@@ -0,0 +1,35 @@
+import { SetupProfile } from 'components/Setup/SetupProfile';
+import { SetupPronouns } from 'components/Setup/SetupPronouns';
+import { SetupContextProvider } from 'contexts/SetupContext';
+import { useUser } from 'lib/hooks';
+import { InferGetStaticPropsType } from 'next';
+import React, { useState } from 'react';
+
+export const getStaticProps = async () => ({
+  props: {
+    hideAppDrawer: true,
+  },
+});
+
+export type DefaultSetupProps = InferGetStaticPropsType<typeof getStaticProps>;
+
+const PronounsSetup: React.FC<DefaultSetupProps> = () => {
+  const [pronouns, setPronouns] = useState<string | undefined>(undefined);
+  const { user } = useUser();
+
+  if (user?.player) {
+    const { player } = user;
+    if (player.pronouns && pronouns === undefined) {
+      setPronouns(player.pronouns);
+    }
+  }
+
+  return (
+    <SetupContextProvider>
+      <SetupProfile>
+        <SetupPronouns pronouns={pronouns} setPronouns={setPronouns} />
+      </SetupProfile>
+    </SetupContextProvider>
+  );
+};
+export default PronounsSetup;

packages/web/pages/profile/setup/skills.tsx

@@ -24,7 +24,7 @@ type Props = InferGetStaticPropsType<typeof getStaticProps>;
 const SkillsSetup: React.FC<Props> = (props) => {
   const { skillChoices } = props;
   const [skills, setSkills] = useState<Array<SkillOption>>([]);
-  const { user } = useUser({ redirectTo: '/' });
+  const { user } = useUser();
 
   if (user?.player) {
     const { player } = user;

packages/web/pages/profile/setup/timeZone.tsx

@@ -15,7 +15,7 @@ export type DefaultSetupProps = InferGetStaticPropsType<typeof getStaticProps>;
 
 const TimeZoneSetup: React.FC<DefaultSetupProps> = () => {
   const [timeZone, setTimeZone] = useState<string>('');
-  const { user } = useUser({ redirectTo: '/' });
+  const { user } = useUser();
 
   if (user?.player) {
     const { player } = user;

packages/web/pages/profile/setup/username.tsx

@@ -16,7 +16,7 @@ export type DefaultSetupProps = InferGetStaticPropsType<typeof getStaticProps>;
 const UsernameSetup: React.FC<DefaultSetupProps> = () => {
   const [username, setUsername] = useState<string | undefined>(undefined);
   const { address } = useWeb3();
-  const { user } = useUser({ redirectTo: '/' });
+  const { user } = useUser();
 
   if (user?.player) {
     const { player } = user;

packages/web/utils/setupOptions.tsx

@@ -41,6 +41,11 @@ export class SetupOptions {
       slug: 'username',
       sectionIndex: 0,
     },
+    {
+      label: 'Pronouns',
+      slug: 'pronouns',
+      sectionIndex: 0,
+    },
     {
       label: 'Personality Type',
       slug: 'personalityType',

schema.graphql

@@ -3451,7 +3451,7 @@ type player {
   """Remote relationship field"""
   daohausMemberships: [Member!]!
   discord_id: String
-  ethereum_address: String
+  ethereum_address: String!
 
   """An array relationship"""
   guilds(
@@ -3493,6 +3493,7 @@ type player {
   """An object relationship"""
   playerType: player_type
   player_type_id: Int
+  pronouns: String
 
   """An array relationship"""
   quest_completions(
@@ -3842,6 +3843,7 @@ input player_bool_exp {
   id: uuid_comparison_exp
   playerType: player_type_bool_exp
   player_type_id: Int_comparison_exp
+  pronouns: String_comparison_exp
   quest_completions: quest_completion_bool_exp
   quests: quest_bool_exp
   rank: PlayerRank_enum_comparison_exp
@@ -3895,6 +3897,7 @@ input player_insert_input {
   id: uuid
   playerType: player_type_obj_rel_insert_input
   player_type_id: Int
+  pronouns: String
   quest_completions: quest_completion_arr_rel_insert_input
   quests: quest_arr_rel_insert_input
   rank: PlayerRank_enum
@@ -3914,6 +3917,7 @@ type player_max_fields {
   ethereum_address: String
   id: uuid
   player_type_id: Int
+  pronouns: String
   role: String
   timezone: String
   total_xp: numeric
@@ -3932,6 +3936,7 @@ input player_max_order_by {
   ethereum_address: order_by
   id: order_by
   player_type_id: order_by
+  pronouns: order_by
   role: order_by
   timezone: order_by
   total_xp: order_by
@@ -3948,6 +3953,7 @@ type player_min_fields {
   ethereum_address: String
   id: uuid
   player_type_id: Int
+  pronouns: String
   role: String
   timezone: String
   total_xp: numeric
@@ -3966,6 +3972,7 @@ input player_min_order_by {
   ethereum_address: order_by
   id: order_by
   player_type_id: order_by
+  pronouns: order_by
   role: order_by
   timezone: order_by
   total_xp: order_by
@@ -4017,6 +4024,7 @@ input player_order_by {
   id: order_by
   playerType: player_type_order_by
   player_type_id: order_by
+  pronouns: order_by
   quest_completions_aggregate: quest_completion_aggregate_order_by
   quests_aggregate: quest_aggregate_order_by
   rank: order_by
@@ -4059,6 +4067,9 @@ enum player_select_column {
   """column name"""
   player_type_id
 
+  """column name"""
+  pronouns
+
   """column name"""
   rank
 
@@ -4089,6 +4100,7 @@ input player_set_input {
   ethereum_address: String
   id: uuid
   player_type_id: Int
+  pronouns: String
   rank: PlayerRank_enum
   role: String
   timezone: String
@@ -4692,6 +4704,9 @@ enum player_update_column {
   """column name"""
   player_type_id
 
+  """column name"""
+  pronouns
+
   """column name"""
   rank