From c06bce7fdab23e52d33636e3585c86d48c0bfa91 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Sun, 12 Jan 2020 14:16:26 +0300
Subject: Markup initial Profile page with empty form

---
 src/pages/Profile/Profile.js | 45 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/pages/Profile/Profile.js

(limited to 'src/pages/Profile/Profile.js')

diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
new file mode 100644
index 0000000..3b0de1e
--- /dev/null
+++ b/src/pages/Profile/Profile.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import Window from "../../components/Window/Window";
+import ContentSection from "../../components/ContentSection/ContentSection";
+
+import {
+  TextField,
+  Button,
+  Typography,
+  makeStyles,
+} from "@material-ui/core";
+
+
+const useStyles = makeStyles(theme => ({
+  primary: {
+    padding: theme.spacing(4)
+  },
+}));
+
+const Profile = () => {
+  const classes = useStyles();
+
+  return (
+    <>
+      <Window type="primary">
+        <div className={classes.primary}>
+          <ContentSection sectionName="Tell us who you are">
+            <p> Here is some text about why you should register at ChronoCube: </p>
+            <p>
+              <TextField variant="outlined" color="secondary" label="Username" />
+            </p>
+            <Button variant="contained" color="secondary" size="large">
+              Submit!
+            </Button>
+          </ContentSection>
+        </div>
+      </Window>
+      <Window type="secondary" name="History">
+
+      </Window>
+    </>
+  )
+};
+
+
+export default Profile;
-- 
cgit v1.2.3


From 3ef3cb7f0b25a448e81e5b81738758f4545337cc Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Sun, 12 Jan 2020 15:35:46 +0300
Subject: Implement Registration component

---
 src/pages/Profile/Profile.js | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

(limited to 'src/pages/Profile/Profile.js')

diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index 3b0de1e..f2c44ef 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -1,13 +1,11 @@
 import React from 'react';
 import Window from "../../components/Window/Window";
-import ContentSection from "../../components/ContentSection/ContentSection";
 
 import {
-  TextField,
-  Button,
-  Typography,
   makeStyles,
 } from "@material-ui/core";
+import Registration from "./Registration/Registration";
+import ContentSection from "../../components/ContentSection/ContentSection";
 
 
 const useStyles = makeStyles(theme => ({
@@ -16,22 +14,22 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const Profile = () => {
+
+const Profile = ({ user, setUser }) => {
   const classes = useStyles();
 
   return (
     <>
       <Window type="primary">
         <div className={classes.primary}>
-          <ContentSection sectionName="Tell us who you are">
-            <p> Here is some text about why you should register at ChronoCube: </p>
-            <p>
-              <TextField variant="outlined" color="secondary" label="Username" />
-            </p>
-            <Button variant="contained" color="secondary" size="large">
-              Submit!
-            </Button>
-          </ContentSection>
+          { user.id? (
+            <ContentSection sectionName={`Welcome back, ${user.username}`}>
+
+            </ContentSection>
+          ): (
+            <Registration setUser={setUser} />
+          )
+          }
         </div>
       </Window>
       <Window type="secondary" name="History">
-- 
cgit v1.2.3


From 0de06228f4b5e482b6f73230210225b332f0a2ff Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Sun, 12 Jan 2020 16:02:25 +0300
Subject: Store user data in localStorage (optionally)

---
 src/pages/Profile/Profile.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'src/pages/Profile/Profile.js')

diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index f2c44ef..af90a56 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Window from "../../components/Window/Window";
 
 import {
+  Button,
   makeStyles,
 } from "@material-ui/core";
 import Registration from "./Registration/Registration";
@@ -18,13 +19,21 @@ const useStyles = makeStyles(theme => ({
 const Profile = ({ user, setUser }) => {
   const classes = useStyles();
 
+  const handleLogout = () => {
+    setUser({ username: 'anonymous', id: null });
+    localStorage.clear();
+  };
+
   return (
     <>
       <Window type="primary">
         <div className={classes.primary}>
           { user.id? (
             <ContentSection sectionName={`Welcome back, ${user.username}`}>
-
+              <p> You can always log out from your account! </p>
+              <Button variant="contained" color="secondary" onClick={handleLogout}>
+                Logout
+              </Button>
             </ContentSection>
           ): (
             <Registration setUser={setUser} />
-- 
cgit v1.2.3


From fff9eae8022e1e3bb88884a47bfd4153b089f444 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Sun, 12 Jan 2020 18:04:57 +0300
Subject: Add Profile history, link Profile at Timer page

---
 src/pages/Profile/Profile.js | 41 +++++++++++++++++++++++++++++++++++++----
 1 file changed, 37 insertions(+), 4 deletions(-)

(limited to 'src/pages/Profile/Profile.js')

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>
     </>
   )
-- 
cgit v1.2.3