Add Profile history, link Profile at Timer page

4 files changed, 62 insertions, 17 deletions

diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index af90a56..861e58e 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -1,17 +1,25 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Window from "../../components/Window/Window";
 
 import {
   Button,
   makeStyles,
 } from "@material-ui/core";
+
 import Registration from "./Registration/Registration";
 import ContentSection from "../../components/ContentSection/ContentSection";
+import SmartList from "../../components/SmartList/SmartList";
+
+import { get } from "../../requests";
+import SolutionCard from "../../components/SolutionCard/SolutionCard";
 
 
 const useStyles = makeStyles(theme => ({
   primary: {
-    padding: theme.spacing(4)
+    padding: theme.spacing(4),
+  },
+  cell: {
+    padding: theme.spacing(5),
   },
 }));
 
@@ -19,17 +27,38 @@ const useStyles = makeStyles(theme => ({
 const Profile = ({ user, setUser }) => {
   const classes = useStyles();
 
+  const [profileSolutions, setProfileSolutions] = useState([]);
+
   const handleLogout = () => {
     setUser({ username: 'anonymous', id: null });
     localStorage.clear();
   };
 
+  useEffect(() => {
+    get(`solutions/?author=${user.id}`).then(response => {
+      setProfileSolutions(response.data.reverse());
+    });
+  }, [user]);
+
+  const removeSolution = (id) => {
+    setProfileSolutions(profileSolutions.filter((solution => solution.id !== id)));
+  };
+
+  const renderItem = ({ index, style }) => {
+    return (
+      <div style={style} className={classes.cell}>
+        <SolutionCard data={profileSolutions[index]} removeThisCard={removeSolution} />
+      </div>
+    );
+  };
+
   return (
     <>
       <Window type="primary">
         <div className={classes.primary}>
           { user.id? (
-            <ContentSection sectionName={`Welcome back, ${user.username}`}>
+            <ContentSection sectionName={`Welcome back, ${user.username}!`}>
+              <p> Total amount of solutions: {profileSolutions.length} </p>
               <p> You can always log out from your account! </p>
               <Button variant="contained" color="secondary" onClick={handleLogout}>
                 Logout
@@ -42,7 +71,11 @@ const Profile = ({ user, setUser }) => {
         </div>
       </Window>
       <Window type="secondary" name="History">
-
+        <SmartList
+          itemSize={270}
+          itemCount={profileSolutions.length}
+          renderItem={renderItem}
+        />
       </Window>
     </>
   )
diff --git a/src/pages/Profile/Registration/Registration.js b/src/pages/Profile/Registration/Registration.js
index ce8384f..45c83bc 100644
--- a/src/pages/Profile/Registration/Registration.js
+++ b/src/pages/Profile/Registration/Registration.js
@@ -26,23 +26,25 @@ const Registration = ({ setUser }) => {
   };
 
   const handleSubmit = () => {
-    post('users/', { username })
-      .then(response => {
-        const user = response.data;
-        setUser(user);
-        if (isRememberMe) {
-          localStorage.setItem('userId', user.id);
-        }
-      })
-      .catch(err => {
-        get('users/').then(response => {
-          const user = response.data.filter(user => user.username === username)[0];
+    if (username !== '') {
+      post('users/', { username })
+        .then(response => {
+          const user = response.data;
           setUser(user);
           if (isRememberMe) {
             localStorage.setItem('userId', user.id);
           }
+        })
+        .catch(err => {
+          get('users/').then(response => {
+            const user = response.data.filter(user => user.username === username)[0];
+            setUser(user);
+            if (isRememberMe) {
+              localStorage.setItem('userId', user.id);
+            }
+          });
         });
-      });
+    }
   };
 
   return (
diff --git a/src/pages/Timer/Timer.js b/src/pages/Timer/Timer.js
index 83ec0dc..a41c47b 100644
--- a/src/pages/Timer/Timer.js
+++ b/src/pages/Timer/Timer.js
@@ -34,6 +34,10 @@ const Timer = ({ user, recentSolutions, setRecentSolutions, setPage }) => {
     setPage('contribute');
   };
 
+  const handleLogin = () => {
+    setPage('profile');
+  };
+
   const removeSolution = (id) => {
     setRecentSolutions(recentSolutions.filter((solution => solution.id !== id)));
   };
@@ -61,6 +65,12 @@ const Timer = ({ user, recentSolutions, setRecentSolutions, setPage }) => {
             </p>
             <Button variant="contained" color="secondary" onClick={handleLearnMore}> Learn more </Button>
           </ContentSection>
+          {user.id === null &&
+          <ContentSection sectionName="Log into an account">
+            <p> Tell us your name so we can track your progress</p>
+            <Button variant="contained" color="secondary" onClick={handleLogin} size="large"> Login </Button>
+          </ContentSection>
+          }
           <TimerButton registerResult={registerResult} />
         </div>
       </Window>
diff --git a/src/pages/Timer/TimerButton/TimerButton.js b/src/pages/Timer/TimerButton/TimerButton.js
index 56d3084..82af6ec 100644
--- a/src/pages/Timer/TimerButton/TimerButton.js
+++ b/src/pages/Timer/TimerButton/TimerButton.js
@@ -8,7 +8,7 @@ const useStyles = makeStyles(theme => ({
     textAlign: 'center',
     padding: theme.spacing(5),
     background: theme.palette.primary.main,
-    marginTop: theme.spacing(20),
+    marginTop: theme.spacing(10),
   },
 }));