items/frontend/package.json

@@ -13,8 +13,9 @@
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
         "cross-env": "^7.0.3",
-        "cypress": "^8.6.0",
-        "start-server-and-test": "^1.14.0"
+        "cypress": "9.0.0",
+        "start-server-and-test": "^1.14.0",
+        "typescript": "^4.1.2"
     },
     "dependencies": {
         "@emotion/react": "^11.4.1",
@@ -22,11 +23,12 @@
         "@mui/icons-material": "^5.0.3",
         "@mui/material": "^5.0.3",
         "@mui/styles": "^5.0.1",
+        "history": "5",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-json-view": "^1.21.3",
+        "react-router-dom": "6",
         "react-scripts": "4.0.3",
-        "typescript": "^4.1.2",
         "web-vitals": "^1.0.1",
         "zustand": "^3.5.13"
     },
@@ -59,8 +61,13 @@
         ]
     },
     "nyc": {
-        "include":["src/**/*.ts", "src/**/*.tsx"],
-        "exclude": ["src/reportWebVitals.ts"],
+        "include": [
+            "src/**/*.ts",
+            "src/**/*.tsx"
+        ],
+        "exclude": [
+            "src/reportWebVitals.ts"
+        ],
         "excludeAfterRemap": true
     }
 }

items/frontend/src/index.tsx

@@ -5,7 +5,7 @@ import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
     <React.StrictMode>
-    <App />
+        <App/>
     </React.StrictMode>,
     document.getElementById('root')
 );

items/frontend/src/pages/InteractiveArea.tsx

@@ -0,0 +1,26 @@
+import {Box} from '@mui/material'
+import {NavigationBreadcrumb} from './mainPageComponents/NavigationBreadcrumb'
+import {SearchArea} from './mainPageComponents/SearchArea'
+import {makeStyles} from "@mui/styles";
+import React from "react";
+
+const useStyles = makeStyles(() => ({
+    searchContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexGrow: 1,
+        padding: '2vh 2vw 1vh 2vw'
+    }
+}))
+
+export const InteractiveArea = () => {
+    const classes = useStyles();
+    return (
+        <>
+            <NavigationBreadcrumb/>
+            <Box className={classes.searchContainer}>
+                <SearchArea/>
+            </Box>
+        </>
+    )
+}

items/frontend/src/pages/MainPage.tsx

@@ -1,11 +1,13 @@
-import {Box, Theme} from '@mui/material'
+import {Box} from '@mui/material'
 import {Footer} from '../components/Footer'
 import {Header} from '../components/Header'
-import {NavigationBreadcrumb} from './mainPageComponents/NavigationBreadcrumb'
-import {SearchArea} from './mainPageComponents/SearchArea'
 import {makeStyles} from "@mui/styles";
+import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
+import React from "react";
+import {InteractiveArea} from "./InteractiveArea";
+import {PageNotFound} from "./PageNotFound";
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(() => ({
     container: {
         background: 'background.default',
         display: 'flex',
@@ -13,12 +15,6 @@ const useStyles = makeStyles((theme: Theme) => ({
         flexGrow: 1,
         height: '100vh',
         maxheight: '100vh',
-    },
-    searchContainer: {
-        display: 'flex',
-        flexDirection: 'row',
-        flexGrow: 1,
-        padding: '2vh 2vw 1vh 2vw'
     }
 }))
 
@@ -28,10 +24,15 @@ export const MainPage = () => {
         <>
             <Box className={classes.container}>
                 <Header/>
-                <NavigationBreadcrumb/>
-                <Box className={classes.searchContainer}>
-                    <SearchArea/>
-                </Box>
+                <BrowserRouter>
+                    <Routes>
+                        <Route path="/search" element={<InteractiveArea/>}>
+                            <Route path=":id" element={<InteractiveArea/>}/>
+                        </Route>
+                        <Route path="/" element={<Navigate replace to="/search"/>}/>
+                        <Route path="*" element={<PageNotFound/>}/>
+                    </Routes>
+                </BrowserRouter>
                 <Footer/>
             </Box>
         </>

items/frontend/src/pages/PageNotFound.tsx

@@ -0,0 +1,44 @@
+import {Box, Theme, Typography} from '@mui/material'
+import {NavigationBreadcrumb} from './mainPageComponents/NavigationBreadcrumb'
+import {makeStyles} from "@mui/styles";
+import React from "react";
+
+const useStyles = makeStyles((theme: Theme) => ({
+    searchContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexGrow: 1,
+        padding: '2vh 2vw 1vh 2vw'
+    },
+    notFoundAreaHolder: {
+        display: 'flex',
+        flexGrow: 1,
+        flexDirection: 'column',
+        background: theme.palette.background.paper,
+        padding: '2vh 2vw 2vh 2vw',
+    },
+    notFoundContainer: {
+        display: 'flex',
+        flexGrow: 1,
+        flexDirection: 'column',
+        width: "100%",
+        alignItems: "center",
+        paddingTop: "10vh"
+    },
+}))
+
+export const PageNotFound = () => {
+    const classes = useStyles();
+    return (
+        <>
+            <NavigationBreadcrumb/>
+            <Box className={classes.searchContainer}>
+                <Box className={classes.notFoundAreaHolder}>
+                    <Box className={classes.notFoundContainer}>
+                        <Typography id={'not-found-message'} variant={"h3"}>This page does not exist !</Typography>
+                    </Box>
+                </Box>
+            </Box>
+        </>
+    )
+}

items/frontend/src/pages/mainPageComponents/SearchArea.tsx

@@ -1,21 +1,12 @@
-import { SyntheticEvent, useCallback, useEffect, useState } from 'react'
-import {
-  Autocomplete,
-  Box,
-  CircularProgress,
-  Theme,
-  Typography,
-} from '@mui/material'
-import { makeStyles } from '@mui/styles'
+import {SyntheticEvent, useCallback, useEffect, useState} from 'react'
+import {Autocomplete, Box, CircularProgress, Theme, Typography,} from '@mui/material'
+import {makeStyles} from '@mui/styles'
 import TextField from '@mui/material/TextField'
 import ReactJson from 'react-json-view'
-import {
-  getItem,
-  getItemHierarchy,
-  searchItem,
-} from '../../dataaccess/ItemBackend'
-import { ItemOption } from '../../dto/ItemOption'
-import { useGlobalState } from '../../state/GlobalState'
+import {getItem, getItemHierarchy, searchItem,} from '../../dataaccess/ItemBackend'
+import {ItemOption} from '../../dto/ItemOption'
+import {useGlobalState} from '../../state/GlobalState'
+import {useNavigate, useParams} from "react-router-dom";
 
 interface IItemOption {
     id?: string
@@ -44,6 +35,8 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 export const SearchArea = () => {
     const classes = useStyles()
+    const params = useParams();
+    const navigate = useNavigate();
     const preferedLocale = useGlobalState((state) => state.preferedLocale)
     const preferedJsonViewerTheme = useGlobalState(
         useCallback((state) => state.preferedJsonViewerTheme, []),
@@ -61,7 +54,7 @@ export const SearchArea = () => {
     const [isbusy, setIsBusy] = useState<boolean>(false)
     const searchThreshold = 3
 
-  const handleNameInput = async (input: string) => {
+    const handleNameInput = useCallback(async (input: string) => {
         const searchResults = await searchItem(input, preferedLocale)
         const options = searchResults?.map((res) => ({
             id: res.item._id,
@@ -69,7 +62,7 @@ export const SearchArea = () => {
             shortName: JSON.stringify(res.locale.ShortName)
         }))
         setSelecteOptions(options ? options : [])
-  }
+    }, [preferedLocale])
 
     const handleIDInput = useCallback(async (input: string) => {
         const itemJson = await getItem(input, preferedLocale)
@@ -99,13 +92,19 @@ export const SearchArea = () => {
 
     useEffect(() => initHierarchy(), [initHierarchy])
 
+    useEffect(()=>{
+        if (selectedItem){
+            navigate(`/search/${selectedItem.item._id}`)
+        }
+    },[selectedItem, navigate])
+
     useEffect(() => {
         if (searchInputState && searchInputState.match(/([a-z0-9]{24})/)) {
             handleIDInput(searchInputState)
         }
     }, [handleIDInput, searchInputState])
 
-  const handleInput = async (input: string) => {
+    const handleInput = useCallback(async (input: string) => {
         if (!input || input.length < searchThreshold || isbusy) {
             setSelectedItem(undefined)
             setSelecteOptions([])
@@ -118,14 +117,23 @@ export const SearchArea = () => {
         else await handleNameInput(input)
 
         setIsBusy(false)
+    }, [handleIDInput, handleNameInput, isbusy, setSelectedItem])
+
+    useEffect(() => {
+        if (!searchInputState && params.id) {
+            const newId = params.id.trim();
+            console.log(newId);
+            setSearchInput(newId);
+            (async () => await handleInput(newId))();
         }
+    }, [params, searchInputState, setSearchInput, handleInput, navigate])
 
     const formatDisplayItems = () => {
         // If loading
-    if (isbusy) return <CircularProgress size={100} />
+        if (isbusy) return <CircularProgress size={100}/>
 
         // If finished loading
-    if (selectedItem){
+        if (selectedItem) {
             return (
                 <ReactJson
                     src={selectedItem}
@@ -138,8 +146,7 @@ export const SearchArea = () => {
                     }}
                 />
             )
-    }
-    else return <Typography id='search-no-data'>No data to display</Typography>
+        } else return <Typography id='search-no-data'>No data to display</Typography>
     }
 
     const findOptionValue = (option: ItemOption, value: ItemOption): boolean => {
@@ -153,7 +160,7 @@ export const SearchArea = () => {
             <Autocomplete
                 id='search-autocomplete'
                 options={selectOptions.map((elt) => ({name: elt.name, shortName: elt.shortName, id: elt.id}))}
-        getOptionLabel={(option)=> option.name ? option.name : option.id}
+                getOptionLabel={(option) => option.name ? option.name : option.id}
                 isOptionEqualToValue={(option, value) => findOptionValue(option, value)}
                 open={!isbusy && searchInputState.length >= searchThreshold && (searchInputState !== selectedItem?.locale.Name && searchInputState !== selectedItem?.item._name)}
                 className={classes.autocomplete}
@@ -164,7 +171,7 @@ export const SearchArea = () => {
                     setSearchInput(newValue)
                     await handleInput(newValue.trim())
                 }}
-        value={(()=>{
+                value={(() => {
                     const selectedOption = selectOptions.find(elt => elt.id === searchInputState || elt.name === searchInputState);
                     return selectedOption ? selectedOption : null;
                 })()}
@@ -176,13 +183,13 @@ export const SearchArea = () => {
                         if (selectedOption) await handleIDInput(selectedOption.id)
                     }
                 }}
-        renderInput={(params) =>(
-          <TextField {...params} label="Search by name or ID" />
+                renderInput={(params) => (
+                    <TextField {...params} label="Search by name or ID"/>
                 )}
-        renderOption={(props, option, state) => (
+                renderOption={(props, option ) => (
                     <li {...props} key={option.id}><Typography>{option.name}</Typography></li>
                 )}
-        filterOptions={(options, state) => options.filter(elt =>{
+                filterOptions={(options, state) => options.filter(elt => {
                     return (elt.name?.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase())
                         || elt.id?.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase())
                         || elt.shortName?.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase()))

items/frontend/yarn.lock

@@ -1282,6 +1282,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.7.6":
+  version "7.16.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
+  integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.15.4", "@babel/template@^7.3.3", "@babel/template@^7.4.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.15.4.tgz#51898d35dcf3faa670c4ee6afcfd517ee139f194"
@@ -1385,10 +1392,10 @@
     debug "4.2.0"
     find-yarn-workspace-root "^2.0.0"
 
-"@cypress/request@^2.88.6":
-  version "2.88.6"
-  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.6.tgz#a970dd675befc6bdf8a8921576c01f51cc5798e9"
-  integrity sha512-z0UxBE/+qaESAHY9p9sM2h8Y4XqtsbDCt0/DPOrqA/RZgKi4PkxdpXyK4wCCnSk1xHqWHZZAE+gV6aDAR6+caQ==
+"@cypress/request@^2.88.7":
+  version "2.88.7"
+  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.7.tgz#386d960ab845a96953723348088525d5a75aaac4"
+  integrity sha512-FTULIP2rnDJvZDT9t6B4nSfYR40ue19tVmv3wUcY05R9/FPCoMl1nAPJkzWzBCo7ltVn5ThQTbxiMoGBN7k0ig==
   dependencies:
     aws-sign2 "~0.7.0"
     aws4 "^1.8.0"
@@ -4876,12 +4883,12 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
-cypress@^8.6.0:
-  version "8.6.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.6.0.tgz#8d02fa58878b37cfc45bbfce393aa974fa8a8e22"
-  integrity sha512-F7qEK/6Go5FsqTueR+0wEw2vOVKNgk5847Mys8vsWkzPoEKdxs+7N9Y1dit+zhaZCLtMPyrMwjfA53ZFy+lSww==
+cypress@9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-9.0.0.tgz#8c496f7f350e611604cc2f77b663fb81d0c235d2"
+  integrity sha512-/93SWBZTw7BjFZ+I9S8SqkFYZx7VhedDjTtRBmXO0VzTeDbmxgK/snMJm/VFjrqk/caWbI+XY4Qr80myDMQvYg==
   dependencies:
-    "@cypress/request" "^2.88.6"
+    "@cypress/request" "^2.88.7"
     "@cypress/xvfb" "^1.2.4"
     "@types/node" "^14.14.31"
     "@types/sinonjs__fake-timers" "^6.0.2"
@@ -4916,7 +4923,6 @@ cypress@^8.6.0:
     ospath "^1.2.2"
     pretty-bytes "^5.6.0"
     proxy-from-env "1.0.0"
-    ramda "~0.27.1"
     request-progress "^3.0.0"
     supports-color "^8.1.1"
     tmp "~0.2.1"
@@ -6802,6 +6808,13 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+history@5, history@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.1.0.tgz#2e93c09c064194d38d52ed62afd0afc9d9b01ece"
+  integrity sha512-zPuQgPacm2vH2xdORvGGz1wQMuHSIB56yNAy5FnLuwOwgSYyPKptJtcMm6Ev+hRGeS+GzhbmRacHzvlESbFwDg==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -10838,11 +10851,6 @@ raf@^3.4.1:
   dependencies:
     performance-now "^2.1.0"
 
-ramda@~0.27.1:
-  version "0.27.1"
-  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.27.1.tgz#66fc2df3ef873874ffc2da6aa8984658abacf5c9"
-  integrity sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw==
-
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -10969,6 +10977,21 @@ react-refresh@^0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-router-dom@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.0.2.tgz#860cefa697b9d4965eced3f91e82cdbc5995f3ad"
+  integrity sha512-cOpJ4B6raFutr0EG8O/M2fEoyQmwvZWomf1c6W2YXBZuFBx8oTk/zqjXghwScyhfrtnt0lANXV2182NQblRxFA==
+  dependencies:
+    history "^5.1.0"
+    react-router "6.0.2"
+
+react-router@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.0.2.tgz#bd2b0fa84fd1d152671e9f654d9c0b1f5a7c86da"
+  integrity sha512-8/Wm3Ed8t7TuedXjAvV39+c8j0vwrI5qVsYqjFr5WkJjsJpEvNSoLRUbtqSEYzqaTUj1IV+sbPJxvO+accvU0Q==
+  dependencies:
+    history "^5.1.0"
+
 react-scripts@4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.3.tgz#b1cafed7c3fa603e7628ba0f187787964cb5d345"