Added session-data to cache data from api to enhance loading time and stress on API

webstillas/src/App.js

@@ -10,7 +10,6 @@ import PreView from "./components/projects/elements/preView";
 
 
 function App() {
-    const queryClient = new QueryClient();
 
     return (
           <div className={"maintodo"}>

webstillas/src/components/projects/elements/preView.js

@@ -21,13 +21,12 @@ class PreView extends React.Component{
     async componentDidMount() {
         const path = this.getProjectID()
         console.log(path)
-        const url ="http://localhost:8080/exchange/v1/diag?limit=heipågeddd" ;
+        const url ="http://10.212.138.205:8080/stillastracking/v1/api/project/?id=" + path;
         fetch(url)
             .then(res => res.json())
             .then(
                 (result) => {
-                    console.log(result)
-
+                    sessionStorage.setItem('project', (result))
                     this.setState({
                         isLoaded: true,
                         projectData: result
@@ -44,10 +43,13 @@ class PreView extends React.Component{
     }
 
     render() {
+        const {projectData} = this.state
+        {console.log(projectData)}
         return(
             <div className="container">
                 <div>
                     <h1>Hello World</h1>
+                    <div>{JSON.stringify(projectData)}</div>
                 </div>
 
             </div>

webstillas/src/components/projects/projects.js

 import React from "react";
 import "./projects.css"
 import CardElement from './elements/card'
-import { Routes, Route} from "react-router-dom";
+import {Route, Routes} from "react-router-dom";
 
 
 /**
@@ -25,14 +25,17 @@ class Projects extends React.Component {
 
 
     async componentDidMount() {
+        if (sessionStorage.getItem('allProjects') == null){
             const url ="http://10.212.138.205:8080/stillastracking/v1/api/project/";
             fetch(url)
                 .then(res => res.json())
                 .then(
                     (result) => {
+                        sessionStorage.setItem('allProjects',JSON.stringify(result))
+                        console.log('API Kjores')
                         this.setState({
                             isLoaded: true,
-                        projectData: result
+                            projectData: result,
                         });
                     },
                     // Note: it's important to handle errors here
@@ -45,6 +48,12 @@ class Projects extends React.Component {
                         });
                     }
                 )
+        }else{
+           console.log('API Kjøres ikke')
+            this.setState({
+                isLoaded: true,
+            });
+        }
     };
 
 
@@ -97,15 +106,26 @@ class Projects extends React.Component {
 
 
     render() {
-
         const {projectData, fromSize, toSize, fromDate, toDate, searchName ,selectedOption } = this.state;
+
+        let allProjects
+       if (sessionStorage.getItem('allProjects') != null){
+             allProjects = sessionStorage.getItem('allProjects')
+            console.log('From Storage')
+           allProjects = (JSON.parse(allProjects))
+        }else {
+            console.log('From API')
+           allProjects = projectData
+        }
+
         return(
             <div className={"main-project-window"}>
                 {this.SideBarFunction()}
                 <div className={"grid-container"}>
 
 
-                    {projectData.filter(data => (data.projectName.toLowerCase()).includes(searchName.toLowerCase()))
+
+                    {allProjects.filter(data => (data.projectName.toLowerCase()).includes(searchName.toLowerCase()))
                         .filter(data => data.size > fromSize)
                         //todo add date filter
                         .filter(data => data.size < toSize)

webstillas/src/components/scaffolding/scaffolding.js

@@ -19,11 +19,12 @@ class Scaffolding extends React.Component {
     }
 
     async componentDidMount() {
-        const urlScaffolding ="http://10.212.138.205:8080/stillastracking/v1/api/unit/";
+        const urlScaffolding ="http://10.212.138.205:8080/stillastracking/v1/api/unit";
         fetch(urlScaffolding)
             .then(res => res.json())
             .then(
                 (result) => {
+                    sessionStorage.setItem('allScaffolding',JSON.stringify(result))
                     this.setState({
                         isLoaded1: true,
                         scaffolding: result
@@ -44,6 +45,7 @@ class Scaffolding extends React.Component {
             .then(res => res.json())
             .then(
                 (result) => {
+                    sessionStorage.setItem('fromStorage',JSON.stringify(result))
                     this.setState({
                         isLoaded2: true,
                         storage: result
@@ -63,7 +65,6 @@ class Scaffolding extends React.Component {
 
     countObjects(arr, key){
         let arr2 = [];
-
         arr.forEach((x)=>{
             // Checking if there is any object in arr2
             // which contains the key value
@@ -120,10 +121,37 @@ class Scaffolding extends React.Component {
 
   render() {
       const {scaffolding, storage, isLoaded1,isLoaded2 } = this.state;
-      const objectArr = this.countObjects(scaffolding, "type")
-      const scaffoldingObject = this.scaffoldingAndStorage(objectArr, storage)
-      const result = Object.keys(scaffoldingObject).map((key) => scaffoldingObject[key]);
 
+      //todo add session storage
+      let scaffoldingArray
+      if (sessionStorage.getItem('allScaffolding') != null){
+          const scaffold = sessionStorage.getItem('allScaffolding')
+          console.log('From Storage')
+          scaffoldingArray = (JSON.parse(scaffold))
+      }else {
+
+          console.log('From API')
+          scaffoldingArray = scaffolding
+      }
+
+      const objectArr = this.countObjects(scaffoldingArray, "type")
+
+
+      //todo add session storage
+      let storageArray
+      if (sessionStorage.getItem('fromStorage') != null){
+          const storage = sessionStorage.getItem('fromStorage')
+          //console.log('From Storage')
+          storageArray = (JSON.parse(storage))
+      }else {
+          console.log('From API')
+          storageArray = storage
+      }
+      const scaffoldingObject = this.scaffoldingAndStorage(objectArr, storageArray)
+
+
+
+      const result = Object.keys(scaffoldingObject).map((key) => scaffoldingObject[key]);
       if (!isLoaded1 && !isLoaded2) {
           return <h1>Is Loading Data....</h1>
       } else {