feat: added not-found and error pages

client/App.tsx

@@ -6,24 +6,26 @@ import { ServerContext } from './hooks'
 import { UserProvider } from './hooks/useCurrentUser'
 
 import { AdminPage } from './pages/AdminPage'
+import { ErrorPage } from './pages/ErrorPage'
 import { HomePage } from './pages/HomePage'
 import { LoginPage } from './pages/LoginPage'
+import { NotFoundPage } from './pages/NotFoundPage'
 import { ProblemPage } from './pages/ProblemPage'
 import { ProfilePage } from './pages/ProfilePage'
 import { ScoresPage } from './pages/ScoresPage'
 import { UserPage } from './pages/UserPage'
 
-const Redirect = ({ to }: { to: string }) => {
-    useEffect(() => {
-        route(prependBaseUrl(to), true)
-    }, [])
+// const Redirect = ({ to }: { to: string }) => {
+//     useEffect(() => {
+//         route(prependBaseUrl(to), true)
+//     }, [])
 
-    return (
-        <>
-            Redirecting to <pre>{to}</pre>...
-        </>
-    )
-}
+//     return (
+//         <>
+//             Redirecting to <pre>{to}</pre>...
+//         </>
+//     )
+// }
 
 export const App = ({ url }: { url?: string }) => {
     // during server side rendering don't prepend the BASE_URL
@@ -60,10 +62,13 @@ export const App = ({ url }: { url?: string }) => {
                     // @ts-ignore
                     path={pbu('/scores')}
                 />
-                <Redirect
+                <ErrorPage
+                    // @ts-ignore
+                    path={pbu('/error')}
+                />
+                <NotFoundPage
                     // @ts-ignore
                     default
-                    to="/"
                 />
             </Router>
         </UserProvider>

client/components/Header.tsx

@@ -9,7 +9,7 @@ const ROLE_LABEL: Record<UserRole, string> = {
     ['student']: 'Studente',
 }
 
-export const Header = ({ }) => {
+export const Header = ({}) => {
     const [user] = useCurrentUser()
 
     return (

client/pages/ErrorPage.tsx

@@ -0,0 +1,32 @@
+import { Header } from '../components/Header'
+
+function splitFirst(s: string, sep: string): string[] {
+    const i = s.indexOf(sep)
+
+    if (i === -1) {
+        return [s, '']
+    } else {
+        return [s.substring(0, i), s.substring(i + sep.length)]
+    }
+}
+
+const defaultErrorMessage = <>Purtroppo c'è stato un errore inaspettato</>
+
+export const ErrorPage = ({ url }: { url: string }) => {
+    const query = Object.fromEntries(
+        splitFirst(url, '?')[1]
+            .split('&')
+            .map(kv => splitFirst(kv, '='))
+            .map(([k, v]) => [k, decodeURIComponent(v)])
+    )
+
+    return (
+        <>
+            <Header />
+            <main class="page-error">
+                <div class="title">Errore</div>
+                <p>{query.message.trim().length > 0 ? query.message : defaultErrorMessage}</p>
+            </main>
+        </>
+    )
+}

client/pages/NotFoundPage.tsx

@@ -0,0 +1,12 @@
+import { Header } from '../components/Header'
+
+export const NotFoundPage = ({}) => {
+    return (
+        <>
+            <Header />
+            <main class="page-not-found">
+                <div class="title">Pagina non trovata!</div>
+            </main>
+        </>
+    )
+}

client/styles/main.scss

@@ -223,7 +223,7 @@ p {
     margin: 0;
 }
 
-p+p {
+p + p {
     margin-top: 0.5rem;
 }
 
@@ -476,11 +476,11 @@ main.page-scores {
                     }
 
                     &:hover {
-                        &:nth-child(3n + 1)+.cell+.cell::after {
+                        &:nth-child(3n + 1) + .cell + .cell::after {
                             background: #00000006;
                         }
 
-                        &:nth-child(3n + 2)+.cell::after {
+                        &:nth-child(3n + 2) + .cell::after {
                             background: #00000006;
                         }
                     }
@@ -529,6 +529,8 @@ header {
     background: #fdfdfd;
 
     .logo {
+        z-index: 1;
+
         font-size: 42px;
         font-family: 'Lato';
         font-weight: 300;
@@ -544,6 +546,8 @@ header {
         width: 100%;
         height: 100%;
 
+        z-index: 0;
+
         .nav-left {
             gap: 1rem;
             display: flex;
@@ -797,8 +801,7 @@ header {
 }
 
 // On mobile
-@media screen and (max-width: $device-s-width),
-(pointer: coarse) {
+@media screen and (max-width: $device-s-width), (pointer: coarse) {
     main {
         padding: 2rem 1rem 6rem;
 
@@ -824,16 +827,15 @@ header {
             align-items: center;
             gap: 1rem;
 
-            .nav-left, .nav-right {
+            .nav-left,
+            .nav-right {
                 left: unset;
                 right: unset;
                 position: relative;
-    
+
                 flex-direction: column;
             }
         }
-
-     
     }
 
     .problem {
@@ -874,8 +876,7 @@ header {
     }
 }
 
-@media screen and (max-width: $device-m-width),
-(pointer: coarse) {
+@media screen and (max-width: $device-m-width), (pointer: coarse) {
     .markdown-editor {
         grid-template-columns: auto;
         grid-template-rows: auto auto;
@@ -885,4 +886,4 @@ header {
             justify-self: center;
         }
     }
-}
+}