Adding Photo Picker to project

jordus100 · May 22, 2024 · b7ed380 · b7ed380
1 parent 50f5ac2
commit b7ed380
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 49 deletions.
diff --git a/src/User/ProfileView/ProfileInfoTable.js b/src/User/ProfileView/ProfileInfoTable.js
@@ -1,14 +1,20 @@
 import { useEffect, useState } from "react";
 import {PointsService} from "../../services/PointsService";
 import {XAxis, YAxis, CartesianGrid, ResponsiveContainer, Tooltip, LineChart, Line  } from 'recharts';
+import ProfileGameList from './ProfileGameList';
 
-
-function RatingTable(props) {
+function RatingTable({user, state}) {
     const [history, setHistory] = useState([{id: 0, logDate: "", points: 0, playerId: 0}]);
 
     useEffect(() => {
-        setHistory(PointsService.getPointsHistoryForPlayer(props.playerid)["data"]);
-    }, [props.playerid]);
+        console.log(user);
+        PointsService.getPointsHistoryForPlayer(user.id).then((data) => {
+            setHistory(data.data.data);
+            console.log(history);
+        }).catch((error) => {
+            console.log(error);
+        });
+    }, [user.id]);
 
     var ticksize = 20;
     const chart = 
@@ -17,8 +23,8 @@ function RatingTable(props) {
                 <CartesianGrid/>
                 <Tooltip labelStyle={{fontSize: ticksize}} contentStyle={{fontSize: ticksize}}/>
                 <XAxis dataKey="logDate" tick={{fontSize: ticksize}} />
-                <YAxis dataKey="rating" tick={{fontSize: ticksize}} />
-                <Line type="linear" dataKey="rating" stroke="#01FF00" fill="#01FF00" /> 
+                <YAxis dataKey="before" tick={{fontSize: ticksize}} />
+                <Line type="linear" dataKey="before" stroke="#01FF00" fill="#01FF00" /> 
             </LineChart>
         </ResponsiveContainer>
     return (
@@ -28,32 +34,6 @@ function RatingTable(props) {
     );
 }
 
-function BotsTable(props) {
-    return (
-        <table>
-            <tr>
-                <th>Bots</th>
-            </tr>
-            <tr>
-                <td>{props.bots}</td>
-            </tr>
-        </table>
-    );
-}
-
-function GamesAddedTable(props) {
-    return (
-        <table>
-            <tr>
-                <th>Games Added</th>
-            </tr>
-            <tr>
-                <td>{props.games}</td>
-            </tr>
-        </table>
-    );
-}
-
 function TournamentsPlayedTable(props) {
     return (
         <table>
@@ -67,27 +47,23 @@ function TournamentsPlayedTable(props) {
     );
 }
 
-function changeState(newState) {
+function changeState(newState, user) {
     switch (newState) {
         case "rating":
-            return <RatingTable/>;
-        case "bots":
-            return <BotsTable bots={5} />;
+            return <RatingTable user={user}/>;
         case "games":
-            return <GamesAddedTable games={5} />;
+            return <ProfileGameList userId={user.id}/>;
         case "tournaments":
             return <TournamentsPlayedTable tournaments={5} />;
         default:
             return null;
     }
 }
 
-function ProfileInfoTable(props) {
-    const { state, user } = props;
+function ProfileInfoTable({ state, user }) {
     const [content, setContent] = useState(null);
     useEffect(() => {
-        var con = changeState(state);
-        setContent(con);
+        setContent(changeState(state, user));
     }, [state]);
 
     return (<>

diff --git a/src/User/ProfileView/ProfileInfoTableButtons.js b/src/User/ProfileView/ProfileInfoTableButtons.js
@@ -7,7 +7,6 @@ function ProfileInfoTableButtons(props) {
     return (
         <div className="user-info-table-buttons-container">
             <button type="user-info-table-button" onClick={() => setState("rating")}>Rating</button>
-            <button type="user-info-table-button" onClick={() => setState("bots")}>Bots</button>
             <button type="user-info-table-button" onClick={() => setState("games")}>My Games</button>
             <button type="user-info-table-button" onClick={() => setState("tournaments")}>Tournaments</button>
         </div>

diff --git a/src/User/ProfileView/ProfileView.css b/src/User/ProfileView/ProfileView.css
@@ -63,7 +63,7 @@
 
 .user-info-table-buttons-container {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
     justify-content:space-evenly;
 }
 
@@ -142,6 +142,21 @@ button {
 
 .user-ban-icon {
     position: absolute;
-    width: 50px;
+    width: 60px;
+    height: 60px;
     padding: 10px;
+
+    background-color: #686868;
+    border-radius: 5px;
+}
+
+.user-deleted-icon{
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    padding: 10px;
+    top: 80px;
+
+    background-color: #686868;
+    border-radius: 5px;
 }
diff --git a/src/User/ProfileView/ProfileView.js b/src/User/ProfileView/ProfileView.js
@@ -7,16 +7,18 @@ import { Buffer } from 'buffer';
 import './ProfileView.css';
 import ProfileInfoTableButtons from './ProfileInfoTableButtons';
 import { Tooltip } from '@mui/material';
-import { dateToResponse } from '../../services/ServiceUtils';
+import PhotoPicker from '../../utils/photo-picker/PhotoPicker';
 
 import defIcon from "../../resources/user.svg";
 import banIcon from "../../resources/ban.svg";
+import deletedIcon from "../../resources/skull.svg";
 
 function ProfileView() {
     const { name } = useParams();
     const [user, setUser] = useState({});
     const [state, setState] = useState("stats");
     const [image, setImage] = useState("");
+
     const myID = 1;
 
     useEffect(() => {
@@ -36,14 +38,22 @@ function ProfileView() {
         });
     }, [user]);
 
+    const updateImage = () => {
+        UserService.changeMyImage(image)
+        .then((data) => {
+            console.log(data);
+        }).catch((error) => {
+            console.log(error);
+        });}
+
     return (<>
         <div className='main-container'>
             <div className='cell row1col1 notcollapse'> 
                 <div className='widget user-photo'>
                 {image === "" ? 
                         <img className='profile-image' src={defIcon} alt='user'/>
                     :
-                        <img className='profile-image' src={`data:image/jpeg;base64,${image}`} />
+                        <img className='profile-image' src={image} />
                     }                  
                 </div>
             </div>
@@ -57,7 +67,18 @@ function ProfileView() {
                                 enterDelay={100} 
                                 leaveDelay={100}
                                 >
-                                    <img className='ban-icon' src={banIcon} alt='ban'/>
+                                    <img className='ban-icon' src={banIcon} alt='banned-account'/>
+                            </Tooltip>
+                        </div></>}
+                    {user.isDeleted && <>
+                        <div className='user-deleted-icon'>
+                            <Tooltip 
+                                title={"This user has deleted, his account"} 
+                                followCursor 
+                                enterDelay={100} 
+                                leaveDelay={100}
+                                >
+                                <img className='deleted-icon' src={deletedIcon} alt='deleted-account'/>
                             </Tooltip>
                         </div></>}
                     <div className='user-overview-container'>
@@ -71,7 +92,12 @@ function ProfileView() {
             </div>
             <div className='cell row2col1 notcollapse'>
                 {user.id === myID ? 
-                    <a className='change-photo' href='/'>Change photo</a> 
+                    <PhotoPicker 
+                        triggerButton={<button className='photo-picker-button'>Change photo</button>} 
+                        onSelect={(p) => {
+                            setImage(p); 
+                            updateImage();
+                            console.log(p)}}/>
                     : 
                     <></>
                     }
@@ -83,7 +109,7 @@ function ProfileView() {
             </div>
             <div className='cell row3col1 notcollapse'>
                 <div className='widget user-info'> 
-                    <p>Member since: <span className='user-info-text'>{dateToResponse("2024-04-26T11:13:01.8196733")}</span></p>
+                    <p>Member since: <span className='user-info-text'>{user.memberSince}</span></p>
                     <p>Last seen: <span className='user-info-text'>{user.lastSeen}</span></p>
                     <p>Bots added: <span className='user-info-text'>{user.botsNumber}</span></p>
                     <p>Tournaments created: <span className='user-info-text'>{user.tournamentNumber}</span></p>

diff --git a/src/resources/skull.svg b/src/resources/skull.svg