feat: dashboard add/edit/delete technologies

src/App.jsx

@@ -1,124 +1,33 @@
-import { useState } from "react";
-import { toast } from "react-toastify";
 import { RoutesComponent } from "./routes";
-import { api } from "./services/api";
 import "react-toastify/dist/ReactToastify.css";
-import { MessageToast } from "./styles/messageToast";
 import { StyledContainer } from "./styles/toastTheme";
-import { useNavigate } from "react-router-dom";
+import { AuthContext } from "./contexts/AuthContext";
+import { useContext } from "react";
 
 export const App = () => {
-  const localStorageToken = localStorage.getItem("@TOKEN");
-  const localStorageUserId = localStorage.getItem("@USERID");
-  const [user, setUser] = useState(null);
-  const navigate = useNavigate();
-
-  const userLogin = async (data, setLoading) => {
-    try {
-      setLoading(true);
-      const request = await toast.promise(api.post("sessions", data), {
-        pending: {
-          render() {
-            return <MessageToast message="Carregando..." />;
-          },
-          icon: true,
-          theme: "dark",
-        },
-        success: {
-          render({ data }) {
-            return (
-              <MessageToast message={`Bem-vindo ${data.data.user.name}`} />
-            );
-          },
-          icon: true,
-          theme: "dark",
-        },
-        error: {
-          render({ data }) {
-            return <MessageToast message={data.response.data.message} />;
-          },
-          icon: true,
-          theme: "dark",
-        },
-      });
-      if (request.statusText === "OK") {
-        console.log(request.data);
-        setUser(request.data);
-        localStorage.setItem("@TOKEN", request.data.token);
-        localStorage.setItem("@USERID", request.data.user.id);
-        navigate("user");
-        return request.data;
-      }
-    } catch (error) {
-      console.log(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const userLogout = () => {
-    localStorage.clear();
-    setUser(null);
-    navigate("");
-  };
-
-  const userRegister = async (data, setLoading) => {
-    try {
-      setLoading(true);
-      const request = await toast.promise(api.post("users", data), {
-        pending: {
-          render() {
-            return <MessageToast message="Carregando..." />;
-          },
-          icon: true,
-          theme: "dark",
-        },
-        success: {
-          render() {
-            return <MessageToast message="Conta criada com sucesso!" />;
-          },
-          icon: true,
-          theme: "dark",
-        },
-        error: {
-          render({ data }) {
-            return <MessageToast message={data.response.data.message} />;
-          },
-          icon: true,
-          theme: "dark",
-        },
-      });
-      navigate("");
-      return request.data;
-    } catch (error) {
-      console.log(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
+  const { globalLoading } = useContext(AuthContext);
   return (
-    <div className="App">
-      <RoutesComponent
-        navigate={navigate}
-        userLogin={userLogin}
-        user={user}
-        userLogout={userLogout}
-        userRegister={userRegister}
-      />
-      <StyledContainer
-        position="top-right"
-        autoClose={1000}
-        hideProgressBar={false}
-        newestOnTop={false}
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-        theme="dark"
-      />
-      <StyledContainer />
-    </div>
+    <>
+      {globalLoading ? (
+        <h1>Loading</h1>
+      ) : (
+        <>
+          <RoutesComponent />
+          <StyledContainer
+            position="top-right"
+            autoClose={1000}
+            hideProgressBar={false}
+            newestOnTop={false}
+            closeOnClick
+            rtl={false}
+            pauseOnFocusLoss
+            draggable
+            pauseOnHover
+            theme="dark"
+          />
+          <StyledContainer />
+        </>
+      )}
+    </>
   );
 };

src/components/Form/LoginForm/index.jsx

@@ -4,10 +4,12 @@ import { Input } from "../Input";
 import { ErrorParagraph, FormLoginStyled } from "./style";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { LoginSchema } from "./loginSchema";
-import { useState } from "react";
+import { useContext, useState } from "react";
+import { AuthContext } from "../../../contexts/AuthContext";
 
-export const LoginForm = ({ userLogin }) => {
+export const LoginForm = () => {
   const [loading, setLoading] = useState(false);
+  const { userLogin } = useContext(AuthContext);
 
   const {
     register,
@@ -27,7 +29,7 @@ export const LoginForm = ({ userLogin }) => {
         id="email"
         label="E-mail"
         type="email"
-        placeholder="Digite aqui seu email"
+        placeholder="Enter your e-mail"
         register={register("email")}
         disabled={loading}
       />
@@ -36,15 +38,15 @@ export const LoginForm = ({ userLogin }) => {
         id="password"
         label="Senha"
         type="password"
-        placeholder="Digite aqui sua senha"
+        placeholder="Enter your password"
         register={register("password")}
         disabled={loading}
       />
       {errors.password && (
         <ErrorParagraph>{errors.password.message}</ErrorParagraph>
       )}
       <ButtonStyled type="submit" buttonStyle disabled={loading}>
-        {loading ? "Entrando" : "Entrar"}
+        {loading ? "Logging in..." : "Log in"}
       </ButtonStyled>
     </FormLoginStyled>
   );

src/components/Form/LoginForm/loginSchema.jsx

@@ -1,6 +1,6 @@
 import * as yup from "yup";
 
 export const LoginSchema = yup.object().shape({
-  email: yup.string().required("Insira um email válido."),
-  password: yup.string().required("Insira uma senha válida."),
+  email: yup.string().required("Enter valid email"),
+  password: yup.string().required("Enter valid password"),
 });

src/components/Form/RegisterForm/Select/Option/index.jsx → src/components/Form/Option/index.jsx

@@ -1,5 +1,5 @@
 import { OptionStyled } from "./style";
 
-export const OptionSelectModule = ({ value, children }) => {
+export const OptionSelect = ({ value, children }) => {
   return <OptionStyled value={value}>{children}</OptionStyled>;
 };

src/components/Form/RegisterForm/index.jsx

@@ -1,20 +1,30 @@
 import { yupResolver } from "@hookform/resolvers/yup";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { useForm } from "react-hook-form";
+import { AuthContext } from "../../../contexts/AuthContext";
 import { ButtonStyled } from "../../../styles/button";
 import { Input } from "../Input";
+import { OptionSelect } from "../Option";
+import { Select } from "../Select";
 import { RegisterSchema } from "./registerSchema";
-import { SelectCourseModule } from "./Select";
 import { ErrorParagraph, FormRegisterStyled } from "./style";
-export const RegisterForm = ({ userRegister }) => {
+export const RegisterForm = () => {
   const [loading, setLoading] = useState(false);
+  const { userRegister } = useContext(AuthContext);
   const {
     register,
     handleSubmit,
     formState: { isValid, errors },
   } = useForm({
     mode: "onBlur",
     resolver: yupResolver(RegisterSchema),
+    defaultValues: {
+      name: "",
+      email: "",
+      password: "",
+      bio: "",
+      contact: "",
+    },
   });
 
   const submit = (data) => {
@@ -24,9 +34,9 @@ export const RegisterForm = ({ userRegister }) => {
     <FormRegisterStyled onSubmit={handleSubmit(submit)} noValidate>
       <Input
         id="name"
-        label="Nome"
+        label="Name"
         type="text"
-        placeholder="Digite aqui seu nome"
+        placeholder="Enter your name"
         register={register("name")}
         disabled={loading}
       />
@@ -35,16 +45,16 @@ export const RegisterForm = ({ userRegister }) => {
         id="email"
         label="E-mail"
         type="email"
-        placeholder="Digite aqui seu email"
+        placeholder="Enter your e-mail"
         register={register("email")}
         disabled={loading}
       />
       {errors.email && <ErrorParagraph>{errors.email.message}</ErrorParagraph>}
       <Input
         id="password"
-        label="Senha"
+        label="Password"
         type="password"
-        placeholder="Digite aqui sua senha"
+        placeholder="Enter your password"
         register={register("password")}
         disabled={loading}
       />
@@ -53,9 +63,9 @@ export const RegisterForm = ({ userRegister }) => {
       )}
       <Input
         id="passwordConfirmation"
-        label="Confirmar senha"
+        label="Confirm password"
         type="password"
-        placeholder="Digite novamente sua senha"
+        placeholder="Enter your password again"
         register={register("passwordConfirmation")}
         disabled={loading}
       />
@@ -66,28 +76,41 @@ export const RegisterForm = ({ userRegister }) => {
         id="bio"
         label="Bio"
         type="text"
-        placeholder="Fale sobre você"
+        placeholder="Talk about you"
         register={register("bio")}
         disabled={loading}
       />
       {errors.bio && <ErrorParagraph>{errors.bio.message}</ErrorParagraph>}
       <Input
         id="contact"
-        label="Contato"
+        label="Contact"
         type="text"
-        placeholder="Opção de contato"
+        placeholder="Contact option"
         register={register("contact")}
         disabled={loading}
       />
       {errors.contact && (
         <ErrorParagraph>{errors.contact.message}</ErrorParagraph>
       )}
-      <SelectCourseModule
+      <Select
         id="course_module"
-        label="Selecionar módulo"
+        label="Select module"
         register={register("course_module")}
         disabled={loading}
-      />
+      >
+        <OptionSelect value="First module (Basic Frontend)">
+          First module (Basic Frontend)
+        </OptionSelect>
+        <OptionSelect value="Second module (Frontend Advanced)">
+          Second module (Frontend Advanced)
+        </OptionSelect>
+        <OptionSelect value="Third module (Basic Backend)">
+          Third module (Basic Backend)
+        </OptionSelect>
+        <OptionSelect value="Fourth module (Backend Advanced)">
+          Fourth module (Backend Advanced)
+        </OptionSelect>
+      </Select>
       {errors.course_module && (
         <ErrorParagraph>{errors.course_module.message}</ErrorParagraph>
       )}
@@ -97,10 +120,10 @@ export const RegisterForm = ({ userRegister }) => {
           buttonStyle="disabledButton"
           disabled={!isValid}
         >
-          Cadastrar
+          Sign up
         </ButtonStyled>
       ) : (
-        <ButtonStyled type="submit">Cadastrar</ButtonStyled>
+        <ButtonStyled type="submit">Sign up</ButtonStyled>
       )}
     </FormRegisterStyled>
   );