feat: breadcrumbs

src/AppRouter.tsx

@@ -6,27 +6,29 @@ import JIP33ElectricalTabView from "./Views/JIP33ElectricalTabView"
 import JIP33MechanicalTabView from "./Views/JIP33MechanicalTabView"
 import JIP33InstrumentTabView from "./Views/JIP33InstrumentTabView"
 import ReviewView from "./Views/Review/ReviewView"
-import LandingPage from "./Views/NavigatorHeader"
+import NavigatorHeader from "./Views/NavigatorHeader"
 import ContainerView from "./Views/ContainerView"
 import DraggableCardTable from "./Components/Containers/DraggableCardTable"
 import ContainerTable from "./Components/Containers/ContainerTable"
 
 const AppRouter: FC = () => (
     <Routes>
-        <Route path="/" element={<LandingPage />} />
-        <Route path="/:projectId" element={<LandingPage />}>
-            <Route path="/:projectId/tags" element={<EquipmentListView />} />
+        <Route path="/" element={<NavigatorHeader />} />
+        <Route path="/:projectId" element={<NavigatorHeader />}>
+            <Route path="tags" element={<EquipmentListView />}>
+                <Route path="JIP33Instrument/:tagId" element={<JIP33InstrumentTabView />} />
+                <Route path="JIP33Electrical/:tagId" element={<JIP33ElectricalTabView />} />
+                <Route path="JIP33Mechanical/:tagId" element={<JIP33MechanicalTabView />} />
+                <Route path="tags/review/" element={<ReviewView />} />
+            </Route>
             <Route path="containers" element={<ContainerView />}>
                 <Route index element={<ContainerTable />} />
                 <Route path="comments" element={<DraggableCardTable />} />
 
             </Route>
         </Route>
         <Route path="/comparison" element={<TagComparisonView />} />
-        <Route path="/:projectId/tags/JIP33Instrument/:tagId" element={<JIP33InstrumentTabView />} />
-        <Route path="/:projectId/tags/JIP33Electrical/:tagId" element={<JIP33ElectricalTabView />} />
-        <Route path="/:projectId/tags/JIP33Mechanical/:tagId" element={<JIP33MechanicalTabView />} />
-        <Route path="/:projectId/tags/review/" element={<ReviewView />} />
+
     </Routes>
 )
 

src/Components/Buttons/BackButton.tsx

@@ -1,13 +1,21 @@
-import React from "react"
+import React, { useContext } from "react"
 import { useNavigate } from "react-router-dom"
 import { arrow_back } from "@equinor/eds-icons"
 import { Button, Icon } from "@equinor/eds-core-react"
+import { ViewContext } from "../../Context/ViewContext"
 
 export function BackButton() {
+    const { setCurrentProperty, setActiveTagData } = useContext(ViewContext)
     const navigate = useNavigate()
 
+    const goBack = () => {
+        setCurrentProperty("")
+        setActiveTagData(undefined)
+        navigate(-1)
+    }
+
     return (
-        <Button variant="ghost_icon" onClick={() => navigate(-1)} title="Back to previous page">
+        <Button variant="ghost_icon" onClick={() => goBack()} title="Back to previous page">
             <Icon
                 data={arrow_back}
                 color="#007079"

src/Components/Containers/DraggableCardTable.tsx

@@ -1,11 +1,13 @@
-import React, { useState, DragEvent } from "react"
+import React, { useState, DragEvent, useEffect } from "react"
 import styled from "styled-components"
+import { useOutletContext } from "react-router-dom"
 import { formatCamelCase } from "../../utils/helpers"
 
 const Wrapper = styled.div`
     box-sizing: border-box;
     display: flex;
-    align-items: center;
+    flex-grow: 1;
+    align-items: stretch;
     justify-content: space-around;
     flex-direction: row;
     gap: 5px;
@@ -14,7 +16,7 @@ const Wrapper = styled.div`
 const DragContainer = styled.div<{ $isOver?: boolean }>`
     box-sizing: border-box;
     width: 100%;
-    height: 450px;
+    flex-grow: 1;
     overflow-y: auto;
     padding: 5px;
     display: flex;
@@ -23,7 +25,6 @@ const DragContainer = styled.div<{ $isOver?: boolean }>`
     transition: background-color 0.1s ease-in-out;
     background-color: ${(props) => (props.$isOver ? "#E6F9EC" : "none")};
     border-radius: 5px;
-
 `
 
 const ContainerHeader = styled.div<{ $status: string }>`
@@ -56,7 +57,6 @@ const DraggableElement = styled.div`
     box-sizing: border-box;
     width:  100%;
     height: 40px;
-    background-color: lightblue;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -79,13 +79,14 @@ const initialDraggables: Draggable[] = Array.from({ length: 10 }, (_, index) =>
     status: statuses[Math.floor(Math.random() * statuses.length)],
 }))
 
-interface ContainerData {
+interface StatusOptions {
     [key: string]: Draggable[];
 }
 
 const DragableCardTable: React.FC = () => {
+    const [, containerComments] = useOutletContext<any>()
     const [hoveredContainer, setHoveredContainer] = useState<string | null>(null)
-    const [containerData, setContainerData] = useState<ContainerData>({
+    const [statusOptions, setStatusOptions] = useState<StatusOptions>({
         open: initialDraggables.filter((item) => item.status === "Open"),
         toBeImplemented: initialDraggables.filter((item) => item.status === "To_be_implemented"),
         closed: initialDraggables.filter((item) => item.status === "Closed"),
@@ -110,23 +111,27 @@ const DragableCardTable: React.FC = () => {
         e.dataTransfer.setData("text/plain", id.toString())
     }
 
+    useEffect(() => {
+        console.log(containerComments)
+    }, [containerComments])
+
     const handleDrop = (status: string, e: DragEvent<HTMLDivElement>) => {
         const itemId = parseInt(e.dataTransfer.getData("text/plain"), 10)
         const draggable = initialDraggables.find((item) => item.id === itemId)
 
         if (draggable) {
-        const sourceStatus = Object.keys(containerData).find((key) => containerData[key].some((item) => item.id === itemId)) || "notReviewed"
-        const updatedSource = containerData[sourceStatus].filter((item) => item.id !== itemId)
-        setContainerData((prev) => ({ ...prev, [sourceStatus]: updatedSource }))
-        setContainerData((prev) => ({ ...prev, [status]: [...prev[status], draggable] }))
+        const sourceStatus = Object.keys(statusOptions).find((key) => statusOptions[key].some((item) => item.id === itemId)) || "notReviewed"
+        const updatedSource = statusOptions[sourceStatus].filter((item) => item.id !== itemId)
+        setStatusOptions((prev) => ({ ...prev, [sourceStatus]: updatedSource }))
+        setStatusOptions((prev) => ({ ...prev, [status]: [...prev[status], draggable] }))
         handleLogChange(itemId, sourceStatus, status)
         }
         setHoveredContainer(null)
     }
 
     return (
         <Wrapper>
-            {Object.keys(containerData).map((status) => (
+            {Object.keys(statusOptions).map((status) => (
                 <DragContainer
                     key={status}
                     onDragOver={(e) => handleDragEnterOrOver(status, e)}
@@ -135,8 +140,8 @@ const DragableCardTable: React.FC = () => {
                     onDrop={(e) => handleDrop(status, e)}
                     $isOver={hoveredContainer === status}
                 >
-                    <ContainerHeader $status={status}>{`${formatCamelCase(status)} (${containerData[status].length})`}</ContainerHeader>
-                    {containerData[status].map((item) => (
+                    <ContainerHeader $status={status}>{`${formatCamelCase(status)} (${statusOptions[status].length})`}</ContainerHeader>
+                    {statusOptions[status].map((item) => (
                         <DraggableElement
                             key={item.id}
                             draggable

src/Components/EquipmentListView/EquipmentListTable.tsx

@@ -15,12 +15,10 @@ import { TagData } from "../../Models/TagData"
 import { ViewContext } from "../../Context/ViewContext"
 import { GetTagReviewerService } from "../../api/TagReviewerService"
 import { GetContainerService } from "../../api/ContainerService"
+import { GetConversationService } from "../../api/ConversationService"
 
 interface Props {
     tags: TagData[]
-    setReviewModalOpen: Dispatch<SetStateAction<boolean>>
-    setTagInReview: Dispatch<SetStateAction<string | undefined>>
-    setRevisionInReview: Dispatch<SetStateAction<string | undefined>>
 }
 
 const Wrapper = styled.div`
@@ -39,12 +37,7 @@ const TagIcon = styled(Icon)`
     padding-right: 9px;
 `
 
-function EquipmentListTable({
-    tags,
-    setReviewModalOpen,
-    setTagInReview,
-    setRevisionInReview,
-}: Props) {
+function EquipmentListTable({ tags }: Props) {
     const location = useLocation()
     const styles = useStyles()
 

src/Context/ViewContext.tsx

@@ -44,6 +44,9 @@ interface ViewContextProps {
     setContainerReviews: Dispatch<SetStateAction<Components.Schemas.ContainerReviewDto[]>>
     currentUserId: string
     setCurrentUserId: Dispatch<SetStateAction<string>>
+    pathSegments: string[]
+    setPathSegments: Dispatch<SetStateAction<string[]>>
+
 }
 
 export const ViewContext = createContext<ViewContextProps>({
@@ -69,6 +72,8 @@ export const ViewContext = createContext<ViewContextProps>({
     setContainerReviews: () => { },
     currentUserId: "",
     setCurrentUserId: () => "",
+    pathSegments: [],
+    setPathSegments: () => { },
 })
 
 interface ViewContextProviderProps {
@@ -88,6 +93,7 @@ export const ViewContextProvider: React.FC<ViewContextProviderProps> = ({
     const [containerReviews, setContainerReviews] = useState<Components.Schemas.ContainerReviewDto[]>([])
     const [errors, setErrors] = useState<{}>({})
     const [currentUserId, setCurrentUserId] = useState<string>("")
+    const [pathSegments, setPathSegments] = useState<string[]>([])
 
     useEffect(() => {
         localStorage.setItem("isSideSheetOpen", JSON.stringify(sideSheetOpen))
@@ -135,6 +141,8 @@ export const ViewContextProvider: React.FC<ViewContextProviderProps> = ({
             setCurrentUserId,
             currentProperty,
             setCurrentProperty,
+            pathSegments,
+            setPathSegments,
         }),
         [
             activeTagData,
@@ -159,6 +167,8 @@ export const ViewContextProvider: React.FC<ViewContextProviderProps> = ({
             setCurrentUserId,
             currentProperty,
             setCurrentProperty,
+            pathSegments,
+            setPathSegments,
         ],
     )