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

add id card 2024
estartando-devs · Jun 16, 2024 · e2f296a · e2f296a
2 parents 56d1e4d + 671dadc
commit e2f296a
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 85 deletions.
diff --git a/src/components/IdCard/index.tsx b/src/components/IdCard/index.tsx
@@ -81,7 +81,7 @@ export const IdCard = ({
               <S.Image {...imageSrc} />
             </S.ImageContainer>
             <S.Text weight="500" variant="body2">
-              {team ? 'Equipe' : 'Estudante'} 2022 @{' '}
+              {team ? 'Equipe' : 'Estudante'} 2024 @{' '}
               <strong>estartandodevs</strong>.com.br
             </S.Text>
           </S.PhotoContainer>

diff --git a/src/components/IdCardForm/index.tsx b/src/components/IdCardForm/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Select, useToast } from '@chakra-ui/react';
+import { Button, Select, useToast } from '@chakra-ui/react';
 import { setCookies } from 'cookies-next';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -15,7 +15,7 @@ import { Typography } from '../Typography';
 import { FileIcon } from './components/FileIcon';
 import * as S from './styles';
 
-export const IdCardForm = (props: { team?: boolean }) => {
+export const IdCardForm = () => {
   const router = useRouter();
   const theme = useTheme();
   const [imagePreview, setImagePreview] = useState(null);
@@ -35,15 +35,14 @@ export const IdCardForm = (props: { team?: boolean }) => {
     croppedArea,
   } = useCropImage();
 
-  const handleSubmit = ({ email, name, ...rest }: Record<string, string>) => {
-    if (props.team) {
-      setCookies('nagato', JSON.stringify({ ...rest }));
-      router.push(`/id-card/time/${name}`);
-      return;
-    }
-    router.push({ pathname: '/id-card/[email]', query: { email, name } });
-    sessionStorage.setItem('email', email);
-    sessionStorage.setItem('name', name);
+  const handleSubmit = ({ email, ...rest }: Record<string, string>) => {
+    setCookies('nagato', JSON.stringify({ ...rest }));
+    router.push(`/id-card/${email}`);
+    return;
+
+    // router.push({ pathname: '/id-card/[email]', query: { email, name } });
+    // sessionStorage.setItem('email', email);
+    // sessionStorage.setItem('name', name);
   };
 
   const toast = useToast();
@@ -120,7 +119,7 @@ export const IdCardForm = (props: { team?: boolean }) => {
         <S.ContainerHeading>
           <Typography variant="h1">Estartando Devs</Typography>
           <Typography variant="h2">
-            ID CARD <span>2022</span>
+            ID CARD <span>2024</span>
           </Typography>
         </S.ContainerHeading>
       </S.Header>
@@ -129,45 +128,48 @@ export const IdCardForm = (props: { team?: boolean }) => {
           <S.IdCardSectionTitle variant="h2" color="white">
             Crie seu ID Card personalizado e divulge nas suas redes.
           </S.IdCardSectionTitle>
-          <Input placeholder="Nome" type="text" id="name" name="name" />
-          {props.team && (
-            <>
-              <Input
-                placeholder="CEP"
-                type="text"
-                id="zipcode"
-                name="zipcode"
-              />
-              <Select
-                {...methods.register('course')}
-                placeholder="Selecione"
-                name="course"
-                id="course"
-                color={theme.palette.design.white}
-              >
-                {Object.entries(CourseNameByKey).map(([key, value]) => (
-                  <option key={key} value={value}>
-                    {value}
-                  </option>
-                ))}
-              </Select>
-            </>
-          )}
-          {!props.team && (
+          <Input
+            placeholder="Nome"
+            type="text"
+            id="name"
+            name="name"
+            required
+          />
+          <>
             <Input
-              placeholder="E-mail"
+              placeholder="CEP"
               type="text"
-              id="email"
-              name="email"
-              validation={{
-                required: 'E-mail é obrigatório',
-                pattern: {
-                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                  message: 'Insira um e-mail válido',
-                },
-              }}
+              id="zipcode"
+              name="zipcode"
+              required
             />
-          )}
+            <Select
+              {...methods.register('course', { required: true })}
+              placeholder="Selecione"
+              name="course"
+              id="course"
+              color={theme.palette.design.white}
+            >
+              {Object.entries(CourseNameByKey).map(([key, value]) => (
+                <option key={key} value={value}>
+                  {value}
+                </option>
+              ))}
+            </Select>
+          </>
+          <Input
+            placeholder="E-mail"
+            type="text"
+            id="email"
+            name="email"
+            validation={{
+              required: 'E-mail é obrigatório',
+              pattern: {
+                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                message: 'Insira um e-mail válido',
+              },
+            }}
+          />
           <S.FileInput
             type="file"
             max-file-size="1024"
@@ -186,16 +188,6 @@ export const IdCardForm = (props: { team?: boolean }) => {
               <FileIcon />
             </S.ContainerInputFileContent>
           </S.FileInputLabel>
-          <Box margin="0 auto">
-            {imagePreview && (
-              <S.ImagePreview
-                layout="fixed"
-                src={imagePreview}
-                alt="Preview"
-                objectFit="contain"
-              />
-            )}
-          </Box>
           <Button
             type="submit"
             color={theme.palette.design.white}

diff --git a/src/pages/id-card/[email].tsx b/src/pages/id-card/[email].tsx
@@ -1,50 +1,58 @@
 import { Box, useToast } from '@chakra-ui/react';
+import { getCookie } from 'cookies-next';
 import { GetServerSideProps } from 'next';
 import { NextSeo } from 'next-seo';
+import { useEffect } from 'react';
 import { Layout } from '../../components';
 import {
   IdCard as IdCardComponent,
   IdCardProps,
 } from '../../components/IdCard';
 import { NotFoundIdCard } from '../../components/NotFoundIdCard';
 import { cleanZipcode, getAddressByCep, http } from '../../services';
-import { SubscriptionData } from '../../types/Subscription';
 
-export const getServerSideProps: GetServerSideProps = async ({ query }) => {
-  const subscribers = await new Promise<SubscriptionData[]>((resolve) => {
-    http<Array<SubscriptionData>>(
-      `${process.env.NEXT_PUBLIC_ADMIN_URL}/platform/subscribe`,
-    ).then((data) => resolve(data.parsedBody as SubscriptionData[]));
+export const getServerSideProps: GetServerSideProps = async ({
+  query,
+  req,
+  res,
+}) => {
+  const subscribers = await new Promise<string[]>((resolve) => {
+    http<string[]>(`${process.env.NEXT_PUBLIC_GET_EMAILS}`).then((data) =>
+      resolve(data.parsedBody as string[]),
+    );
   });
 
   const userEmail = query.email as string;
 
   const subscribe = subscribers.find(
-    ({ data: { email } }) => email?.toLowerCase() === userEmail.toLowerCase(),
+    (subscribeEmail) =>
+      subscribeEmail?.toLowerCase() === userEmail.toLowerCase(),
   );
 
-  if (!subscribe || !subscribe.data.approved) {
+  if (!subscribe) {
     return {
       props: {
         error: 'Subscriber not found',
       },
     };
   }
 
-  const address = subscribe?.data?.zipcode
-    ? await getAddressByCep(cleanZipcode(subscribe?.data?.zipcode))
-    : { localidade: subscribe?.data.city, uf: '' };
+  const nagatoCookie = getCookie('nagato', { req, res }) || '{}';
+  const { zipcode, course, name } = JSON.parse(nagatoCookie as string);
+  const { localidade = null, uf = null } = await getAddressByCep(
+    cleanZipcode(zipcode),
+  );
 
   const profile = {
-    name: query?.name || subscribe?.data?.fullName,
+    name: name,
     image: {
       src: 'https://res.cloudinary.com/elite-devs/images/logo',
-      alt: `imagem aluno(a) ${subscribe?.data.fullName}`,
+      alt: `imagem aluno(a) ${name}`,
     },
-    course: subscribe?.data?.course,
+    course: course,
     address: {
-      city: address.localidade,
-      state: address.uf,
+      city: localidade,
+      state: uf,
     },
   };
   return {
@@ -63,6 +71,21 @@ export default function MyIdCard({
 }) {
   const toast = useToast();
 
+  useEffect(() => {
+    if (!error) {
+      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,
+      });
+    }
+    // eslint-disable-next-line
+  }, []);
+
   if (error) {
     return (
       <Layout>
@@ -71,16 +94,6 @@ 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,
-  });
-
   return (
     <Layout>
       <NextSeo