FIX: admin part with parkour and user by orga part.1

src/API/Journey.js

@@ -28,6 +28,20 @@ export const getOrganisationJourneys = async (token, id) => {
   }
 };
 
+export const getOrganisationJourneysByAdmin = async (token, id) => {
+  const URL = API_URL + `/api/parkours/admin/orga/${id}`;
+  const params = {
+    headers: { Authorization: `Bearer ${token}` },
+  };
+
+  try {
+    const response = await axios.get(URL, params);
+    return response.data;
+  } catch (e) {
+    console.log(e);
+  }
+};
+
 export const addJourneyToDB = async (journey, organisationId) => {
   const URL = API_URL + "/api/parkours";
   const token = localStorage.getItem("token");
@@ -85,12 +99,29 @@ export const deleteJourneyToDB = async (journey, id) => {
   }
 };
 
+export const deleteJourneyByAdminToDB = async (journey, id) => {
+  const URL = API_URL + `/api/parkours/admin/${id}`;
+  const token = localStorage.getItem("token");
+
+  try {
+    const response = await axios.delete(URL, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+  } catch (e) {
+    throw e;
+  }
+};
+
 const JourneyService = {
   getJourneys,
   getOrganisationJourneys,
+  getOrganisationJourneysByAdmin,
   addJourneyToDB,
   editJourneyToDB,
   deleteJourneyToDB,
+  deleteJourneyByAdminToDB,
 };
 
 export default JourneyService;

src/App.js

@@ -27,11 +27,12 @@ import GuideModal from "./component/guide/GuideModal";
 import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
 import { Margin } from "@mui/icons-material";
 import AdminContact from "./view/Admin/Contact.js";
+import AdminUsers from "./view/Admin/Users";
 import AdminNewsletter from "./view/Admin/Newsletter.js";
 import AdminOrganisations from "./view/Admin/Organisations.js";
 import AdminOrganisation from "./view/Admin/Organisation.js";
 import AdminOrganisationMarkers from "./view/Admin/Markers.js";
-import AdminOrganisationUsers from "./view/Admin/Users.js";
+import AdminOrganisationUsers from "./view/Admin/OrganisationUsers.js";
 import AdminOrganisationJourneys from "./view/Admin/Journeys.js";
 import AdminSuggestion from "./view/Admin/Suggestion.js";
 
@@ -71,6 +72,7 @@ const AdminRouter = () => {
     <Routes>
       <Route path="/" element={<Admin/>} />
       <Route path="/organisations/*" element={<OrganisationsRouter/>} />
+      <Route path="/users" element={<AdminUsers/>} />
       <Route path="/contact" element={<AdminContact/>} />
       <Route path="/newsletter" element={<AdminNewsletter/>} />
       <Route path="/suggestion" element={<AdminSuggestion/>} />

src/component/admin/MarkerTable.js

@@ -60,12 +60,12 @@ export const AdminMarkerTable = ({ rows, editMarker, deleteMarker }) => {
                   <TableCell component="th" scope="row">
                     {id}
                   </TableCell>
-                  <TableCell align="right">{row.name}</TableCell>
-                  <TableCell align="right">{row.description}</TableCell>
-                  <TableCell align="right">{row.longitude}</TableCell>
-                  <TableCell align="right">{row.latitude}</TableCell>
-                  <TableCell align="right">{"Not Ready"}</TableCell>
-                  <TableCell align="right">{"Not Ready"}</TableCell>
+                  <TableCell align="right">{row.node.name}</TableCell>
+                  <TableCell align="right">{row.node.description}</TableCell>
+                  <TableCell align="right">{row.node.longitude}</TableCell>
+                  <TableCell align="right">{row.node.latitude}</TableCell>
+                  <TableCell align="right">{row.node.status}</TableCell>
+                  <TableCell align="right">{row.order}</TableCell>
                   <TableCell align="right">
                     <IconButton
                       onClick={() => {

src/component/admin/SideBar.js

@@ -38,6 +38,27 @@ export const AdminSideBar = (props) => {
       >
         Organisations
       </Button>
+      <Button
+        style={
+          props.option === "users"
+            ? {
+                width: 300,
+                height: 50,
+                justifyContent: "flex-start",
+                color: theme.palette.button.main,
+              }
+            : {
+                width: 300,
+                height: 50,
+                justifyContent: "flex-start",
+                color: theme.palette.greyText,
+              }
+        }
+        title="Users"
+        onClick={() => navigate("/admin/users")}
+      >
+        Users
+      </Button>
       <Button
         style={
           props.option === "contact"

src/redux-action/JourneyAction.js

@@ -1,4 +1,4 @@
-import JourneyService, { getJourneys, addJourneyToDB, editJourneyToDB, deleteJourneyToDB } from "../API/Journey";
+import JourneyService from "../API/Journey";
 import { createAsyncThunk } from "@reduxjs/toolkit"
 
 
@@ -27,6 +27,18 @@ export const requestOrganisationJourneys = createAsyncThunk(
   }
 );
 
+export const requestOrganisationJourneysByAdmin = createAsyncThunk(
+  'journeysOrganisationAdmin/get',
+  async (params) => {
+    try { 
+      const result = await JourneyService.getOrganisationJourneysByAdmin(params.token, params.organisationId);
+      return result;
+    } catch (error) {
+      console.error(error);
+    }
+  }
+);
+
 export const addJourney = createAsyncThunk(
   'journey/post',
   async (params, { getState }) => {
@@ -71,6 +83,22 @@ export const deleteJourney = createAsyncThunk(
       journeys.pop(journey); 
       return (journeys);
 
+    } catch (error) {
+      console.error(error);
+    }
+  }
+);
+
+export const deleteJourneyByAdmin = createAsyncThunk(
+  'journeyAdmin/delete',
+  async (journey, { getState }) => {
+    const states = getState();
+    const journeys = [].concat(states.rootReducer.journeyReducer.journeys);
+    try { 
+      await JourneyService.deleteJourneyByAdminToDB(journey, journey.uuid);
+      journeys.pop(journey); 
+      return (journeys);
+
     } catch (error) {
       console.error(error);
     }

src/redux-reducer/JourneyReducer.js

@@ -1,5 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { requestJourneys, requestOrganisationJourneys, addJourney, editJourney, deleteJourney } from "../redux-action/JourneyAction";
+import { requestJourneys, requestOrganisationJourneys, addJourney, editJourney, deleteJourney, requestOrganisationJourneysByAdmin, deleteJourneyByAdmin } from "../redux-action/JourneyAction";
 const initialState = {
   journeys: [],
   isLoading: false
@@ -30,12 +30,25 @@ const journeySlice = createSlice({
         builder.addCase(requestOrganisationJourneys.rejected, (state) => {
           state.isLoading = false
         })
+        builder.addCase(requestOrganisationJourneysByAdmin.pending, (state) => {
+          state.isLoading = true
+        })
+        builder.addCase(requestOrganisationJourneysByAdmin.fulfilled, (state, action) => {
+          state.isLoading = false
+          state.journeys = action.payload
+        })
+        builder.addCase(requestOrganisationJourneysByAdmin.rejected, (state) => {
+          state.isLoading = false
+        })
         builder.addCase(addJourney.fulfilled, (state, action) => {
           state.journeys = action.payload
         })
         builder.addCase(deleteJourney.fulfilled, (state, action) => {
           state.journeys = action.payload
         })
+        builder.addCase(deleteJourneyByAdmin.fulfilled, (state, action) => {
+          state.journeys = action.payload
+        })
         builder.addCase(editJourney.fulfilled, (state, action) => {
           state.journeys = action.payload
         })

src/view/Admin/Journeys.js

@@ -1,31 +1,68 @@
 import NavBar from "../../component/NavBar";
 import FooterComponent from "../../component/Footer";
-import {  Grid, Typography, useTheme } from "@mui/material";
+import { Grid, Typography, useTheme } from "@mui/material";
 import * as React from "react";
 import { useState, useEffect } from "react";
-import "../../styles/view/Dashboard.css";
+import "../../styles/view/Dashboard.css"
+
 import { JourneyTable } from "../../component/JourneyTable";
+import { Button, Container, IconButton, Input } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import AddIcon from "@mui/icons-material/Add";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  requestJourneys,
+  addJourney,
+  editJourney,
+  deleteJourney,
+  requestOrganisationJourneys,
+  requestOrganisationJourneysByAdmin
+} from "../../redux-action/JourneyAction";
+import LoadingSpinner from "../../animation/LoadingSpinner";
+import { JourneyModal } from "../../component/JourneyModal"; 
 import { AdminSideBar } from "../../component/admin/SideBar";
 
 export default function AdminOrganisationJourneys() {
-  const theme = useTheme();
-  const journeyStates = [
-    { id: "0", name: "Art-Track" },
-    { id: "1", name: "Quick-Track" },
-    { id: "2", name: "London-Downtown" },
-  ]; //useSelector((state) => state.rootReducer.markerReducer);
-  const [journeys, setJourneys] = useState([]);
-  const [IsSetup, setIsSetup] = useState(false);
-
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const journeyStates = useSelector(
+    (state) => state.rootReducer.journeyReducer
+  );
   const token = localStorage.getItem("token");
+  const params = useParams();
+  const organisationId = localStorage.getItem("organisationId");
+  const [journeys, setJourneys] = useState([]);
+  const [rowToEdit, setRowToEdit] = useState(null);
+  const theme = useTheme();
+  const { t } = useTranslation();
 
   useEffect(() => {
-    const init = async () => {
-      setJourneys(journeyStates);
-      setIsSetup(true);
-    };
-    if (!IsSetup) init();
-  }, [IsSetup, token]);
+    if (organisationId !== "null" && token) {
+      dispatch(requestOrganisationJourneysByAdmin({ token: token, organisationId: params.id }));
+      setJourneys(journeyStates.journeys);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (journeyStates.journeys !== journeys) {
+      setJourneys(journeyStates.journeys);
+    }
+  }, [journeyStates.journeys]);
+
+  const deleteRow = (targetId) => {
+    //const tmpJourneys = journeys.filter((journey) => journey.id !== targetId);
+    //setJourneys(tmpJourneys);
+    //console.log(journeyStates.journeys, targetId)
+    dispatch(deleteJourney(journeyStates.journeys[targetId]));
+  };
+
+
+
+  const showRow = (id) => {
+    navigate(`/admin/organisations/${params.id}/journeys/${id}/markers`);
+  };
 
   return (
     <>
@@ -44,9 +81,13 @@ export default function AdminOrganisationJourneys() {
           {"Organisation"}
         </Typography>
 
-        <Grid style={{display: 'flex', flexDirection: 'row', padding: 10}}>
-          <AdminSideBar option={'organisation'}/>
-          <JourneyTable rows={journeys} /> 
+        <Grid style={{ display: "flex", flexDirection: "row", padding: 10 }}>
+          <AdminSideBar option={"organisation"} />
+          <JourneyTable
+            rows={journeys}
+            showRow={showRow}
+            deleteRow={deleteRow}
+          />
         </Grid>
       </Grid>
       <FooterComponent />

src/view/Admin/Markers.js

@@ -8,18 +8,23 @@ import axios from "axios";
 import { API_URL } from "../../config/API";
 import { AdminMarkerTable } from "../../component/admin/MarkerTable";
 import { AdminSideBar } from "../../component/admin/SideBar";
+import { useParams } from "react-router-dom";
 
 export default function AdminOrganisationMarkers() {
   const theme = useTheme();
   const [IsSetup, setIsSetup] = useState(false);
   const [users, setUsers] = useState([]);
   const [markers, setMarkers] = useState([]);
   const token = localStorage.getItem("token");
+  const params = useParams();
 
+  console.log(params)
   useEffect(() => {
     const init = async () => {
 
-      let markerRes = await axios.get(`${API_URL}/api/nodes/all`);
+      let markerRes = await axios.get(`${API_URL}/api/nodes/admin/parkour/${params.id}`, {
+        headers:  { Authorization: `Bearer ${token}` },
+      });
 
       setMarkers(markerRes.data);
       setIsSetup(true);

src/view/Admin/Organisation.js

@@ -31,16 +31,17 @@ export default function AdminOrganisation() {
   useEffect(() => {
     const init = async () => {
       try {
-        let userRes = await axios.get(`${API_URL}/api/accounts/admin`, {
+        let userRes = await axios.get(`${API_URL}/api/organisations/${params.id}`, {
           headers: {
             Authorization: `Bearer ${token}`,
           },
         });
 
         setUsers(userRes.data);
       } catch (e) {
-        logout();
-        window.location.replace("/");
+        console.log(e)
+        //logout();
+        //window.location.replace("/");
       }
 
       let orgRes = await axios.get(`${API_URL}/api/organisations`, {
@@ -49,12 +50,30 @@ export default function AdminOrganisation() {
         },
       });
 
-      setJourneys(journeyStates);
+
+      try {
+        let JourneyRes = await axios.get(`${API_URL}/api/parkours/admin/orga/${params.id}`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          }
+        });
+        setJourneys(JourneyRes.data)
+      } catch (e) {
+        console.log(e)
+      }
+
+      await axios.get(`${API_URL}/api/organisations`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }); 
+
       setOrganisations(orgRes.data);
       setIsSetup(true);
     };
     if (!IsSetup) init();
-  }, [users, organisations, IsSetup, token]);
+  }, [users, organisations, journeys, IsSetup, token]);
+  console.log(journeys)
 
   return (
     <>