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