refactor

nemrosim · nemrosim · commit 4f48bf1a93f3 · 2020-09-14T00:47:05.000+03:00
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
@@ -38,9 +38,17 @@ export const NavBar: React.FC = () => {
                     Sign-up
                 </Link>
                 {user && (
-                    <Link className="menu-item" to={'/set-profile-data'}>
-                        Set profile data
-                    </Link>
+                    <>
+                        <Link className="menu-item" to={'/set-profile-data'}>
+                            Set profile data
+                        </Link>
+                        <Link className="menu-item" to={'/get-profile-data'}>
+                            Get profile data
+                        </Link>
+                        <Link className="menu-item" to={'/update-profile-data'}>
+                            Update profile data
+                        </Link>
+                    </>
                 )}
             </div>
         </div>
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,23 +1,27 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { StoreContext } from 'redux-react-hook';
-import { Router, Switch, Route } from 'react-router-dom';
+import { Route, Router, Switch } from 'react-router-dom';
 import { history } from './history';
 import { store } from './store';
+import * as serviceWorker from './serviceWorker';
+import { NavBar } from './components/NavBar/NavBar';
+import {
+    SignIn,
+    SignUp,
+    SignInWithPopUp,
+    SetProfileData,
+    PageNotFound,
+    GetProfileData,
+    UpdateProfileData,
+} from './pages';
+import { toast, ToastContainer } from 'react-toastify';
+
 import './styles/index/css-styles-reset.scss';
 import './styles/index/main.scss';
 
 import 'react-toastify/dist/ReactToastify.css';
 
-import * as serviceWorker from './serviceWorker';
-import { NavBar } from './components/NavBar/NavBar';
-import { SignIn } from './pages/SignIn/SignIn';
-import { SignUp } from './pages/SignUp/SignUp';
-import { toast, ToastContainer } from 'react-toastify';
-import { SignInWithPopUp } from './pages/SignInWithPopUp/SignInWithPopUp';
-import { SetProfileData } from './pages/SetProfileData/SetProfileData';
-import { PageNotFound } from './pages/PageNotFound/PageNotFound';
-
 // Call it once in your app. At the root of your app is the best place
 toast.configure();
 
@@ -31,6 +35,9 @@ ReactDOM.render(
                     <Route path="/sign-in" exact={true} component={SignIn} />
                     <Route path="/sign-in-with-popup" exact={true} component={SignInWithPopUp} />
                     <Route path="/set-profile-data" exact={true} component={SetProfileData} />
+                    <Route path="/get-profile-data" exact={true} component={GetProfileData} />
+                    <Route path="/get-profile-data" exact={true} component={GetProfileData} />
+                    <Route path="/update-profile-data" exact={true} component={UpdateProfileData} />
                     <Route component={PageNotFound} />
                 </Switch>
             </Router>
diff --git a/src/pages/PageNotFound/index.ts b/src/pages/PageNotFound/index.ts
@@ -0,0 +1 @@
+export { PageNotFound } from './PageNotFound';
diff --git a/src/pages/auth/SignIn/SignIn.tsx b/src/pages/auth/SignIn/SignIn.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import firebaseImage from '../../assets/firebase.png';
+import firebaseImage from '../../../assets/firebase.png';
 import { useDispatch } from 'redux-react-hook';
 
 import './signIn.scss';
-import { signIn } from '../../store/auth/signIn';
-import { firebase_app } from '../../api/firebase';
+import { signIn } from '../../../store/auth/signIn';
+import { firebase_app } from '../../../api/firebase';
 
 export const SignIn: React.FC = () => {
     const [email, setEmail] = useState<string>('');
diff --git a/src/pages/auth/SignIn/index.ts b/src/pages/auth/SignIn/index.ts
@@ -0,0 +1 @@
+export { SignIn } from './SignIn';
diff --git a/src/pages/auth/SignIn/signIn.scss b/src/pages/auth/SignIn/signIn.scss
diff --git a/src/pages/auth/SignInWithPopUp/SignInWithPopUp.tsx b/src/pages/auth/SignInWithPopUp/SignInWithPopUp.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import firebaseImage from '../../assets/firebase.png';
+import firebaseImage from '../../../assets/firebase.png';
 import { useDispatch } from 'redux-react-hook';
-import { signInPopup } from '../../store/auth/signInWithPopUp';
+import { signInPopup } from '../../../store/auth/signInWithPopUp';
 
 import './signInWithPopup.scss';
 
diff --git a/src/pages/auth/SignInWithPopUp/index.ts b/src/pages/auth/SignInWithPopUp/index.ts
@@ -0,0 +1 @@
+export { SignInWithPopUp } from './SignInWithPopUp';
diff --git a/src/pages/auth/SignInWithPopUp/signInWithPopup.scss b/src/pages/auth/SignInWithPopUp/signInWithPopup.scss
diff --git a/src/pages/auth/SignUp/SignUp.tsx b/src/pages/auth/SignUp/SignUp.tsx
@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
-import firebaseImage from '../../assets/firebase.png';
+import firebaseImage from '../../../assets/firebase.png';
 import { useDispatch } from 'redux-react-hook';
 
+import { signUp } from '../../../store/auth/signUp';
+
 import './signUp.scss';
-import { signUp } from '../../store/auth/signUp';
 
 export const SignUp: React.FC = () => {
     const [email, setEmail] = useState<string>('');
diff --git a/src/pages/auth/SignUp/index.ts b/src/pages/auth/SignUp/index.ts
@@ -0,0 +1 @@
+export { SignUp } from './SignUp';
diff --git a/src/pages/auth/SignUp/signUp.scss b/src/pages/auth/SignUp/signUp.scss
diff --git a/src/pages/index.ts b/src/pages/index.ts
@@ -0,0 +1,7 @@
+export { GetProfileData } from './profile/GetProfileData';
+export { PageNotFound } from './PageNotFound';
+export { SetProfileData } from './profile/SetProfileData';
+export { SignUp } from './auth/SignUp';
+export { SignIn } from './auth/SignIn';
+export { SignInWithPopUp } from './auth/SignInWithPopUp';
+export { UpdateProfileData } from './profile/UpdateProfileData';
diff --git a/src/pages/profile/GetProfileData/GetProfileData.tsx b/src/pages/profile/GetProfileData/GetProfileData.tsx
@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import firebaseImage from '../../../assets/firebase.png';
+import { useDispatch, useMappedState } from 'redux-react-hook';
+import { action_getProfileData } from '../../../store/profile/getProfileData';
+
+import './getProfileData.scss';
+import { getProfile } from '../../../store/profile/selectors';
+import { firebase_app } from '../../../api/firebase';
+
+export const GetProfileData: React.FC = () => {
+    const dispatch = useDispatch();
+    const [isUserLoggedIn, setIsUserLoggedIn] = useState<boolean>(false);
+
+    firebase_app.auth().onAuthStateChanged((user) => {
+        if (user) {
+            setIsUserLoggedIn(true);
+        }
+    });
+
+    useEffect(() => {
+        if (isUserLoggedIn) {
+            dispatch(action_getProfileData());
+        }
+    }, [isUserLoggedIn, dispatch]);
+
+    const { data: profile, loading: isProfileLoading } = useMappedState(getProfile);
+
+    return (
+        <div className="get-profile-data">
+            <img src={firebaseImage} />
+
+            <span>Get profile data</span>
+            {isProfileLoading && <span>Loading</span>}
+            <pre>{JSON.stringify(profile, null, '\t')}</pre>
+        </div>
+    );
+};
diff --git a/src/pages/profile/GetProfileData/getProfileData.scss b/src/pages/profile/GetProfileData/getProfileData.scss
@@ -0,0 +1,22 @@
+.get-profile-data {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: calc(100% - 200px);
+
+  img {
+    width: 200px;
+  }
+
+  span {
+    font-size: 20pt;
+    font-weight: 500;
+  }
+
+  pre {
+    font-size: 20px;
+    margin: 10px;
+  }
+
+}
diff --git a/src/pages/profile/GetProfileData/index.ts b/src/pages/profile/GetProfileData/index.ts
@@ -0,0 +1 @@
+export { GetProfileData } from './GetProfileData';
diff --git a/src/pages/profile/SetProfileData/SetProfileData.tsx b/src/pages/profile/SetProfileData/SetProfileData.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import firebaseImage from '../../assets/firebase.png';
+import firebaseImage from '../../../assets/firebase.png';
 import { useDispatch } from 'redux-react-hook';
-import { action_setProfileData } from '../../store/profile/setProfileData';
+import { action_setProfileData } from '../../../store/profile/setProfileData';
 
 import './setProfileData.scss';
 
diff --git a/src/pages/profile/SetProfileData/index.ts b/src/pages/profile/SetProfileData/index.ts
@@ -0,0 +1 @@
+export { SetProfileData } from './SetProfileData';
diff --git a/src/pages/profile/SetProfileData/setProfileData.scss b/src/pages/profile/SetProfileData/setProfileData.scss
diff --git a/src/pages/profile/UpdateProfileData/UpdateProfileData.tsx b/src/pages/profile/UpdateProfileData/UpdateProfileData.tsx
@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import firebaseImage from '../../../assets/firebase.png';
+import { useDispatch, useMappedState } from 'redux-react-hook';
+import { action_getProfileData } from '../../../store/profile/getProfileData';
+import { firebase_app } from '../../../api/firebase';
+import { getProfile } from '../../../store/profile/selectors';
+import { action_updateProfileData } from '../../../store/profile/updateProfileData';
+
+import './updateProfileData.scss';
+
+export const UpdateProfileData: React.FC = () => {
+    const dispatch = useDispatch();
+
+    const [firstName, setFirstName] = useState<string>('');
+    const [lastName, setLastName] = useState<string>('');
+    const [isUserLoggedIn, setIsUserLoggedIn] = useState<boolean>(false);
+
+    firebase_app.auth().onAuthStateChanged((user) => {
+        if (user) {
+            setIsUserLoggedIn(true);
+        }
+    });
+
+    useEffect(() => {
+        if (isUserLoggedIn) {
+            dispatch(action_getProfileData());
+        }
+    }, [isUserLoggedIn, dispatch]);
+
+    const { data: profile, loading: isProfileLoading } = useMappedState(getProfile);
+
+    useEffect(() => {
+        if (profile) {
+            setFirstName(profile.firstName);
+            setLastName(profile.lastName);
+        }
+    }, [profile, isProfileLoading]);
+
+    return (
+        <div className="set-profile-data">
+            <img src={firebaseImage} />
+
+            <span>Update profile data</span>
+            <input
+                placeholder="First name"
+                value={firstName}
+                onChange={(event) => setFirstName(event.currentTarget.value)}
+            />
+            <input
+                placeholder="Last name"
+                value={lastName}
+                onChange={(event) => setLastName(event.currentTarget.value)}
+            />
+            <button
+                onClick={() => {
+                    if (firstName && lastName) {
+                        dispatch(action_updateProfileData({ firstName, lastName }));
+                    }
+                }}
+            >
+                Update profile data
+            </button>
+        </div>
+    );
+};
diff --git a/src/pages/profile/UpdateProfileData/index.ts b/src/pages/profile/UpdateProfileData/index.ts
@@ -0,0 +1 @@
+export { UpdateProfileData } from './UpdateProfileData';
diff --git a/src/pages/profile/UpdateProfileData/updateProfileData.scss b/src/pages/profile/UpdateProfileData/updateProfileData.scss
@@ -0,0 +1,40 @@
+.set-profile-data {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: calc(100% - 200px);
+
+  img {
+    width: 200px;
+  }
+
+  span {
+    font-size: 20pt;
+    font-weight: 500;
+  }
+
+  input {
+    height: 40px;
+    font-size: 20px;
+    width: 300px;
+    margin: 10px;
+    border-radius: 5px;
+  }
+
+  button {
+    background-color: #bcdaff;
+    border-radius: 15px;
+    border: none;
+    height: 45px;
+    font-size: 20px;
+    margin-top: 30px;
+    width: 300px;
+    cursor: pointer;
+
+    &:focus {
+      outline: none;
+      background-color: #3d95ff;
+    }
+  }
+}
diff --git a/src/store/profile/getProfileData/sagas.ts b/src/store/profile/getProfileData/sagas.ts
@@ -3,25 +3,29 @@ import { toast } from 'react-toastify';
 import { getProfileDataSuccess, getProfileDataError } from './actions';
 import { firebase_app } from '../../../api/firebase';
 
-export function* worker_getProfileData(
-    action: Record<'payload', { firstName: string; lastName: string }>,
-): IterableIterator<any> {
+export function* worker_getProfileData(): IterableIterator<any> {
     let infoToastID;
     try {
         infoToastID = toast.info('Loading');
 
-        const { firstName, lastName } = action.payload;
+        const userId = firebase_app.auth().currentUser?.uid;
+        if (userId) {
+            const document = yield firebase_app
+                .firestore()
+                .collection('profiles')
+                .doc(userId)
+                .get();
 
-        yield firebase_app
-            .firestore()
-            .collection('profiles')
-            .doc(firebase_app.auth().currentUser.uid)
-            .update({ firstName, lastName });
+            toast.dismiss(infoToastID);
+            toast.success('Profile data loaded');
 
-        toast.dismiss(infoToastID);
-        toast.success('Profile data saved');
+            // @ts-ignore
+            const data = document?.data();
 
-        yield put(getProfileDataSuccess());
+            yield put(getProfileDataSuccess(data));
+        } else {
+            toast.info('Not logged in');
+        }
     } catch (error) {
         toast.dismiss(infoToastID);
         toast.error(error.message);
diff --git a/src/store/profile/reducers.ts b/src/store/profile/reducers.ts
@@ -2,8 +2,10 @@ import { combineReducers } from 'redux';
 
 import { getProfileData } from './getProfileData/reducer';
 import { setProfileData } from './setProfileData/reducer';
+import { updateProfileData } from './updateProfileData/reducer';
 
 export const profile = combineReducers({
     getProfileData,
     setProfileData,
+    updateProfileData,
 });
diff --git a/src/store/profile/sagas.ts b/src/store/profile/sagas.ts
@@ -1,10 +1,12 @@
 import { all, takeLatest } from 'redux-saga/effects';
 import { action_getProfileData, worker_getProfileData } from './getProfileData';
 import { action_setProfileData, worker_setProfileData } from './setProfileData';
+import { action_updateProfileData, worker_updateProfileData } from './updateProfileData';
 
 export function* profile(): IterableIterator<any> {
     yield all([
         takeLatest(action_getProfileData, worker_getProfileData),
         takeLatest(action_setProfileData, worker_setProfileData),
+        takeLatest(action_updateProfileData, worker_updateProfileData),
     ]);
 }
diff --git a/src/store/profile/selectors.ts b/src/store/profile/selectors.ts
@@ -0,0 +1,3 @@
+import { ReduxStore } from '../../types/ReduxStore';
+
+export const getProfile = (state: ReduxStore) => state.profile.getProfileData;
diff --git a/src/store/profile/updateProfileData/actions.ts b/src/store/profile/updateProfileData/actions.ts
@@ -0,0 +1,9 @@
+import { createAction } from 'redux-actions';
+
+export const UPDATE_PROFILE_DATA = '[PROFILE] UPDATE_PROFILE_DATA';
+export const UPDATE_PROFILE_DATA_SUCCESS = '[PROFILE] UPDATE_PROFILE_DATA_SUCCESS';
+export const UPDATE_PROFILE_DATA_ERROR = '[PROFILE] UPDATE_PROFILE_DATA_ERROR';
+
+export const action_updateProfileData = createAction(UPDATE_PROFILE_DATA);
+export const updateProfileDataSuccess = createAction(UPDATE_PROFILE_DATA_SUCCESS);
+export const updateProfileDataError = createAction(UPDATE_PROFILE_DATA_ERROR);
diff --git a/src/store/profile/updateProfileData/index.ts b/src/store/profile/updateProfileData/index.ts
@@ -0,0 +1,2 @@
+export { worker_updateProfileData } from './sagas';
+export { action_updateProfileData } from './actions';
diff --git a/src/store/profile/updateProfileData/reducer.ts b/src/store/profile/updateProfileData/reducer.ts
diff --git a/src/store/profile/updateProfileData/sagas.ts b/src/store/profile/updateProfileData/sagas.ts
diff --git a/src/store/reducers.ts b/src/store/reducers.ts
diff --git a/src/types/ReduxStore.ts b/src/types/ReduxStore.ts
diff --git a/src/utils/reduxHelpers.ts b/src/utils/reduxHelpers.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { PageNotFound } from './PageNotFound';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { SignInWithPopUp } from './SignInWithPopUp';`