Merge pull request #51 from MargoMarm/fix/ParamsPage

Fix/params page
MargoMarm · Sep 20, 2023 · 89a0660 · 89a0660
2 parents 3f834bb + ccb5c25
commit 89a0660
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 56 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,10 +1,12 @@
-import { Route, Routes } from 'react-router-dom';
-import { lazy } from 'react';
+import { Route, Routes, useLocation } from 'react-router-dom';
+import { lazy, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { fetchCurrentUser } from './redux/auth/operation';
 
 import SharedLayout from './components/SharedLayout/SharedLayout';
 // import SharedLayout from './components/SharedLayout/SharedLayout';
 import { PrivateRoute, PublicRoute } from './components/Routes';
-
+import { UseAuth } from './hooks/useAuth';
 
 const Home = lazy(() => import('../src/pages/Home/Home'));
 const SignIn = lazy(() => import('../src/pages/SignIn/SignIn'));
@@ -19,47 +21,70 @@ const Error = lazy(() => import('../src/pages/Error/Error'));
 const Diary = lazy(() => import('../src/pages/Diary/Diary'));
 const Profile = lazy(() => import('./pages/Profile/Profile'));
 
-const test = import.meta.env.VITE_API_TEST;
+// const test = import.meta.env.VITE_API_TEST;
 
 function App() {
-  console.log(test);
+  const dispatch = useDispatch();
+
+  const { isRefreshing, isLoggedIn } = UseAuth();
+  const { pathname } = useLocation();
+
+  if (isLoggedIn && pathname !== '/') {
+    localStorage.setItem('location', pathname);
+  }
+
+  const location = localStorage.getItem('location');
+
+  useEffect(() => {
+    dispatch(fetchCurrentUser());
+  }, [dispatch]);
+
+  // console.log(test);
+
   return (
-    <Routes>
-      <Route path="/" element={<SharedLayout />}>
-        <Route index element={<Home />} />
-        <Route
-          path="/signin"
-          element={<PublicRoute component={<SignIn />} redirectTo={'/diary'} />}
-        />
-        <Route
-          path="/signup"
-          element={
-            <PublicRoute component={<SignUp />} redirectTo={'/params'} />
-          }
-        />
-        <Route
-          path="/products"
-          element={<PrivateRoute component={<Products />} redirectTo="/" />}
-        />
-        <Route
-          path="/params"
-          element={<PrivateRoute component={<Params />} redirectTo="/" />}
-        />
-        <Route
-          path="/exercises"
-          element={<PrivateRoute component={<Exercises />} redirectTo="/" />}
-        />
-        <Route
-          path="/diary"
-          element={<PrivateRoute component={<Diary />} redirectTo="/" />}
-        />
-        <Route
-          path="/profile"
-          element={<PrivateRoute component={<Profile />} redirectTo="/" />}
-        />
-        <Route path="/error" element={<Error />} />
-      </Route>
-    </Routes>
+    !isRefreshing && (
+      <Routes>
+        <Route path={'/'} element={<SharedLayout />}>
+          <Route
+            index
+            element={<PublicRoute component={<Home />} redirectTo={location} />}
+          />
+          <Route
+            path="/signin"
+            element={
+              <PublicRoute component={<SignIn />} redirectTo={'/diary'} />
+            }
+          />
+          <Route
+            path="/signup"
+            element={
+              <PublicRoute component={<SignUp />} redirectTo={'/params'} />
+            }
+          />
+          <Route
+            path="/products"
+            element={<PrivateRoute component={<Products />} redirectTo="/" />}
+          />
+          <Route
+            path="/params"
+            element={<PrivateRoute component={<Params />} redirectTo="/" />}
+          />
+          <Route
+            path="/exercises"
+            element={<PrivateRoute component={<Exercises />} redirectTo="/" />}
+          />
+          <Route
+            path="/diary"
+            element={<PrivateRoute component={<Diary />} redirectTo="/" />}
+          />
+          <Route
+            path="/profile"
+            element={<PrivateRoute component={<Profile />} redirectTo="/" />}
+          />
+          <Route path="/error" element={<Error />} />
+        </Route>
+      </Routes>
+    )
   );
 }
 export default App;
diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx
@@ -12,6 +12,8 @@ import {
   Radio,
   colors,
 } from '@mui/material';
+// import { format } from 'date-fns';
+// import axios from 'axios';
 
 import {
   FormikField,
@@ -27,6 +29,7 @@ import ParamsBlockCard from '../ParamsBlockСard';
 import ParamsBtn from '../ParamsBtn';
 import Title from '../Title/Title';
 import SubTitle from '../SubTitle/SubTitle';
+// import Calendar from '../Calendar/Calendar';
 
 const ParamsForm = ({ setSteps, setSwiperRef }) => {
   const navigate = useNavigate();
@@ -42,15 +45,29 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => {
         sex: '',
         levelActivity: '',
       }}
-      onSubmit={(values, Formik) => {
+      onSubmit={async (values, Formik) => {
+        // const newParamsUser = {
+        //   ...values,
+        //   blood: Number(values.blood),
+        //   levelActivity: Number(values.levelActivity),
+        //   birthday: format(date, 'yyyy-MM-dd'),
+        // };
+
+        // await axios.post(
+        //   'https://power-pulse-rest-api.onrender.com/api/users/create',
+        //   newParamsUser,
+        // );
         console.log(values);
+
         navigate('/diary');
+
         Formik.resetForm();
+
         setSteps(1);
       }}
       validationSchema={paramsSchema}
     >
-      {({ handleChange, values }) => (
+      {({ handleChange }) => (
         <Form>
           <Swiper
             spaceBetween={10}
@@ -68,26 +85,31 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => {
 
               <InputGroup>
                 <FormikField
+                  type="number"
                   name="height"
                   placeholder="Height"
                   autoComplete="off"
-                  value={values.height}
                 />
                 <FormikField
+                  type="number"
                   name="currentWeight"
                   placeholder="Current Weight"
                   autoComplete="off"
                 />
                 <FormikField
+                  type="number"
                   name="desiredWeight"
                   placeholder="Desired Weight"
                   autoComplete="off"
                 />
-                <FormikField
-                  name="birthday"
-                  placeholder="Birthday"
-                  autoComplete="off"
-                />
+                {/* <div style={{ width: '155px', height: '52px', margin: '7px' }}>
+                  <Calendar
+                    name="birthday"
+                    onChange={handleChange}
+                    date={date}
+                    setDate={setDate}
+                  />
+                </div> */}
               </InputGroup>
 
               <ParamsBtn setSteps={setSteps} type={'next'} step={2} />
@@ -410,13 +432,13 @@ ParamsForm.propTypes = {
 };
 
 const paramsSchema = Yup.object({
-  height: Yup.string().required(),
-  currentWeight: Yup.string().required(),
-  desiredWeight: Yup.string().required(),
+  height: Yup.number().min(150).required(),
+  currentWeight: Yup.number().min(35).required(),
+  desiredWeight: Yup.number().min(35).required(),
   birthday: Yup.string().required(),
   blood: Yup.string().required(),
   sex: Yup.string().required(),
-  levelActivity: Yup.string().required(),
+  levelActivity: Yup.number().required(),
 });
 
 export default ParamsForm;
diff --git a/src/components/ParamsForm/ParamsForm.styled.jsx b/src/components/ParamsForm/ParamsForm.styled.jsx
@@ -24,6 +24,7 @@ export const InputGroup = styled.div`
 export const FormikField = styled(Field)`
   ${mq.smallMobile} {
     width: 155px;
+    height: 52px;
     padding: 14px 0 14px 14px;
     margin: 7px;
 

diff --git a/src/components/headersComp/Logo/Logo.jsx b/src/components/headersComp/Logo/Logo.jsx
@@ -5,7 +5,7 @@ export const Logo = () => {
   return (
     <>
       <WrapLogo>
-        <a href="/september-project">
+        <a href="/september-project/">
           <Svg>
             <use href={sprite + `#logo-big`}></use>
           </Svg>{' '}

diff --git a/src/redux/auth/operation.js b/src/redux/auth/operation.js
@@ -52,7 +52,6 @@ export const logOutUser = createAsyncThunk(
   async (_, { rejectWithValue }) => {
     try {
       await axios.post('/api/users/logout');
-      console.log('qwe');
       token.unSet();
     } catch (error) {
       toast.error('Oops, something went wrong((( Try again, please!');
@@ -67,7 +66,7 @@ export const fetchCurrentUser = createAsyncThunk(
   'refreshUser',
   async (_, { rejectWithValue, getState }) => {
     const state = getState();
-    const persistedToken = state.user.token;
+    const persistedToken = state.auth.token;
     if (!persistedToken) {
       return rejectWithValue();
     }