Notes App for React

this is a notes app from Route Academy Playlist.

The main theme is available in a separate folder

Used Liberaries

    yarn add @fortawesome/fontawesome-free

Superhero bootstrap theme@v5.1.3
React Router Dom

    npm i react-router-dom@5.2.0

axios to new user data to back end

    npm i axios

added .env file.

Routing Steps:

import BrowserRouter in index.js file.

    <BrowserRouter>
            <App/>
    </BrowserRouter>

import Route, Switch & Redirect in App.jsx file.

        <NavBar />
        <Switch>
          <Redirect exact from="/" to="/home" />
          <Route path="/home" component={Home} />
          <Route path="/register" component={AddUser} />
          <Route path="/login" component={UserLogin} />
          <Route path="*"  component={NotFound}/>
        </Switch>

import NavLink in NavBar.jsx file. to be able to add the links

    <NavLink to="/home">Home</NavLink>

when adding a Route to component, it passes a props named 'history', we can use it to redirect to another component

    props.history.replace('/component')

Authentication

Created a custom hook to handle the form validaion.

the custom hook is using useReducer()

After the Form is being Validated - in a separate component- we pass the final data to the register/ login component to send them to the end point

Send Data Using axios

import axios

    import axios from 'axios';

using async & await function

    const userInfo = {
      first_name: enteredFname,
      last_name: enteredLname,
      email: enteredEmail,
      password: enteredPassword,
    };

    async function sendData () {
        let { data } = await axios.post(`${endPoint}/signup`, userInfo );
    }

Adding a protected route

Steps to Add Protected Roure:

Create a new component
In the App.jsx add the new component, then adjust the default route.

In the Component itself

import {Route} from 'react-router-dom';


<!-- the props from the react router dom -->
function Guard (props) {
    <!-- get the token from the local storage here -->
    return <Route  {...props}/>
}

Jwt decode

We use it to decode the token recieved from the api.

The token contain the user info.

How to install

npm i jwt-decode

How to use it

refer to the link https://www.npmjs.com/package/jwt-decode

add the decode function in a try and catch scheme - in case of error, clear the local storage

Logout

to log out we used the useLocation() from react-router-dom

created a conditional rendering to assign which nav-links to display in case a token exists or not

AddNotes

A problem occurs while it's adding the prevState note instead of the newly note!

Delete & Update

Was Able to pass a func from child to parent to call the useEffect Dependency again.
Another Idea is to create a modal for the delete and the update
I'm thinking about makes a separate component for the modal to re-use it in case of update or adding a new note

ahmedK03/note-app