React-redux

README.md

@@ -199,8 +199,12 @@
 
 ### Integration tests and msw
 
+### Login / Registration flow
+
 [pull request](https://github.com/nickovchinnikov/coursesbox/pull/40)
 
-### Login / Registration flow
+### React-redux and user flow part 1
+
+### React-redux in Jest and Storybook
 
 [pull request](https://github.com/nickovchinnikov/coursesbox/pull/41)

frontend/package.json

@@ -19,7 +19,8 @@
     "next": "12.1.6",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-hook-form": "^7.30.0"
+    "react-hook-form": "^7.30.0",
+    "react-redux": "^8.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.17.10",

frontend/pages/_app.tsx

@@ -1,12 +1,17 @@
 import type { AppProps } from "next/app";
+import { Provider } from "react-redux";
+
+import { store } from "@/store";
 
 import { Layout } from "@/components/Layout";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <Layout>
-      <Component {...pageProps} />
-    </Layout>
+    <Provider store={store}>
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
+    </Provider>
   );
 }
 

frontend/pages/login.tsx

@@ -1,8 +1,13 @@
 import type { NextPage } from "next";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import { useSelector, useDispatch } from "react-redux";
 import styled from "@emotion/styled";
 import { useForm } from "react-hook-form";
 
+import { RootState, AppDispatch } from "@/store";
+import { selectUser, login } from "@/services/userSlice";
+
 import { CenteredTile } from "@/components/Tile";
 import { Input, ConditionalFeedback } from "@/components/Input";
 import { Button } from "@/components/Button";
@@ -23,14 +28,25 @@ const Login: NextPage = () => {
     handleSubmit,
     formState: { errors },
   } = useForm<LoginForm>();
+  const router = useRouter();
+
+  const { jwt, error } = useSelector<RootState, RootState["user"]>(selectUser);
+  const dispatch = useDispatch<AppDispatch>();
+
+  if (Boolean(jwt) && !error) {
+    router.push("/user");
+  }
 
   const onSubmit = (data: LoginForm) => {
-    console.log(data);
+    dispatch(login(data));
   };
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <CenteredTile header="Login">
+        <h3>
+          <ConditionalFeedback>{error?.message}</ConditionalFeedback>
+        </h3>
         <StyledInput
           label="Identifier"
           placeholder="username or email"

frontend/pages/user.tsx

@@ -1,22 +1,40 @@
 import type { NextPage } from "next";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+
+import { RootState, AppDispatch } from "@/store";
+import { selectUser, logout } from "@/services/userSlice";
 
 import { CenteredTile } from "@/components/Tile";
 import { Button } from "@/components/Button";
 
 const User: NextPage = () => {
-  const userMock = { username: "John Doe", email: "john@doe.com" };
+  const router = useRouter();
+  const { username, email, error } = useSelector<RootState, RootState["user"]>(
+    selectUser
+  );
+  const dispatch = useDispatch<AppDispatch>();
 
-  const logoutHandler = async () => {
-    console.log("logout");
+  useEffect(() => {
+    if (!username || Boolean(error)) {
+      dispatch(logout());
+      router.push("/login");
+    }
+  }, []);
+
+  const logoutHandler = () => {
+    dispatch(logout());
+    router.push("/");
   };
 
-  return (
+  return username && email ? (
     <CenteredTile header="Profile">
-      <h3>username: {userMock.username}</h3>
-      <h3>email: {userMock.email}</h3>
+      <h3>username: {username}</h3>
+      <h3>email: {email}</h3>
       <Button onClick={logoutHandler}>Logout</Button>
     </CenteredTile>
-  );
+  ) : null;
 };
 
 export default User;

frontend/services/userSlice.test.ts

@@ -1,4 +1,4 @@
-import { storeCreator as globalStoreCreator } from "@/store";
+import { configureStore } from "@reduxjs/toolkit";
 
 import { mockUser, ValidationError, RegistrationError } from "@/mocks/user";
 
@@ -10,11 +10,7 @@ import {
   registration,
 } from "./userSlice";
 
-const rootReducer = {
-  user: reducer,
-};
-
-const storeCreator = () => globalStoreCreator(rootReducer);
+const storeCreator = () => configureStore({ reducer: { user: reducer } });
 
 const updatedState = {
   jwt: mockUser.jwt,