implemented todolist

Author: Ahmad Khalid Butt

.DS_Store

@@ -1 +1 @@
-REACT_APP_API_URL = "http:localhost:3000"
+REACT_APP_API_URL = "http://localhost:3000/api"

client/.env

@@ -12,13 +12,15 @@
     "@types/react-dom": "^17.0.11",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^0.26.0",
+    "axios-hooks": "^3.0.1",
     "bootstrap": "^5.1.3",
     "email-validator": "^2.0.4",
     "formik": "^2.2.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
+    "react-toastify": "^8.2.0",
     "reactstrap": "^9.0.1",
     "typescript": "^4.5.5",
     "web-vitals": "^2.1.4",

client/package-lock.json

@@ -1,9 +1,24 @@
 import React, { Component } from 'react';
+import { ToastContainer } from 'react-toastify';
 import Router from './router';
 
 class App extends Component {
   render() {
-    return <Router/>
+    return <>
+      <Router />
+      <ToastContainer
+        position="top-right"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+      />
+      <ToastContainer />
+    </>
   }
 }
 

client/package.json

@@ -0,0 +1,33 @@
+import { CardHeader, Col, Container, Input, ListGroup, ListGroupItem, Row } from "reactstrap"
+
+interface ITodo {
+    todo: string,
+    status: boolean
+}
+
+interface ITodoListProps {
+    todos: ITodo[]
+}
+
+const TodoList = (props: ITodoListProps) => {
+    const todoList = props.todos.map((todo) => {
+        return <ListGroupItem color="info">
+            <Row>
+                <Col>
+                    <Input type='checkbox' />
+                </Col>
+                <Col>
+                    <div>{todo.todo}</div>
+                </Col>
+            </Row>
+        </ListGroupItem>
+    })
+    return <Container className="bg-light border">
+        <CardHeader>Card title</CardHeader>
+        <ListGroup>
+            {todoList}
+        </ListGroup>
+    </Container>
+}
+
+export default TodoList

client/src/App.tsx

@@ -4,6 +4,7 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import "bootstrap/dist/css/bootstrap.min.css";
+import 'react-toastify/dist/ReactToastify.css';
 
 ReactDOM.render(
   <React.StrictMode>

client/src/components/TodoList/todoList.component.tsx

@@ -0,0 +1,25 @@
+import useAxios from "axios-hooks";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { Spinner } from "reactstrap";
+import TodoList from "../../components/TodoList/todoList.component";
+
+
+const HomePage = () => {
+    const {REACT_APP_API_URL} = process.env;
+    const bearerToken = localStorage.getItem('bearerToken');
+    const navigate = useNavigate();
+    useEffect(() => {
+        if(!bearerToken){
+            navigate('/login');
+        }
+    })
+    const [{ data: todos, loading, error }] = useAxios({url: `${REACT_APP_API_URL}/todos`, method: 'GET', headers: {
+        Authorization: `bearer ${bearerToken}`
+    }});
+    if (loading) return <Spinner/>
+    if (error) return <p>Error!</p>
+    return <TodoList todos ={todos}/>
+}
+
+export default HomePage;

client/src/index.tsx

@@ -3,6 +3,8 @@ import { withFormik, Form, Field } from 'formik';
 import * as Yup from 'yup';
 import { Button, Col, Label, Row } from 'reactstrap';
 import axios from 'axios';
+import { NavigateFunction, useNavigate } from 'react-router-dom';
+import { toast, ToastContainer } from 'react-toastify';
 
 interface LoginProps {
     username?: string,
@@ -16,6 +18,8 @@ interface ElementProps {
     password?: string
 }
 
+let navigate: NavigateFunction;
+
 const LoginPage = (props: LoginProps) => {
     const loginPageStyle = {
         margin: "32px auto 37px",
@@ -26,9 +30,10 @@ const LoginPage = (props: LoginProps) => {
         boxShadow: "0px 0px 10px 10px rgba(0,0,0,0.15)"
     };
     const { touched, errors } = props;
-    console.log(process.env);
+    navigate = useNavigate();
     return (
         <React.Fragment>
+            <ToastContainer/>
             <div className="container">
                 <div className="login-wrapper" style={loginPageStyle}>
                     <h2>Login Page</h2>
@@ -76,8 +81,14 @@ const LoginFormik = withFormik({
     }),
     handleSubmit: (values) => {
         const {REACT_APP_API_URL} = process.env;
-        axios.post(`http://localhost:3000/api/login`,values)
-        .then(data => console.log)
+        axios.post(`${REACT_APP_API_URL}/user/login`,values)
+        .then(res => {
+            if(res?.data?.token){
+                localStorage.setItem('bearerToken', res.data.token);
+                toast("Logged in successfully");
+                navigate('/');
+            }
+        });
     }
 })(LoginPage);