Automatic upload after adding problem solved

src/components/AdminPage/AdminControlPanel.js

@@ -14,7 +14,7 @@ import ChallengeController from "./ChallengeController";
 
 export default function AdminControlPanel() {
   const [LeaderboardData, setLeaderboardData] = useState([]);
-  const [problemsSolved, setProblemsSolved] = useState();
+  const [problemsSolved, setProblemsSolved] = useState([]);
   const [usersWithProblemsSolved, setUsersWithProblemsSolved] = useState();
 
   useEffect(() => {
@@ -30,14 +30,11 @@ export default function AdminControlPanel() {
       });
 
     axios
-      .get(`${process.env.REACT_APP_BACKEND_URL}api/submission/all`, {
-        headers: {
-          Authorization: localStorage.getItem("token"),
-        },
-      })
+      .get(`${process.env.REACT_APP_BACKEND_URL}api/submission/all`)
       .then((response) => {
         //console.log(response.data.submission_list);
         setProblemsSolved(response.data.submission_list);
+        console.log(response.data.submission_list)
         const users = new Set();
         response.data.submission_list.forEach((problem) => {
           users.add(problem.user.github_username);
@@ -52,22 +49,29 @@ export default function AdminControlPanel() {
   }, [setProblemsSolved]);
 
   const changeBonusPoints = (event, problem) => {
-    const newBonusPoints = event.target?.value 
-    problem.bonus_points = newBonusPoints 
-    axios.put(`${process.env.REACT_APP_BACKEND_URL}/api/submission/${problem.id}`, {"bonus_points": problem.bonus_points}, { headers: { Authorization: localStorage.getItem("token") } })
-    .then((response) => {
-        console.log(response)
-        const problemsSolvedToUpdate = [...problemsSolved]
-        const problemToUpdate = problemsSolvedToUpdate.find(item => item.id === problem.id)
-        problemToUpdate.bonus_points = newBonusPoints
-        setProblemsSolved(problemsSolvedToUpdate)
-    })
-    .catch((err) => console.error(err))
-  }
+    const newBonusPoints = event.target?.value;
+    problem.bonus_points = newBonusPoints;
+    axios
+      .put(
+        `${process.env.REACT_APP_BACKEND_URL}/api/submission/${problem.id}`,
+        { bonus_points: problem.bonus_points },
+        { headers: { Authorization: localStorage.getItem("token") } }
+      )
+      .then((response) => {
+        console.log(response);
+        const problemsSolvedToUpdate = [...problemsSolved];
+        const problemToUpdate = problemsSolvedToUpdate.find(
+          (item) => item.id === problem.id
+        );
+        problemToUpdate.bonus_points = newBonusPoints;
+        setProblemsSolved(problemsSolvedToUpdate);
+      })
+      .catch((err) => console.error(err));
+  };
 
   return (
     <>
-      <ChallengeController />
+      <ChallengeController addProblemsSolved={setProblemsSolved} allProblemsSolved={problemsSolved} />
       <Typography variant="h1" color="secondary.light">
         Users
       </Typography>
@@ -104,7 +108,13 @@ export default function AdminControlPanel() {
                             <InputLabel id="bonus-points">
                               {problem.bonus_points}
                             </InputLabel>
-                            <Select value={problem.bonus_points} label="bonus points" onChange={(event) => changeBonusPoints(event, problem)}>
+                            <Select
+                              value={problem.bonus_points}
+                              label="bonus points"
+                              onChange={(event) =>
+                                changeBonusPoints(event, problem)
+                              }
+                            >
                               <MenuItem value={-5}>-5</MenuItem>
                               <MenuItem value={-4}>-4</MenuItem>
                               <MenuItem value={-3}>-3</MenuItem>

src/components/AdminPage/ChallengeController.js

@@ -1,43 +1,50 @@
-import React, { useEffect, useState } from 'react'
-import axios from 'axios';
-import { Button, FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import {
+  Button,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+} from "@mui/material";
 import Cookies from "js-cookie";
 
-export default function ChallengeController() {
-
-  const [userData, setUserData] = useState()
-  const [problemsData, setProblemsData] = useState()
+export default function ChallengeController({ addProblemsSolved, allProblemsSolved }) {
+  const [userData, setUserData] = useState();
+  const [problemsData, setProblemsData] = useState();
 
   useEffect(() => {
-      const apiUsers = `${process.env.REACT_APP_BACKEND_URL}api/user/all`;
-      axios.get(apiUsers
-            ).then((response) => {
-              setUserData(response.data)
-          })
-          .catch((error) => {
-              console.error("Zio pera")
-          });
-  }, []);  
+    const apiUsers = `${process.env.REACT_APP_BACKEND_URL}api/user/all`;
+    axios
+      .get(apiUsers)
+      .then((response) => {
+        setUserData(response.data);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }, []);
 
   useEffect(() => {
     const apiProblems = `${process.env.REACT_APP_BACKEND_URL}api/problem/all`;
-    axios.get(apiProblems
-        ).then((response) => {
-            setProblemsData(response.data)
-        })
-        .catch((error) => {
-            console.error("Zio pera")
-        });
-  }, []);  
+    axios
+      .get(apiProblems)
+      .then((response) => {
+        setProblemsData(response.data);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }, []);
 
-  let users_nickname, problems_name
-  if(userData && problemsData){
-    users_nickname = userData.user_list.map((item) => item.github_username)
-    problems_name = problemsData.problem_list.map((item) => item.name)
+  let users_nickname, problems_name;
+  if (userData && problemsData) {
+    users_nickname = userData.user_list.map((item) => item.github_username);
+    problems_name = problemsData.problem_list.map((item) => item.name);
   }
 
-  const [selectedUser, setSelectedUser] = React.useState('');
-  const [selectedProblem, setSelectedProblem] = React.useState('');
+  const [selectedUser, setSelectedUser] = React.useState("");
+  const [selectedProblem, setSelectedProblem] = React.useState("");
 
   const handleUserChange = (event) => {
     setSelectedUser(event.target.value);
@@ -47,72 +54,110 @@ export default function ChallengeController() {
     setSelectedProblem(event.target.value);
   };
 
-  const handleChange = (event) => {
-    const problemFound = problemsData.problem_list.find(problem => problem.name === selectedProblem)
-    console.log(problemFound)
-    const userFound = userData.user_list.find(user => user.github_username === selectedUser)
-    console.log(userFound)
+  const handleChange = () => {
+    const problemFound = problemsData.problem_list.find(
+      (problem) => problem.name === selectedProblem
+    );
+    console.log(problemFound);
+    const userFound = userData.user_list.find(
+      (user) => user.github_username === selectedUser
+    );
+    console.log(userFound);
     const token = localStorage.getItem("token");
     const apiSubmitProblem = `${process.env.REACT_APP_BACKEND_URL}api/submission/add`;
     Cookies.remove("authorization");
-    axios.post(apiSubmitProblem, {
-        user: userFound,
-        problem: problemFound, 
-        bonus_points: 0,
-        },{
-            headers: { Authorization: `${token}` },
-        }).then((response) => {
-            console.log(response.data)
-        })
-        .catch((error) => {
-            console.error(error)
-        }); 
+    axios
+      .post(
+        apiSubmitProblem,
+        {
+          user: userFound,
+          problem: problemFound,
+          bonus_points: 0,
+        },
+        {
+          headers: { Authorization: `${token}` },
+        }
+      )
+      .then((response) => {
+        console.log(response.data);
+        addProblemsSolved([
+            ...allProblemsSolved,
+            response.data.result
+        ])
+      })
+      .catch((error) => {
+        console.error(error);
+      });
   };
 
   return (
     <>
-        <FormControl sx={{ m: 4, minWidth: 350, backgroundColor: "initial", border: "2px solid rgb(210, 184, 99)" }}>
-            <InputLabel sx={{color: "#FFF" }} id="demo-simple-select-label">Username</InputLabel>
-            <Select
-                labelId="demo-simple-select-label"
-                id="demo-simple-select"
-                value={selectedUser}
-                label="Users"
-                sx={{color: "#FFF" }}
-                onChange={handleUserChange}
-            >
-                {users_nickname?.map((name, index) => (
-                    <MenuItem key={index} value={name}>
-                    {name}
-                    </MenuItem>
-                ))}
-            </Select>
-        </FormControl>
-        <FormControl sx={{ m: 4, minWidth: 350, backgroundColor: "initial", border: "2px solid rgb(210, 184, 99)" }} >
-            <InputLabel sx={{color: "#FFF" }} id="demo-simple-select-label">Problems</InputLabel>
-            <Select
-                labelId="demo-simple-select-label"
-                id="demo-simple-select"
-                value={selectedProblem}
-                label="Problems"
-                sx={{color: "#FFF" }}
-                onChange={handleProblemChange}
-            >
-                {problems_name?.map((name, index) => (
-                    <MenuItem key={index} value={name}>
-                    {name}
-                    </MenuItem>
-                ))}
-            </Select>
-        </FormControl>
-        <Button 
-            variant="outlined" 
-            size="large" 
-            sx={{ m: 4, minWidth: 350, backgroundColor: "initial", border: "2px solid rgb(210, 184, 99)", minHeight: "1.4375em" }} 
-            onClick={handleChange}
+      <FormControl
+        sx={{
+          m: 4,
+          minWidth: 350,
+          backgroundColor: "initial",
+          border: "2px solid rgb(210, 184, 99)",
+        }}
+      >
+        <InputLabel sx={{ color: "#FFF" }} id="demo-simple-select-label">
+          Username
+        </InputLabel>
+        <Select
+          labelId="demo-simple-select-label"
+          id="demo-simple-select"
+          value={selectedUser}
+          label="Users"
+          sx={{ color: "#FFF" }}
+          onChange={handleUserChange}
+        >
+          {users_nickname?.map((name, index) => (
+            <MenuItem key={index} value={name}>
+              {name}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+      <FormControl
+        sx={{
+          m: 4,
+          minWidth: 350,
+          backgroundColor: "initial",
+          border: "2px solid rgb(210, 184, 99)",
+        }}
+      >
+        <InputLabel sx={{ color: "#FFF" }} id="demo-simple-select-label">
+          Problems
+        </InputLabel>
+        <Select
+          labelId="demo-simple-select-label"
+          id="demo-simple-select"
+          value={selectedProblem}
+          label="Problems"
+          sx={{ color: "#FFF" }}
+          onChange={handleProblemChange}
         >
-            Apply
-        </Button>
+          {problems_name?.map((name, index) => (
+            <MenuItem key={index} value={name}>
+              {name}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+      <Button
+        variant="outlined"
+        size="large"
+        sx={{
+          m: 4,
+          minWidth: 350,
+          backgroundColor: "initial",
+          border: "2px solid rgb(210, 184, 99)",
+          minHeight: "1.4375em",
+        }}
+        onClick={handleChange}
+      >
+        Apply
+      </Button>
     </>
-  )
+  );
 }

src/components/Layout.js

@@ -164,7 +164,6 @@ export default function Layout() {
                         Profile
                       </Typography>
                     </Button>
-
                   </Box>
                 </Box>
               </Box>

src/components/RankingPage/RankingTable.js

@@ -27,7 +27,7 @@ export default function RankingTable() {
                 setLeaderboardData(response.data)
             })
             .catch((error) => {
-                console.error("Zio pera")
+                console.error(error)
             });
     }, []);