Lecture class 58

src/App.js

@@ -4,14 +4,18 @@ import "./App.css";
 import { Routes, Route } from "react-router-dom";
 import Homepage from "./pages/Homepage";
 import PostPage from "./pages/PostPage";
+import LoginPage from "./pages/LoginPage";
+import NavBar from "./component/NavBar";
 
 export default function App() {
   return (
     <div>
+      <NavBar />
       <Routes>
         {/* more pages to be added here later */}
         <Route path="/" element={<Homepage />} />
         <Route path="/post/:id" element={<PostPage />} />
+        <Route path="/login" element={<LoginPage />} />
       </Routes>
     </div>
   );

src/component/NavBar.js

@@ -0,0 +1,39 @@
+import { Link } from "react-router-dom";
+import { useSelector, useDispatch } from "react-redux";
+import { getUser } from "../store/auth/selectors";
+import { logout } from "../store/auth/slice";
+
+const NavBar = () => {
+  const user = useSelector(getUser);
+  const dispatch = useDispatch();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        paddingRight: 30,
+        paddingLeft: 30,
+        backgroundColor: "purple",
+      }}
+    >
+      <Link to="/">
+        <h2>Coders!</h2>
+      </Link>
+      <div style={{ marginTop: 25 }}>
+        {user ? (
+          <div style={{ display: "flex" }}>
+            <h4>Welcome {user.name}!</h4>
+            <button onClick={() => dispatch(logout())}>logout</button>
+          </div>
+        ) : (
+          <Link to="/login">
+            <button>Login</button>
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default NavBar;

src/pages/LoginPage.js

@@ -0,0 +1,56 @@
+// src/pages/LoginPage.js
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+import { login } from "../store/auth/thunks";
+import { useNavigate } from "react-router-dom";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  function handleSubmit(event) {
+    event.preventDefault();
+
+    // Make a POST request
+    // Create a thunk for this!
+    dispatch(login(email, password, navigate));
+
+    // TODO
+    console.log("TODO login with:", email, password);
+    setEmail("");
+    setPassword("");
+  }
+
+  return (
+    <div>
+      <h1>Login</h1>
+      <form onSubmit={handleSubmit}>
+        <p>
+          <label>
+            Email:{" "}
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </label>
+        </p>
+        <p>
+          <label>
+            Password:{" "}
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </label>
+        </p>
+        <p>
+          <button type="submit">Login</button>
+        </p>
+      </form>
+    </div>
+  );
+}

src/store/auth/selectors.js

@@ -0,0 +1 @@
+export const getUser = (reduxState) => reduxState.auth.user;

src/store/auth/slice.js

@@ -0,0 +1,28 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  loading: false,
+  token: null,
+  user: null,
+};
+
+export const authSlice = createSlice({
+  name: "auth",
+  initialState,
+  reducers: {
+    startLoading: (state) => {
+      state.loading = true;
+    },
+    saveLoginData: (state, action) => {
+      state.token = action.payload.token;
+      state.user = action.payload.user;
+    },
+    logout: (state) => {
+      return { ...initialState };
+    },
+  },
+});
+
+export const { startLoading, saveLoginData, logout } = authSlice.actions;
+
+export default authSlice.reducer;

src/store/auth/thunks.js

@@ -0,0 +1,35 @@
+import axios from "axios";
+import { saveLoginData, startLoading } from "./slice";
+
+import { API_URL } from "../../config";
+
+export const login =
+  (email, password, navigate) => async (dispatch, getState) => {
+    try {
+      // dispatch => set loading to true
+      dispatch(startLoading());
+
+      // Make POST to /login
+      const response = axios.post(`${API_URL}/login`, {
+        email,
+        password,
+      });
+
+      const token = response.data.jwt;
+
+      const profileResponse = axios.get(`${API_URL}/me`, {
+        headers: {
+          authorization: `Bearer ${token}`,
+        },
+      });
+
+      navigate("/");
+
+      console.log("me response", profileResponse.data);
+      // store it in redux => dispatch something.
+
+      dispatch(saveLoginData({ token, user: profileResponse.data }));
+    } catch (e) {
+      console.log(e.message);
+    }
+  };

src/store/index.js

@@ -2,11 +2,13 @@
 import { configureStore } from "@reduxjs/toolkit";
 import feedReducer from "./feed/slice";
 import postPageReducer from "./postPage/slice";
+import authReducer from "./auth/slice";
 
 const store = configureStore({
   reducer: {
     feed: feedReducer,
     postPage: postPageReducer,
+    auth: authReducer,
   },
 });