Merge pull request #37 from Code-the-Dream-School/TokenUserInfo

Token user info

data.js

@@ -138,15 +138,21 @@ const drugFormData = [
         name: '',
         generic: '',
         class: [
-            'Analgesics',
-            'Antibiotics',
-            'Antidepressants',
-            'Antipsychotics',
-            'Antihypertensives',
-            'Anticoagulants',
-            'Bronchodilators',
-            'Diruretics',
-            'Antivirals',
+            'ACEI',
+            'Alpha Blockers',
+            'Analgesic',
+            'Angiotensin II',
+            'Antipyretic',
+            'CCBs',
+            'COX-2 Inhibitors',
+            'Histamine-2 Receptor Blockers',
+            'HMG CoA RIs',
+            'LHRH',
+            'NSAID',
+            'Prokinetic Agents',
+            'PPIs',
+            'SSRIs',
+            'Other',
         ],
         quantity: '',
         expiration: '',

package.json

@@ -24,6 +24,7 @@
         "react-dom": "^18.2.0",
         "react-icons": "^5.4.0",
         "react-router-dom": "^6.28.0",
+        "react-toastify": "^9.1.2",
         "styled-components": "^6.1.13"
     },
     "devDependencies": {

src/App.jsx

@@ -22,7 +22,8 @@ import {
 } from './pages';
 
 import { action as registerAction } from './pages/Register';
-
+import { action as loginAction } from './pages/Login';
+import { loader as dashboardLoader } from './pages/Dashboard';
 const router = createBrowserRouter([
     {
         path: '/',
@@ -41,10 +42,12 @@ const router = createBrowserRouter([
             {
                 path: 'login',
                 element: <Login />,
+                action: loginAction,
             },
             {
                 path: 'dashboard',
                 element: <Dashboard />,
+                loader: dashboardLoader,
                 children: [
                     {
                         index: 'true',

src/main.jsx

@@ -2,12 +2,15 @@ import React from 'react';
 import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
 import ReactDOM from 'react-dom/client';
 import App from './App.jsx';
+import 'react-toastify/dist/ReactToastify.css';
 import './index.css';
+import { ToastContainer } from 'react-toastify';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
     <React.StrictMode>
         <ChakraProvider value={defaultSystem}>
             <App />
+            <ToastContainer position="top-center" />
         </ChakraProvider>
     </React.StrictMode>
 );

src/pages/Dashboard.jsx

@@ -1,11 +1,38 @@
 import { useState, createContext, useContext } from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLoaderData } from 'react-router-dom';
 import styled from 'styled-components';
 import { BigSidebar, Navbar, SmallSidebar } from '../components';
+import customFetch from '../util/customFetch';
+
+export const loader = async () => {
+    try {
+        // Retrieve the token from localStorage
+        const token = localStorage.getItem('token');
+        const userId = localStorage.getItem('userId');
+
+        // Make a GET request to the endpoint
+        const response = await customFetch.get(`/users/${userId}`, {
+            headers: {
+                Authorization: `Bearer ${token}`, // Add the token to the Authorization header
+            },
+        });
+
+        // Handle the response
+        console.log('User Details:', response.data);
+        return response.data; // Return the user details
+    } catch (error) {
+        // Handle errors
+        console.error('Error fetching user details:', error?.response?.data || error.message);
+        throw error; // Re-throw the error for further handling if necessary
+    }
+};
 
 const DashboardContext = createContext();
 
 const Dashboard = () => {
+    const data = useLoaderData();
+    console.log(data);
+
     const user = { name: 'john' };
     const [showSidebar, setShowSidebar] = useState(false);
 

src/pages/Landing.jsx

@@ -27,7 +27,7 @@ const Landing = () => {
                     <Link to="/register" className="btn register-link">
                         Register
                     </Link>
-                    <Link to="/register" className="btn register-link">
+                    <Link to="/login" className="btn register-link">
                         Login
                     </Link>
                 </div>
@@ -47,6 +47,7 @@ const Wrapper = styled.section`
         height: 8rem;
         display: flex;
         align-items: center;
+        margin-bottom: 3rem;
     }
     .mylogo {
         object-fit: cover;

src/pages/Login.jsx

@@ -1,37 +1,83 @@
-import { Link } from 'react-router-dom';
+import { Link, Form, redirect, useNavigation, useActionData } from 'react-router-dom';
 import styled from 'styled-components';
 import { FormRow, Logo } from '../components';
+import { toast } from 'react-toastify';
+import customFetch from '../util/customFetch';
+
+// export const action = async ({ request }) => {
+//     const formData = await request.formData();
+//     const data = Object.fromEntries(formData);
+//     const errors = { msg: '' };
+//     if (data.password.length < 3) {
+//         errors.msg = 'Password too short';
+//         return errors;
+//     }
+//     try {
+//         await customFetch.post('/auth/login', data);
+//         toast.success('Login Successful');
+//         return redirect('/dashboard');
+//     } catch (error) {
+//         toast.error(error?.response?.data?.msg);
+//     }
+//     return null;
+// };
+
+export const action = async ({ request }) => {
+    const formData = await request.formData();
+    const data = Object.fromEntries(formData);
+
+    const errors = { msg: '' };
+
+    if (data.password.length < 3) {
+        errors.msg = 'Password too short';
+        return errors;
+    }
+
+    try {
+        const response = await customFetch.post('/auth/login', data);
+        const { token, user } = response.data;
+        //SET THEM IN LOCAL STORAGE
+        localStorage.setItem('token', token);
+        localStorage.setItem('userId', user.id);
+        toast.success('Login Successful');
+        return redirect('/dashboard');
+    } catch (error) {
+        // Handle errors
+        toast.error(error?.response?.data?.msg || 'Something went wrong');
+    }
+
+    return null;
+};
 
 const Login = () => {
+    const errors = useActionData();
+    const navigation = useNavigation();
+    const isSubmitting = navigation.state === 'submitting';
+
     return (
         <Wrapper>
-            <form className="form">
+            <Form method="post" className="form">
                 <Logo />
                 <h4>Login</h4>
-                <FormRow
-                    type="email"
-                    name="email"
-                    labelText="email"
-                    defaultValue="[email protected]"
-                    placeholder="EMAIL"
-                />
+                {errors?.msg && <p style={{ color: 'red' }}>{errors.msg}</p>}
+
+                <FormRow type="email" name="email" labelText="email" placeholder="EMAIL" />
                 <FormRow
                     type="password"
                     name="password"
                     labelText="password"
-                    defaultValue="CodeTheDreamPassword"
-                    placeholder="PASSWORD"
+                    placeholder="password"
                 />
-                <button type="submit" className="btn btn-block">
-                    Submit
+                <button type="submit" className="btn btn-block" disabled={isSubmitting}>
+                    {isSubmitting ? 'submitting...' : 'submit'}
                 </button>
                 <p>
                     Not Registered Yet?
                     <Link to="/register" className="member-btn">
                         Register!
                     </Link>
                 </p>
-            </form>
+            </Form>
         </Wrapper>
     );
 };
@@ -56,7 +102,6 @@ const Wrapper = styled.section`
     }
     .form-input {
         background-color: var(--grey-50);
-        text-transform: uppercase;
     }
     h4 {
         text-align: center;

src/pages/Register.jsx

@@ -1,7 +1,8 @@
-import { Form, redirect, Link } from 'react-router-dom';
+import { Form, redirect, useNavigation, Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { FormRow, Logo } from '../components';
 import customFetch from '../util/customFetch';
+import { toast } from 'react-toastify';
 
 //formData - is an api, gives back an array of arrays, must have name same as database
 export const action = async ({ request }) => {
@@ -10,14 +11,18 @@ export const action = async ({ request }) => {
     const data = Object.fromEntries(formData);
     try {
         await customFetch.post('/auth/signup', data);
+        toast.success('Registration Successful');
         return redirect('/login');
     } catch (error) {
-        console.log(error);
+        toast.error(error?.response?.data?.msg);
         return error;
     }
 };
 
 const Register = () => {
+    const navigation = useNavigation();
+    console.log(navigation);
+    const isSubmitting = navigation.state === 'submitting';
     return (
         <Wrapper>
             <Form method="post" className="form">
@@ -31,18 +36,17 @@ const Register = () => {
                     defaultValue="DefaultLastName"
                     placeholder="LAST NAME"
                 /> */}
-                <FormRow type="text" name="store" labelText="store" placeholder="STORE" />
-                <FormRow type="text" name="role" labelText="role" placeholder="ROLE NAME" />
-                <FormRow type="email" name="email" labelText="email" placeholder="EMAIL" />
+                <FormRow type="text" name="store" labelText="store" placeholder="store name" />
+                <FormRow type="text" name="role" labelText="role" placeholder="name of role" />
+                <FormRow type="email" name="email" labelText="email" placeholder="email" />
                 <FormRow
                     type="password"
                     name="password"
                     labelText="password"
-                    defaultValue="CodeTheDreamPassword"
-                    placeholder="PASSWORD"
+                    placeholder="password"
                 />
-                <button type="submit" className="btn btn-block">
-                    Submit
+                <button type="submit" className="btn btn-block" disabled={isSubmitting}>
+                    {isSubmitting ? 'submitting...' : 'submit'}
                 </button>
                 <p>
                     Already Registered?
@@ -75,7 +79,6 @@ const Wrapper = styled.section`
     }
     .form-input {
         background-color: var(--grey-50);
-        text-transform: uppercase;
     }
     h4 {
         text-align: center;