Fix initial feed load

ybizeul · Oct 11, 2024 · ee51da9 · ee51da9
1 parent 0f5d9aa
commit ee51da9
Show file tree

Hide file tree

Showing 7 changed files with 614 additions and 53 deletions.
diff --git a/web/ui/package.json b/web/ui/package.json
@@ -35,6 +35,7 @@
   "devDependencies": {
     "@eslint/js": "^9.10.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
+    "@next/bundle-analyzer": "^14.2.15",
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-interactions": "^8.2.9",
     "@storybook/addon-links": "^8.2.9",
@@ -49,6 +50,7 @@
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "cross-env": "^7.0.3",
     "eslint": "^9.10.0",
     "eslint-config-mantine": "^4.0.3",
     "eslint-plugin-jsx-a11y": "^6.10.0",
@@ -68,7 +70,9 @@
     "typescript-eslint": "^8.4.0",
     "vite": "^5.4.3",
     "vite-tsconfig-paths": "^5.0.1",
-    "vitest": "^2.0.5"
+    "vitest": "^2.0.5",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^5.1.4"
   },
   "packageManager": "[email protected]"
 }
diff --git a/web/ui/src/APIClient.ts b/web/ui/src/APIClient.ts
@@ -1,5 +1,7 @@
 import axios, { AxiosResponse, AxiosBasicCredentials, AxiosRequestConfig, AxiosError, AxiosProgressEvent, GenericAbortSignal } from 'axios';
 
+axios.defaults.withCredentials = true
+
 export const UserError = (e: unknown) => {
     if (typeof e == "string") {
         return e
@@ -51,12 +53,14 @@ export class APIClient {
 
     get(path: string, auth?: AxiosBasicCredentials) {
         return new Promise<unknown>((resolve, reject) => {
+            console.log(this.baseURL + path)
             this.request({
                 url: this.baseURL + path,
                 method: 'GET',
                 auth,
             })
             .then((result) => {
+                console.log(result)
                 resolve(result)
             })
             .catch(e => {

diff --git a/web/ui/src/YBFeed/YBFeedApp.tsx b/web/ui/src/YBFeed/YBFeedApp.tsx
@@ -1,37 +1,31 @@
 import { AppShell, Container } from "@mantine/core"
 
 import {
-    BrowserRouter,
-    Route,
-    Routes,
+    createBrowserRouter,
+    RouterProvider,
   } from "react-router-dom";
 
 import { YBFeedHome } from "./YBFeedHome";
 import { YBFeedFeed } from './YBFeedFeed'
 import { YBFeedVersionComponent } from "./Components";
 
-// const router = createBrowserRouter([
-//     {
-//         path: "/",
-//         element:<YBFeedHome/>
-//     },
-//     {
-//         path: "/:feed",
-//         element:<YBFeedFeed/>
-//     },
-// ])
+const router = createBrowserRouter([
+    {
+        path: "/",
+        element:<YBFeedHome/>
+    },
+    {
+        path: "/:feedName",
+        element:<YBFeedFeed/>
+    },
+])
 
 export function YBFeedApp() {
     return (
         <AppShell withBorder={false}>
             <AppShell.Main>
                 <Container size="md" mx="auto">
-                    <BrowserRouter>
-                        <Routes>
-                            <Route path="/" element={<YBFeedHome/>}/>
-                            <Route path="/:feedName" element={<YBFeedFeed/>}/>
-                        </Routes>
-                    </BrowserRouter>
+                    <RouterProvider router={router} />
                 </Container>
             </AppShell.Main>
             <AppShell.Footer style={{backgroundColor:"transparent"}} zIndex={100}>

diff --git a/web/ui/src/YBFeed/YBFeedConnector.ts b/web/ui/src/YBFeed/YBFeedConnector.ts
@@ -42,6 +42,7 @@ export class YBFeedConnector {
             //     }
             // })
             .catch((e) => {
+                console.log(e)
                 reject(new YBFeedError(e.status, "Server Unavailable"))
             })
 

diff --git a/web/ui/src/YBFeed/YBFeedFeed.tsx b/web/ui/src/YBFeed/YBFeedFeed.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, useMemo } from "react"
 
-import { useParams, useSearchParams, redirect } from 'react-router-dom';
+import { useParams, useSearchParams, useNavigate, useLocation } from 'react-router-dom';
 
 import { notifications } from '@mantine/notifications';
 
@@ -19,7 +19,8 @@ import { PinRequest } from "./Components/PinRequest";
 
 export function YBFeedFeed() {
     const { feedName } = useParams()
-
+    const navigate = useNavigate()
+    const location = useLocation()
     const [searchParams] = useSearchParams()
     // const navigate = useNavigate()
     const [secret,setSecret] = useState<string>("")
@@ -35,7 +36,7 @@ export function YBFeedFeed() {
     const connection = useMemo(() => new YBFeedConnector(),[])
 
     if (!feedName) {
-        redirect("/")
+        navigate("/")
         return
     }
 
@@ -44,10 +45,10 @@ export function YBFeedFeed() {
     useEffect(() => {
         const s=searchParams.get("secret")
         if (s) {
-            setSecret(s)
             connection.AuthenticateFeed(feedName,s)
-            .then(() => {
-                redirect("/" + feedName)
+            .then((se) => {
+                console.log(se)
+                navigate("/" + feedName)
             })
             .catch((e) => console.log(e))
         }
@@ -57,16 +58,19 @@ export function YBFeedFeed() {
     // As websocket doesn't send current cookie, we have to perform a regular
     // http request first to get the secret
     useEffect(() => {
-        if (!secret) {
+        console.log(secret)
+        if (!secret && !searchParams.get("secret")) {
             connection.GetFeed(feedName)
             .then((f) => {
                 if (f && f.secret) {
                     setSecret(f.secret)
                     setVapid(f.vapidpublickey)
+                    console.log("setting authenticated true")
                     setAuthenticated(true)
                 }
             })
             .catch((e) => {
+                console.log(e)
                 if (e.status === 401) {
                     setAuthenticated(false)
                 }
@@ -75,7 +79,7 @@ export function YBFeedFeed() {
                 }
             })
         }
-    },[secret,connection,feedName])
+    },[secret,connection,feedName,location])
 
     // useEffect(() => {
     //     if (readyState === ReadyState.OPEN) {

diff --git a/web/ui/src/notifications.ts b/web/ui/src/notifications.ts
@@ -14,7 +14,7 @@ export function Subscribe(vapid: string) {
                 console.log("subscribing",vapid)
                 return registration.pushManager.subscribe({
                     userVisibleOnly: true,
-                    applicationServerKey: vapid,
+                    applicationServerKey: urlBase64ToUint8Array(vapid),
                 });
             })
             .then((subscription) => {
@@ -31,11 +31,11 @@ export function Subscribe(vapid: string) {
     })
 }
 
-// function urlBase64ToUint8Array(base64String: string) {
-//     const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
-//     const base64 = (base64String + padding)
-//         .replace(/-/g, '+')
-//         .replace(/_/g, '/');
-//     const rawData = window.atob(base64);
-//     return Uint8Array.from([...rawData].map(char => char.charCodeAt(0)));
-// }
+function urlBase64ToUint8Array(base64String: string) {
+    const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
+    const base64 = (base64String + padding)
+        .replace(/-/g, '+')
+        .replace(/_/g, '/');
+    const rawData = window.atob(base64);
+    return Uint8Array.from([...rawData].map(char => char.charCodeAt(0)));
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -42,6 +42,7 @@ export class YBFeedConnector { @@
                 //     }
                 // })
                 .catch((e) => {
+                    console.log(e)
                     reject(new YBFeedError(e.status, "Server Unavailable"))
                 })
@@ Expand Down @@