From 44315ba68bdd81eaf18a11e5aa485cc434e58d8c Mon Sep 17 00:00:00 2001 From: loweffort-alt Date: Sun, 3 Mar 2024 15:23:13 -0500 Subject: [PATCH] Refactor: Client has been separated on other repository --- client/.eslintrc.cjs | 21 ------ client/README.md | 8 -- client/index.html | 13 ---- client/package.json | 34 --------- client/postcss.config.js | 6 -- client/public/vite.svg | 1 - client/src/App.jsx | 41 ----------- client/src/api/auth.js | 20 ----- client/src/api/axios.js | 8 -- client/src/api/tasks.js | 12 --- client/src/assets/react.svg | 1 - client/src/components/Navbar.jsx | 56 -------------- client/src/components/TaskCard.jsx | 44 ----------- client/src/context/AuthContext.jsx | 113 ----------------------------- client/src/context/TaskContext.jsx | 85 ---------------------- client/src/index.css | 8 -- client/src/main.jsx | 10 --- client/src/pages/AllTaskPage.jsx | 23 ------ client/src/pages/HomePage.jsx | 5 -- client/src/pages/LoginPage.jsx | 72 ------------------ client/src/pages/ProfilePage.jsx | 5 -- client/src/pages/RegisterPage.jsx | 80 -------------------- client/src/pages/TaskFormPage.jsx | 85 ---------------------- client/src/protectedRoute.jsx | 12 --- client/tailwind.config.js | 8 -- client/vite.config.js | 8 -- 26 files changed, 779 deletions(-) delete mode 100644 client/.eslintrc.cjs delete mode 100644 client/README.md delete mode 100644 client/index.html delete mode 100644 client/package.json delete mode 100644 client/postcss.config.js delete mode 100644 client/public/vite.svg delete mode 100644 client/src/App.jsx delete mode 100644 client/src/api/auth.js delete mode 100644 client/src/api/axios.js delete mode 100644 client/src/api/tasks.js delete mode 100644 client/src/assets/react.svg delete mode 100644 client/src/components/Navbar.jsx delete mode 100644 client/src/components/TaskCard.jsx delete mode 100644 client/src/context/AuthContext.jsx delete mode 100644 client/src/context/TaskContext.jsx delete mode 100644 client/src/index.css delete mode 100644 client/src/main.jsx delete mode 100644 client/src/pages/AllTaskPage.jsx delete mode 100644 client/src/pages/HomePage.jsx delete mode 100644 client/src/pages/LoginPage.jsx delete mode 100644 client/src/pages/ProfilePage.jsx delete mode 100644 client/src/pages/RegisterPage.jsx delete mode 100644 client/src/pages/TaskFormPage.jsx delete mode 100644 client/src/protectedRoute.jsx delete mode 100644 client/tailwind.config.js delete mode 100644 client/vite.config.js diff --git a/client/.eslintrc.cjs b/client/.eslintrc.cjs deleted file mode 100644 index bb4f312..0000000 --- a/client/.eslintrc.cjs +++ /dev/null @@ -1,21 +0,0 @@ -module.exports = { - root: true, - env: { browser: true, es2020: true }, - extends: [ - "eslint:recommended", - "plugin:react/recommended", - "plugin:react/jsx-runtime", - "plugin:react-hooks/recommended", - ], - ignorePatterns: ["dist", ".eslintrc.cjs"], - parserOptions: { ecmaVersion: "latest", sourceType: "module" }, - settings: { react: { version: "18.2" } }, - plugins: ["react-refresh"], - rules: { - "react-refresh/only-export-components": [ - "warn", - { allowConstantExport: true }, - ], - "react/prop-types": "off", - }, -}; diff --git a/client/README.md b/client/README.md deleted file mode 100644 index f768e33..0000000 --- a/client/README.md +++ /dev/null @@ -1,8 +0,0 @@ -# React + Vite - -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. - -Currently, two official plugins are available: - -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh diff --git a/client/index.html b/client/index.html deleted file mode 100644 index 0c589ec..0000000 --- a/client/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite + React - - -
- - - diff --git a/client/package.json b/client/package.json deleted file mode 100644 index e002a20..0000000 --- a/client/package.json +++ /dev/null @@ -1,34 +0,0 @@ -{ - "name": "client", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "vite build", - "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", - "preview": "vite preview" - }, - "dependencies": { - "axios": "^1.4.0", - "dayjs": "^1.11.9", - "js-cookie": "^3.0.5", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-hook-form": "^7.45.2", - "react-router-dom": "^6.14.2" - }, - "devDependencies": { - "@types/react": "^18.2.15", - "@types/react-dom": "^18.2.7", - "@vitejs/plugin-react-swc": "^3.3.2", - "autoprefixer": "^10.4.14", - "eslint": "^8.45.0", - "eslint-plugin-react": "^7.32.2", - "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-react-refresh": "^0.4.3", - "postcss": "^8.4.27", - "tailwindcss": "^3.3.3", - "vite": "^4.4.5" - } -} diff --git a/client/postcss.config.js b/client/postcss.config.js deleted file mode 100644 index 2e7af2b..0000000 --- a/client/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -} diff --git a/client/public/vite.svg b/client/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/client/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/client/src/App.jsx b/client/src/App.jsx deleted file mode 100644 index b136196..0000000 --- a/client/src/App.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import { BrowserRouter, Routes, Route } from "react-router-dom"; -import { AuthProvider } from "./context/AuthContext.jsx"; - -import LoginPage from "./pages/LoginPage"; -import RegisterPage from "./pages/RegisterPage"; -import HomePage from "./pages/HomePage"; -import AllTasks from "./pages/AllTaskPage"; -import Profile from "./pages/ProfilePage"; -import TaskFormPage from "./pages/TaskFormPage.jsx"; -import ProtectedRoute from "./protectedRoute.jsx"; -import { TaskProvider } from "./context/TaskContext.jsx"; -import Navbar from "./components/Navbar.jsx"; - -function App() { - return ( - - - -
- - - {/*Public Paths*/} - } /> - } /> - } /> - {/*Only Users Loged*/} - }> - } /> - } /> - } /> - } /> - - -
- - - - ); -} - -export default App; diff --git a/client/src/api/auth.js b/client/src/api/auth.js deleted file mode 100644 index 0a39b83..0000000 --- a/client/src/api/auth.js +++ /dev/null @@ -1,20 +0,0 @@ -import instance from "./axios.js"; - -export const registerRequest = (user) => instance.post(`/register`, user); - -export const loginRequest = (user) => instance.post(`/login`, user); - -export const logoutRequest = () => instance.post(`/logout`); - -export const verifyTokenRequest = () => instance.get(`/verify`); - -export const fetchRegisterRequest = (user) => - fetch(`http://localhost:4000/api/register`, { - method: "POST", - headers: { - "Content-type": "application/json", - }, - body: JSON.stringify(user), - }) - .then((res) => console.log(res)) - .catch((error) => console.log(error)); diff --git a/client/src/api/axios.js b/client/src/api/axios.js deleted file mode 100644 index 156d08f..0000000 --- a/client/src/api/axios.js +++ /dev/null @@ -1,8 +0,0 @@ -import axios from "axios"; - -const instance = axios.create({ - baseURL: "http://localhost:3000/api", - withCredentials: true, -}); - -export default instance; diff --git a/client/src/api/tasks.js b/client/src/api/tasks.js deleted file mode 100644 index 561ae67..0000000 --- a/client/src/api/tasks.js +++ /dev/null @@ -1,12 +0,0 @@ -import instance from "./axios.js"; - -export const getTasksRequest = () => instance.get(`/tasks`); - -export const createTaskRequest = (task) => instance.post(`/tasks`, task); - -export const updateTaskRequest = (id, newTask) => - instance.put(`/tasks/${id}`, newTask); - -export const deleteTaskRequest = (id) => instance.delete(`/tasks/${id}`); - -export const getSingleTaskRequest = (id) => instance.get(`/tasks/${id}`); diff --git a/client/src/assets/react.svg b/client/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/client/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx deleted file mode 100644 index c57644f..0000000 --- a/client/src/components/Navbar.jsx +++ /dev/null @@ -1,56 +0,0 @@ -import { Link } from "react-router-dom"; -import { useAuth } from "../context/AuthContext"; - -function Navbar() { - const { isAuthenticated, logout, user } = useAuth(); - - return ( - - ); -} - -export default Navbar; diff --git a/client/src/components/TaskCard.jsx b/client/src/components/TaskCard.jsx deleted file mode 100644 index bbe4d91..0000000 --- a/client/src/components/TaskCard.jsx +++ /dev/null @@ -1,44 +0,0 @@ -import { useNavigate } from "react-router-dom"; -import { useTask } from "../context/TaskContext"; - -import days from "dayjs"; -import utc from "dayjs/plugin/utc"; -days.extend(utc); - -const TaskCard = ({ task }) => { - const { deleteTask } = useTask(); - const navigate = useNavigate(); - - return ( -
-
-

{task.title}

-
- - -
-
-

{task.description}

-
-

- {days(task.date).utc().format("DD/MM/YYYY")} -

-

- {days(task.date).utc().local().format("HH:mm")} -

-
-
- ); -}; - -export default TaskCard; diff --git a/client/src/context/AuthContext.jsx b/client/src/context/AuthContext.jsx deleted file mode 100644 index 7de2d57..0000000 --- a/client/src/context/AuthContext.jsx +++ /dev/null @@ -1,113 +0,0 @@ -import { createContext, useState, useContext, useEffect } from "react"; -import { - registerRequest, - loginRequest, - logoutRequest, - verifyTokenRequest, -} from "../api/auth.js"; -import Cookies from "js-cookie"; - -export const AuthContext = createContext(); - -export const useAuth = () => { - const context = useContext(AuthContext); - if (!context) { - throw new Error("useAuth must be used within an AuthProvider"); - } - return context; -}; - -export const AuthProvider = ({ children }) => { - const [user, setUser] = useState(null); - const [isAuthenticated, setIsAuthenticated] = useState(false); - const [errors, setErrors] = useState([]); - const [loading, setLoading] = useState(true); - - const signUp = async (user) => { - try { - const res = await registerRequest(user); - console.log(res.data); - setUser(res.data); - setIsAuthenticated(true); - } catch (error) { - console.log(error.response); - setErrors(error.response.data); - } - }; - - const signIn = async (user) => { - try { - const res = await loginRequest(user); - //console.log(res); - setUser(res.data); - setIsAuthenticated(true); - } catch (error) { - setErrors(error.response.data); - } - }; - - const logout = async () => { - try { - const res = await logoutRequest(); - setIsAuthenticated(false); - setUser(null); - } catch (error) { - console.log(error.message); - } - }; - - useEffect(() => { - if (errors.length > 0) { - const timer = setTimeout(() => { - setErrors([]); - }, 3000); - return () => clearTimeout(timer); - } - }, [errors]); - - useEffect(() => { - const cookies = Cookies.get(); - async function checkLogin() { - if (!cookies.token) { - setIsAuthenticated(false); - setLoading(false); - return setUser(null); - } - - try { - const res = await verifyTokenRequest(); - - if (!res.data) { - setIsAuthenticated(false); - setLoading(false); - return; - } - - setIsAuthenticated(true); - setUser(res.data); - setLoading(false); - } catch (error) { - setIsAuthenticated(false); - setUser(null); - setLoading(false); - } - } - checkLogin(); - }, []); - - return ( - - {children} - - ); -}; diff --git a/client/src/context/TaskContext.jsx b/client/src/context/TaskContext.jsx deleted file mode 100644 index 4e1aac2..0000000 --- a/client/src/context/TaskContext.jsx +++ /dev/null @@ -1,85 +0,0 @@ -import { createContext, useContext, useState } from "react"; -import { - createTaskRequest, - deleteTaskRequest, - getSingleTaskRequest, - getTasksRequest, - updateTaskRequest, -} from "../api/tasks"; - -const TaskContext = createContext(); - -export const useTask = () => { - const context = useContext(TaskContext); - - if (!context) { - throw new Error("useTask must be used within a TaskProvider"); - } - - return context; -}; - -export function TaskProvider({ children }) { - const [tasks, setTasks] = useState([]); - - const getTasks = async () => { - try { - const res = await getTasksRequest(); - setTasks(res.data); - } catch (error) { - console.error(error); - } - }; - - const getSingleTask = async (id) => { - try { - const res = await getSingleTaskRequest(id); - return res.data; - } catch (error) { - console.error(error); - } - }; - - const createTask = async (task) => { - try { - await createTaskRequest(task); - const res = await getTasksRequest(); - setTasks(res.data); - } catch (error) { - console.error(error); - } - }; - - const deleteTask = async (id) => { - try { - await deleteTaskRequest(id); - const res = await getTasksRequest(); - setTasks(res.data); - } catch (error) { - console.error(error); - } - }; - - const editTask = async (id, newTask) => { - try { - await updateTaskRequest(id, newTask); - } catch (error) { - console.error(error); - } - }; - - return ( - - {children} - - ); -} diff --git a/client/src/index.css b/client/src/index.css deleted file mode 100644 index 6948d6d..0000000 --- a/client/src/index.css +++ /dev/null @@ -1,8 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -body { - background-color: #202020; - color: white; -} diff --git a/client/src/main.jsx b/client/src/main.jsx deleted file mode 100644 index 54b39dd..0000000 --- a/client/src/main.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.jsx' -import './index.css' - -ReactDOM.createRoot(document.getElementById('root')).render( - - - , -) diff --git a/client/src/pages/AllTaskPage.jsx b/client/src/pages/AllTaskPage.jsx deleted file mode 100644 index 00ecfca..0000000 --- a/client/src/pages/AllTaskPage.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import { useTask } from "../context/TaskContext"; -import { useEffect } from "react"; -import TaskCard from "../components/TaskCard"; - -const TaskFormPage = () => { - const { getTasks, tasks } = useTask(); - - useEffect(() => { - getTasks(); - }, []); - - if (tasks.length === 0) return

No Tasks

; - - return ( -
- {tasks.map((e) => ( - - ))} -
- ); -}; - -export default TaskFormPage; diff --git a/client/src/pages/HomePage.jsx b/client/src/pages/HomePage.jsx deleted file mode 100644 index fba5db5..0000000 --- a/client/src/pages/HomePage.jsx +++ /dev/null @@ -1,5 +0,0 @@ -const HomePage = () => { - return

Hola Amiguitos

; -}; - -export default HomePage; diff --git a/client/src/pages/LoginPage.jsx b/client/src/pages/LoginPage.jsx deleted file mode 100644 index 3078e0e..0000000 --- a/client/src/pages/LoginPage.jsx +++ /dev/null @@ -1,72 +0,0 @@ -import { useForm } from "react-hook-form"; -import { useAuth } from "../context/AuthContext"; -import { useNavigate, Link } from "react-router-dom"; -import { useEffect } from "react"; - -function LoginPage() { - const { - register, - handleSubmit, - formState: { errors }, - } = useForm(); - - const { signIn, isAuthenticated, errors: loginErrors } = useAuth(); - - const navigate = useNavigate(); - - const onSubmit = handleSubmit((data) => { - signIn(data); - }); - - useEffect(() => { - if (isAuthenticated) navigate("/tasks"); - }, [isAuthenticated]); - - return ( -
-
- {loginErrors.map((e, i) => ( -
- {e} -
- ))} -

Login

-
-
- - {errors.email && ( -

{errors.email.type}

- )} - - {errors.password && ( -

Password is required

- )} - -
-
-

Dont have an account?

- - Sign up - -
-
- ); -} - -export default LoginPage; diff --git a/client/src/pages/ProfilePage.jsx b/client/src/pages/ProfilePage.jsx deleted file mode 100644 index 92f145a..0000000 --- a/client/src/pages/ProfilePage.jsx +++ /dev/null @@ -1,5 +0,0 @@ -const Profile = () => { - return

Hola Amiguitos

; -}; - -export default Profile; diff --git a/client/src/pages/RegisterPage.jsx b/client/src/pages/RegisterPage.jsx deleted file mode 100644 index 3e06ca6..0000000 --- a/client/src/pages/RegisterPage.jsx +++ /dev/null @@ -1,80 +0,0 @@ -import { useForm } from "react-hook-form"; -import { useAuth } from "../context/AuthContext.jsx"; -import { useEffect } from "react"; -import { useNavigate, Link } from "react-router-dom"; - -function RegisterPage() { - const { - register, - handleSubmit, - formState: { errors }, - } = useForm(); - const { signUp, isAuthenticated, errors: registerErrors } = useAuth(); - const navigate = useNavigate(); - - const onSubmit = handleSubmit((values) => { - console.log(isAuthenticated); - signUp(values); - }); - - useEffect(() => { - if (isAuthenticated) navigate("/tasks"); - }, [isAuthenticated]); - - return ( -
-
-

- Create a new account! -

-
-
- {registerErrors.map((e, i) => ( -
- {e} -
- ))} - - {errors.username && ( -

Username is required

- )} - - {errors.email &&

Email is required

} - - {errors.password && ( -

Password is required

- )} - -
-
-

Already have an account?

- - Log in - -
-
- ); -} - -export default RegisterPage; diff --git a/client/src/pages/TaskFormPage.jsx b/client/src/pages/TaskFormPage.jsx deleted file mode 100644 index 26a410f..0000000 --- a/client/src/pages/TaskFormPage.jsx +++ /dev/null @@ -1,85 +0,0 @@ -import { useForm } from "react-hook-form"; -import { useTask } from "../context/TaskContext"; -import { useNavigate, useParams } from "react-router-dom"; -import { useEffect } from "react"; - -// Formateo date a uno válido por mi backend -import dayjs from "dayjs"; -import utc from "dayjs/plugin/utc"; -dayjs.extend(utc); - -const TaskFormPage = () => { - const { register, handleSubmit, setValue } = useForm(); - const { createTask, getTasks, getSingleTask, editTask } = useTask(); - - const navigate = useNavigate(); - const params = useParams(); - - useEffect(() => { - async function loadTask() { - if (params.id) { - const res = await getSingleTask(params.id); - setValue("title", res.title); - setValue("description", res.description); - setValue("date", dayjs(res.date).utc().format("YYYY-MM-DD")); - } - } - - loadTask(); - }, []); - - const onSubmit = handleSubmit((data) => { - const dataValid = { - ...data, - date: data.date ? dayjs.utc(data.date).format() : dayjs.utc().format(), - }; - if (params.id) { - editTask(params.id, dataValid); - } else { - createTask(dataValid); - } - getTasks(); - navigate("/tasks"); - }); - - return ( -
-
-

Create new task

-
onSubmit()}> -
- - - - - - - -
-
-
-
- ); -}; - -export default TaskFormPage; diff --git a/client/src/protectedRoute.jsx b/client/src/protectedRoute.jsx deleted file mode 100644 index 34896c1..0000000 --- a/client/src/protectedRoute.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import { useAuth } from "./context/AuthContext"; -import { Navigate, Outlet } from "react-router-dom"; - -const ProtectedRoute = () => { - const { isAuthenticated, loading } = useAuth(); - - if (loading) return

Loading

; - if (!loading && !isAuthenticated) return ; - return ; -}; - -export default ProtectedRoute; diff --git a/client/tailwind.config.js b/client/tailwind.config.js deleted file mode 100644 index 614c86b..0000000 --- a/client/tailwind.config.js +++ /dev/null @@ -1,8 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -export default { - content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], - theme: { - extend: {}, - }, - plugins: [], -}; diff --git a/client/vite.config.js b/client/vite.config.js deleted file mode 100644 index f8f92fb..0000000 --- a/client/vite.config.js +++ /dev/null @@ -1,8 +0,0 @@ -import { defineConfig } from "vite"; -import react from "@vitejs/plugin-react-swc"; - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [react()], - base: "/crud-auth/client/", -});