Merge pull request #212 from estartando-devs/refactor/id-card-2024

Refactor/id-card-2024

Author: ramonxm

src/components/IdCard/idCardHandlers.ts

@@ -12,6 +12,7 @@ export const useIdCardHandlers = ({
     src: string;
     alt: string;
   }>(image);
+
   const courseKey = getKeyByCourse(course);
 
   useEffect(() => {

src/components/IdCard/styles.tsx

@@ -20,6 +20,12 @@ const styleByCourse: Record<CourseKey, CourseStyle> = {
     colorTitle: '#6C63FF',
     backgroundSrc: '/bg-card-design.png',
   },
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  softskills: {
+    colorTitle: '##F76B15',
+    backgroundSrc: '/bg-card-design.png',
+  },
 };
 
 export const Container = styled.div`

src/components/IdCard/utils/index.ts

@@ -1,5 +1,5 @@
 import { CourseKey } from '../../../mocks';
-import { CourseKeyByName } from '../../../types';
+import { CourseKeyByName, CourseKeyByNameTeam } from '../../../types';
 
 export const getKeyByCourse = (course: string) => {
   if (!course) {
@@ -9,6 +9,7 @@ export const getKeyByCourse = (course: string) => {
     'Desenvolvimento Web': CourseKeyByName['Desenvolvimento Web'],
     'Desenvolvimento Backend': CourseKeyByName['Desenvolvimento Backend'],
     'Design UI/UX': CourseKeyByName['Design UI/UX'],
+    'Soft Skills': CourseKeyByNameTeam['Soft Skills'],
   };
   return dict[course] as CourseKey;
 };

src/components/IdCardForm/index.tsx

@@ -7,15 +7,15 @@ import Cropper from 'react-easy-crop';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useTheme } from 'styled-components';
 import { useCropImage } from '../../hooks/useCropImage';
-import { CourseNameByKey, Status } from '../../types';
+import { CourseNameByKey, CourseNameByKeyTeam, Status } from '../../types';
 import { getCroppedImg } from '../../utils/cropImage';
 import { Input } from '../Input';
 import { Logo } from '../Logo';
 import { Typography } from '../Typography';
 import { FileIcon } from './components/FileIcon';
 import * as S from './styles';
 
-export const IdCardForm = () => {
+export const IdCardForm = (props: { team?: boolean }) => {
   const router = useRouter();
   const theme = useTheme();
   const [imagePreview, setImagePreview] = useState(null);
@@ -37,6 +37,12 @@ export const IdCardForm = () => {
 
   const handleSubmit = ({ email, ...rest }: Record<string, string>) => {
     setCookies('nagato', JSON.stringify({ ...rest }));
+
+    if (props.team) {
+      router.push(`/id-card/time/${rest.name}`);
+      return;
+    }
+
     router.push(`/id-card/${email}`);
     return;
 
@@ -150,11 +156,23 @@ export const IdCardForm = () => {
               id="course"
               color={theme.palette.design.white}
             >
-              {Object.entries(CourseNameByKey).map(([key, value]) => (
-                <option key={key} value={value}>
-                  {value}
-                </option>
-              ))}
+              {props.team ? (
+                <>
+                  {Object.entries(CourseNameByKeyTeam).map(([key, value]) => (
+                    <option key={key} value={value}>
+                      {value}
+                    </option>
+                  ))}
+                </>
+              ) : (
+                <>
+                  {Object.entries(CourseNameByKey).map(([key, value]) => (
+                    <option key={key} value={value}>
+                      {value}
+                    </option>
+                  ))}
+                </>
+              )}
             </Select>
           </>
           <Input

src/pages/id-card/time/[name].tsx

@@ -1,4 +1,4 @@
-import { Box, useToast } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { getCookie } from 'cookies-next';
 import { GetServerSideProps } from 'next';
 import { NextSeo } from 'next-seo';
@@ -49,7 +49,7 @@ export default function MyIdCard({
   profile: IdCardProps;
   error?: string;
 }) {
-  const toast = useToast();
+  // const toast = useToast();
 
   if (error) {
     return (
@@ -59,15 +59,15 @@ export default function MyIdCard({
     );
   }
 
-  toast({
-    position: 'top',
-    title: 'Tudo pronto!',
-    description:
-      'Agora você pode compartilhar seu id card. Não esqueça de nos marcar.',
-    status: 'success',
-    duration: 5000,
-    isClosable: true,
-  });
+  // toast({
+  //   position: 'top',
+  //   title: 'Tudo pronto!',
+  //   description:
+  //     'Agora você pode compartilhar seu id card. Não esqueça de nos marcar.',
+  //   status: 'success',
+  //   duration: 5000,
+  //   isClosable: true,
+  // });
 
   return (
     <Layout>

src/pages/id-card/time/index.tsx

@@ -18,7 +18,7 @@ export default function IdCardTeam() {
         display="flex"
         flexDirection="column"
       >
-        <IdCardForm />
+        <IdCardForm team />
         <Footer />
       </Box>
     </Layout>

src/types/CourseName.ts

@@ -8,3 +8,17 @@ export enum CourseKeyByName {
   'Desenvolvimento Backend' = 'backend',
   'Design UI/UX' = 'design',
 }
+
+export enum CourseNameByKeyTeam {
+  'frontend' = 'Desenvolvimento Web',
+  'backend' = 'Desenvolvimento Backend',
+  'design' = 'Design UI/UX',
+  'softskills' = 'Soft Skills',
+}
+
+export enum CourseKeyByNameTeam {
+  'Desenvolvimento Web' = 'frontend',
+  'Desenvolvimento Backend' = 'backend',
+  'Design UI/UX' = 'design',
+  'Soft Skills' = 'softskills',
+}