From a4d452c874721d2d788f00d5aa2efde2a61aff7a Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Mon, 8 Nov 2021 18:50:44 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Handle=20invalid=20paths?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/routing/BreadcrumbsBox.tsx     |  9 +++++++--
 frontend/src/utils/ParsePath.ts                   | 15 +++++++--------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/routing/BreadcrumbsBox.tsx b/frontend/src/components/routing/BreadcrumbsBox.tsx
index deb830d..6e83c2a 100644
--- a/frontend/src/components/routing/BreadcrumbsBox.tsx
+++ b/frontend/src/components/routing/BreadcrumbsBox.tsx
@@ -1,4 +1,5 @@
-import {faBook, faProjectDiagram, faServer, faUniversity, faUser, faUsers} from "@fortawesome/free-solid-svg-icons"
+import {faBook, faExclamationCircle, faProjectDiagram, faServer, faUniversity, faUser, faUsers} from "@fortawesome/free-solid-svg-icons"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 import {Box} from "@steffo/bluelib-react"
 import * as React from "react"
 import {useSophonPath} from "../../hooks/useSophonPath"
@@ -11,7 +12,7 @@ export function BreadcrumbsBox(): JSX.Element {
     const location = useSophonPath()
 
     return (
-        <Box>
+        <Box builtinColor={location.valid ? undefined : "red"}>
             <BreadcrumbLink
                 href={"/"}
                 icon={faServer}
@@ -67,6 +68,10 @@ export function BreadcrumbsBox(): JSX.Element {
                     ) : null}
                 </>
             ) : null}
+            {location.valid ? null : <>
+                <BreadcrumbSeparator/>
+                <FontAwesomeIcon icon={faExclamationCircle}/>&nbsp;Invalid path!
+            </>}
         </Box>
     )
 }
diff --git a/frontend/src/utils/ParsePath.ts b/frontend/src/utils/ParsePath.ts
index 4928484..ace1476 100644
--- a/frontend/src/utils/ParsePath.ts
+++ b/frontend/src/utils/ParsePath.ts
@@ -58,17 +58,12 @@ interface ParsePathSegmentConfig {
 
 
 function parsePathSegment({path, parsed, regex, key, next}: ParsePathSegmentConfig): ParsedPath {
-    // If the path is empty, return
-    if(!path) {
-        return parsed
-    }
-
     // Try matching the regex
     const match = path.match(regex)
 
-    // If the match fails, it means the path is invalid
+    // If the match fails, it means the matching is over
     if(!match || !match.groups) {
-        parsed.valid = Boolean(path)
+        parsed.valid = path === "/"
         return parsed
     }
 
@@ -95,7 +90,7 @@ function parsePathSegment({path, parsed, regex, key, next}: ParsePathSegmentConf
  * @param path - The path to split.
  */
 export function parsePath(path: string): ParsedPath {
-    return parsePathSegment({
+    const result = parsePathSegment({
         path,
         parsed: {count: 0, valid: true},
         regex: INSTANCE_REGEX,
@@ -142,4 +137,8 @@ export function parsePath(path: string): ParsedPath {
             },
         ]
     })
+
+    console.debug("[ParsePath] Parsed", result)
+
+    return result
 }