style both

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

@@ -1,7 +1,7 @@
 import { Text } from '@metafam/ds';
-import { SetupPlayerType } from 'components/Setup/SetupPlayerType';
 import { Player_Type, PlayerFragmentFragment } from 'graphql/autogen/types';
 import React, { useState } from 'react';
+import { BOX_TYPE } from 'utils/boxTypes';
 
 import { FlexContainer } from '../../Container';
 import { ProfileSection } from '../../ProfileSection';
@@ -28,12 +28,7 @@ export const PlayerType: React.FC<Props> = ({
       title="Player type"
       onRemoveClick={onRemoveClick}
       displayEditButton={displayEditButton}
-      EditModal={
-        <SetupPlayerType
-          playerType={playerType}
-          setPlayerType={setPlayerType}
-        />
-      }
+      boxType={BOX_TYPE.PLAYER_TYPE}
     >
       {player.type?.title && (
         <FlexContainer align="stretch">

packages/web/components/ProfileSection.tsx

@@ -1,6 +1,5 @@
 import {
   Box,
-  Button,
   EditIcon,
   HStack,
   IconButton,
@@ -8,23 +7,24 @@ import {
   ModalBody,
   ModalCloseButton,
   ModalContent,
-  ModalFooter,
   ModalHeader,
   ModalOverlay,
   Text,
   useDisclosure,
 } from '@metafam/ds';
 import BackgroundImage from 'assets/main-background.jpg';
+import { SetupPlayerType } from 'components/Setup/SetupPlayerType';
 import React from 'react';
 import { FaTimes } from 'react-icons/fa';
+import { BOX_TYPE } from 'utils/boxTypes';
 
 export type ProfileSectionProps = {
   title?: string;
   children?: React.ReactNode;
-  EditModal?: React.ReactNode;
   onRemoveClick?: () => void;
   canEdit?: boolean;
   displayEditButton?: boolean;
+  boxType: string;
 };
 
 // TODO If MetaBox is only used for Player profile maybe merge both component
@@ -34,7 +34,7 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
   onRemoveClick,
   canEdit,
   displayEditButton,
-  EditModal,
+  boxType,
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
@@ -101,23 +101,18 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
             {title}
           </ModalHeader>
           <ModalCloseButton color="pinkShadeOne" size="xl" m={4} />
-          <ModalBody>{EditModal}</ModalBody>
-
-          <ModalFooter justifyContent="center">
-            <Button colorScheme="blue" mr={3}>
-              Save Changes
-            </Button>
-            <Button
-              variant="ghost"
-              onClick={onClose}
-              color="white"
-              _hover={{ bg: 'none' }}
-            >
-              Close
-            </Button>
-          </ModalFooter>
+          <ModalBody>{getBox(boxType, onClose)}</ModalBody>
         </ModalContent>
       </Modal>
     </Box>
   );
 };
+
+const getBox = (boxType: string, onClose: () => void): React.ReactNode => {
+  switch (boxType) {
+    case BOX_TYPE.PLAYER_TYPE:
+      return <SetupPlayerType isEdit onClose={onClose} />;
+    default:
+      return <SetupPlayerType isEdit onClose={onClose} />;
+  }
+};

packages/web/components/Setup/SetupPlayerType.tsx

@@ -1,6 +1,7 @@
 import {
+  Button,
   MetaButton,
-  MetaHeading,
+  ModalFooter,
   SimpleGrid,
   Text,
   useToast,
@@ -12,23 +13,29 @@ import { getPlayerTypes } from 'graphql/getPlayerTypes';
 import { useUser } from 'lib/hooks';
 import React, { useEffect, useState } from 'react';
 
-export type SetupPlayerTypeProps = {
-  playerType: Player_Type | undefined;
-  setPlayerType: React.Dispatch<React.SetStateAction<Player_Type | undefined>>;
+export type Props = {
+  isEdit?: boolean;
+  onClose?: () => void;
 };
 
-export const SetupPlayerType: React.FC<SetupPlayerTypeProps> = ({
-  playerType,
-  setPlayerType,
-}) => {
+export const SetupPlayerType: React.FC<Props> = ({ isEdit, onClose }) => {
   const { onNextPress, nextButtonLabel } = useSetupFlow();
-  const { user } = useUser({ redirectTo: '/' });
   const toast = useToast();
 
   const [updateAboutYouRes, updateAboutYou] = useUpdateAboutYouMutation();
   const [loading, setLoading] = useState(false);
   const [playerTypeChoices, setPlayerTypeChoices] = useState<Player_Type[]>([]);
 
+  const [playerType, setPlayerType] = useState<Player_Type>();
+  const { user } = useUser({ redirectTo: '/' });
+
+  if (user?.player) {
+    const { player } = user;
+    if (player.type && !playerType) {
+      setPlayerType(player.type);
+    }
+  }
+
   useEffect(() => {
     async function fetchMyAPI() {
       const response = await getPlayerTypes();
@@ -42,7 +49,17 @@ export const SetupPlayerType: React.FC<SetupPlayerTypeProps> = ({
     if (!user) return;
 
     setLoading(true);
+
+    save();
+
+    onNextPress();
+  };
+
+  const save = async () => {
+    if (!user) return;
+
     if (user.player?.type?.id !== playerType?.id) {
+      console.log('iz nekega razloga ne shrani izbire');
       const { error } = await updateAboutYou({
         playerId: user.id,
         input: {
@@ -58,22 +75,12 @@ export const SetupPlayerType: React.FC<SetupPlayerTypeProps> = ({
           isClosable: true,
         });
         setLoading(false);
-        return;
       }
     }
-
-    onNextPress();
   };
 
   return (
     <FlexContainer>
-      <MetaHeading mb={5} textAlign="center">
-        Player Type
-      </MetaHeading>
-      <Text mb={10}>
-        Please read the features of each player type below. And select the one
-        that suits you best.
-      </Text>
       <SimpleGrid columns={[1, null, 3, 3]} spacing={4}>
         {playerTypeChoices.map((p) => (
           <FlexContainer
@@ -106,15 +113,33 @@ export const SetupPlayerType: React.FC<SetupPlayerTypeProps> = ({
         ))}
       </SimpleGrid>
 
-      <MetaButton
-        onClick={handleNextPress}
-        mt={10}
-        isDisabled={!playerType}
-        isLoading={updateAboutYouRes.fetching || loading}
-        loadingText="Saving"
-      >
-        {nextButtonLabel}
-      </MetaButton>
+      {isEdit && (
+        <ModalFooter mt={6}>
+          <Button colorScheme="blue" mr={3} onClick={save}>
+            Save Changes
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={onClose}
+            color="white"
+            _hover={{ bg: 'none' }}
+          >
+            Close
+          </Button>
+        </ModalFooter>
+      )}
+
+      {!isEdit && (
+        <MetaButton
+          onClick={handleNextPress}
+          mt={10}
+          isDisabled={!playerType}
+          isLoading={updateAboutYouRes.fetching || loading}
+          loadingText="Saving"
+        >
+          {nextButtonLabel}
+        </MetaButton>
+      )}
     </FlexContainer>
   );
 };

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

@@ -1,30 +1,22 @@
+import { MetaHeading, Text } from '@metafam/ds';
 import { SetupPlayerType } from 'components/Setup/SetupPlayerType';
 import { SetupProfile } from 'components/Setup/SetupProfile';
 import { SetupContextProvider } from 'contexts/SetupContext';
-import { Player_Type } from 'graphql/autogen/types';
-import { useUser } from 'lib/hooks';
-import React, { useState } from 'react';
+import React from 'react';
 
-const PlayerTypeSetup: React.FC = () => {
-  const [playerType, setPlayerType] = useState<Player_Type>();
-  const { user } = useUser({ redirectTo: '/' });
+const PlayerTypeSetup: React.FC = () => (
+  <SetupContextProvider>
+    <MetaHeading mb={5} textAlign="center">
+      Player Type
+    </MetaHeading>
+    <Text mb={10}>
+      Please read the features of each player type below. And select the one
+      that suits you best.
+    </Text>
+    <SetupProfile>
+      <SetupPlayerType />
+    </SetupProfile>
+  </SetupContextProvider>
+);
 
-  if (user?.player) {
-    const { player } = user;
-    if (player.type && !playerType) {
-      setPlayerType(player.type);
-    }
-  }
-
-  return (
-    <SetupContextProvider>
-      <SetupProfile>
-        <SetupPlayerType
-          playerType={playerType}
-          setPlayerType={setPlayerType}
-        />
-      </SetupProfile>
-    </SetupContextProvider>
-  );
-};
 export default PlayerTypeSetup;

packages/web/utils/boxTypes.ts

@@ -0,0 +1,9 @@
+export const BOX_TYPE = {
+  PLAYER_SKILLS: 'Skills',
+  PLAYER_GALLERY: 'Gallery',
+  PLAYER_MEMBERSHIPS: 'Memberships',
+  PLAYER_ACHIEVEMENTS: 'Achievements',
+  PLAYER_TYPE: 'Player Type',
+  PLAYER_COLOR_DISPOSITION: 'Color disposition',
+  PLAYER_ROLES: 'Roles',
+};