Admin edit fixture page added

client/src/App.js

@@ -12,6 +12,8 @@ import 'react-toastify/dist/ReactToastify.css';
 import { EditScreen } from './Screens/EditScreen'
 import { AddMatchScreen } from './Screens/AddMatchScreen'
 import { FixtureScreen } from './Screens/FixtureScreen'
+import {EditFixtureScreen} from './Screens/EditFixtureScreen'
+import {EditMatchScreen} from './Screens/EditMatchScreen'
 
 function App() {
   const[user,setUser] = useState(null);
@@ -28,6 +30,8 @@ function App() {
             <Route path="/adminpanel" element={<AdminScreen/>} />
             <Route path="/addmatch" element={<AddMatchScreen/>} />
             <Route path="/matches" element={<FixtureScreen/>} />
+            <Route path="/matches/editfixture" element={<EditFixtureScreen/>} />
+            <Route path="/matches/editfixture/:id" element={<EditMatchScreen/>} />
           </Routes>
         </Container>
       </main>

client/src/Screens/AdminScreen.js

@@ -18,6 +18,7 @@ export const AdminScreen = () => {
   return (
     <Container>
       <a href="/addmatch" className="btn btn-info" role="button">Add Match</a>
+      <a href="/matches/editfixture" className="btn btn-info" role="button">Edit Fixture</a>
     </Container>
   );
 }

client/src/Screens/EditFixtureScreen.js

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+import { Link } from 'react-router-dom'
+import '../fixture.css'
+import Button from 'react-bootstrap/Button';
+
+
+
+
+
+export const EditFixtureScreen = ({}) => {
+
+    const [matches, setMatches] = useState([ ])
+
+
+    useEffect(() => {
+        axios.get('http://localhost:5000/matches')
+        .then(response => setMatches(response.data))
+    }, [])
+
+
+
+    return (
+        <div>
+            <ul style={{listStyleType:"none"}}>
+                {matches.map(match => {
+                    return (
+                    <li>
+                        <span class="head">
+                            {match.homeTeam} Vs {match.awayTeam}
+                            <span class="referee">{match.referee}</span>
+                            <span class="date">{match.date}</span>
+                        </span>
+                        <div class="goals-result">
+                            <a>{match.homeTeam}</a>
+                            <span class="goals">{match.score}</span>
+                            <a>{match.awayTeam}</a>
+                        </div>
+                        <a key={match._id}><Link to={`${match._id}`}>EDIT</Link></a>                       
+                    </li>
+                    )
+                })}
+            </ul>
+        </div>
+    )
+}
+
+
+
+
+export default EditFixtureScreen;

client/src/Screens/EditMatchScreen.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import axios from 'axios';
+import Button from 'react-bootstrap/Button';
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+
+export const EditMatchScreen = () => {
+
+    const {id} = useParams();
+
+    const [newmatch, setMatch] = useState({
+        score: "",
+    })
+
+    useEffect(() => {
+        axios.get(`http://localhost:5000/matches/editfixture/${id}`)
+        .then(response => setMatch(response.data))
+    }, [])
+
+    const matchUpdate = () => {
+        axios.put(`http://localhost:5000/matches/editfixture/${id}`, newmatch)
+        .then((match) => console.log(match))
+    }
+
+    const matchDelete = () => {
+        axios.delete(`http://localhost:5000/matches/editfixture/${id}`)
+        .then((res) => console.log(res.status))
+    }
+
+    const handleChange = (e) => {
+        const { name, value } = e.target
+        setMatch(oldMatch => {
+            return {
+                ...oldMatch,
+                [name]: value
+            }
+        })
+    }
+  return (
+    <div>
+        <label>Score: </label>
+        <input type="text" name="score" value={newmatch.score} required onChange={handleChange}/><br/>
+
+        <Button className='btn btn-warning' onClick={matchUpdate}>Update Match</Button>
+        <Button className='btn btn-danger' onClick={matchDelete}>Delete Match</Button>
+
+    </div>
+  );
+}
+
+export default EditMatchScreen;

server/routers/matchRouter.js

@@ -13,5 +13,23 @@ router.get('/', (req, res) => {
     .catch(err => res.status(400).json('Error: '+err))
 })
 
+router.get('/editfixture/:id', (req, res) => {
+    Match.findById(req.params.id)
+    .then(matches => res.json(matches))
+    .catch(err => res.json('Error: +err'))
+})
+
+router.delete("/editfixture/:id", async (req,res) => {
+    Match.findByIdAndDelete(req.params.id).then(() => res.json('Match deleted'))
+    .catch((err=>res.status(400).json("Error: "+err)))
+})
+
+//update user
+router.put("/editfixture/:id", async(req,res)=>{
+    Match.findByIdAndUpdate(req.params.id,{$set:req.body})
+    .then(() => res.json('Match updated'))
+    .catch(err=>res.status(400).json('Error: '+err))
+})
+
 
 export default router;