Merge branch 'master' into PS-90

Author: patrycjastarzec

src/App.js

@@ -1,19 +1,41 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { Navigation } from './components/shared';
 import { Footer } from './components/mainPage/footer/Footer';
 import AccountForm from './components/accountForm/accountForm.jsx';
 import Views from './Views';
-import { AppProvider } from './appContext';
+import { ApiProvider } from './contexts/apiContext';
+import ApiQuery from './components/shared/api/ApiQuery';
+import LoadingSpinner from './components/shared/loadingSpinner/LoadingSpinner';
+import { UserProvider } from './contexts/userContext';
 import { checkIfLoggedIn } from './utils/checkLoggedIn';
 import { LS_TOKEN, LS_USER_DATA } from './constants/localStorage';
 
 function App() {
-    const [isLoggedIn, setIsLoggedIn] = React.useState(false);
-    const [modalShow, setModalShow] = React.useState(false);
-    const [isNewUser, setIsNewUser] = React.useState(false);
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
+    const [modalShow, setModalShow] = useState(false);
+    const [isNewUser, setIsNewUser] = useState(false);
     const keysToRemove = [LS_TOKEN, LS_USER_DATA];
 
+    const [isLoading, setIsLoading] = useState(true);
+    const [pageResource, setPageResource] = useState({
+        mealPlans: [],
+        recipes: [],
+    });
+
+    const fetchData = async () => {
+        try {
+            const { data } = await ApiQuery.get('api/pageResource');
+            setPageResource(data);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
     const onSignInHandler = (e) => {
         e.preventDefault();
         setIsNewUser(false);
@@ -45,24 +67,30 @@ function App() {
     return (
         <>
             <BrowserRouter>
-                <Navigation
-                    isLoggedIn={isLoggedIn}
-                    onRegister={onRegisterClick}
-                    onSignIn={onSignInClick}
-                    onLogOut={onLogOut}
-                />
-                <AccountForm
-                    isCentered={true}
-                    isModalShown={modalShow}
-                    closeModal={() => setModalShow(false)}
-                    newUserHandler={() => setIsNewUser(!isNewUser)}
-                    handleSave={onSignInHandler}
-                    isNewUser={isNewUser}
-                    onLogIn={onPositiveLogIn}
-                />
-                <AppProvider value={{}}>
-                    <Views />
-                </AppProvider>
+                <UserProvider>
+                    <Navigation
+                        isLoggedIn={isLoggedIn}
+                        onRegister={onRegisterClick}
+                        onSignIn={onSignInClick}
+                        onLogOut={onLogOut}
+                    />
+                    <AccountForm
+                        isCentered={true}
+                        isModalShown={modalShow}
+                        closeModal={() => setModalShow(false)}
+                        newUserHandler={() => setIsNewUser(!isNewUser)}
+                        handleSave={onSignInHandler}
+                        isNewUser={isNewUser}
+                        onLogIn={onPositiveLogIn}
+                    />
+                    {isLoading ? (
+                        <LoadingSpinner />
+                    ) : (
+                        <ApiProvider value={{ pageResource }}>
+                            <Views />
+                        </ApiProvider>
+                    )}
+                </UserProvider>
             </BrowserRouter>
             <Footer />
         </>

src/appContext.js

@@ -1,6 +1,7 @@
-import { CustomModal } from '../shared/modal/Modal';
 // import { useState } from 'react';
 
+import { CustomModal } from '../shared/Modal/Modal';
+
 export const ConfirmRemovalModal = (props) => {
     const { closeModal, handleSave, id } = props;
     return (

src/components/ConfirmRemovalModal/ConfirmRemovalModal.jsx

@@ -1,4 +1,4 @@
-import { React, useState } from 'react';
+import { useState } from 'react';
 import { Button, Form } from 'react-bootstrap';
 import ApiQuery from '../../../components/shared/api/ApiQuery';
 import LoadingSpinner from '../../shared/loadingSpinner/LoadingSpinner';
@@ -61,7 +61,7 @@ const SignUp = ({
         } else if (name.length > 40) {
             newErrors.name = 'Name is too long!';
         }
-        if (!surname || surname === '') {
+      if (!surname || surname === '') {
             newErrors.surname = 'Surname is required!';
         } else if (surname.length > 40) {
             newErrors.surname = 'Surname is too long!';

src/components/accountForm/SignUp/SignUp.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { CustomModal } from '../shared/modal/Modal';
 import SignIn from './SignIn/SignIn';
 import SignUp from './SignUp/SignUp';
 import './accountForm.css';
+import { CustomModal } from '../shared/Modal/Modal';
 
 const AccountForm = (props) => {
     return (

src/components/accountForm/accountForm.jsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Button } from 'react-bootstrap';
-import { CustomModal } from '../modal/Modal';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEdit, faList, faTrash } from '@fortawesome/free-solid-svg-icons';
 import ApiQuery from '../api/ApiQuery';
 import { ConfirmRemovalModal } from '../../ConfirmRemovalModal/ConfirmRemovalModal';
 import './edit.css';
+import { CustomModal } from '../Modal/Modal';
 
 export function EditControls(props) {
     const { isLoggedIn, isOwner, url, endpoint, id, handleSave } = props;

src/components/shared/editControls/EditControls.jsx

@@ -8,4 +8,3 @@ const LoadingSpinner = (props) => {
 export default LoadingSpinner;
 
 // <LoadingSpinner style={loadingStyles} />   // in this way you can use this component with any styles
-

src/components/shared/loadingSpinner/LoadingSpinner.jsx

@@ -0,0 +1,13 @@
+import React, { createContext } from 'react';
+
+const ApiContext = createContext();
+
+const ApiProvider = ({ children }) => {
+    return <ApiContext.Provider value={{}}>{children}</ApiContext.Provider>;
+};
+
+// eslint-disable-next-line react/display-name
+const withApp = (Child) => (props) =>
+    <ApiContext.Consumer>{(context) => <Child {...props} {...context} />}</ApiContext.Consumer>;
+
+export { ApiContext, ApiProvider, withApp };

src/contexts/apiContext.js

@@ -0,0 +1,13 @@
+import React, { createContext, useState } from 'react';
+
+const UserContext = createContext();
+
+const UserProvider = ({ children }) => {
+    const [userData, setUserData] = useState();
+
+    return (
+        <UserContext.Provider value={{ userData, setUserData }}>{children}</UserContext.Provider>
+    );
+};
+
+export { UserContext, UserProvider };

src/contexts/userContext.js

@@ -1,4 +1,4 @@
-import Banner from '../../components/mainPage/banner/Banner.jsx';
+import Banner from '../../components/mainPage/Banner/Banner';
 import Contact from '../../components/mainPage/contact/Contact.jsx';
 import './style.css';