Merge pull request #30 from SolidLabResearch/29-bugfix-404-on-watchpage

bugfix /watch gave a 404, and cleanup of routing variables

Author: eliasnijs

solid-watchparty/config.js

@@ -0,0 +1,4 @@
+export default {
+  baseDir: '/solid-watch-party/',
+  outDir: '../dist',
+}

solid-watchparty/github-post-build-script.js

@@ -1,13 +1,11 @@
 import viteConfig from "./vite.config.js";
 import * as fs from "fs";
 
-// TODO: possibly get these from App.jsx
 const routes = [
   "/menu",
   "/watch"
 ];
 const dir = viteConfig.build.outDir;
-
 for (const route of routes) {
   fs.cpSync(dir + "/index.html", dir + route + "/index.html");
 }

solid-watchparty/src/App.jsx

@@ -2,18 +2,17 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { SessionProvider } from '@inrupt/solid-ui-react'
 
-/* page imports */
 import LoginPage from './pages/LoginPage';
 import MenuPage from './pages/MenuPage';
 import WatchPage from './pages/WatchPage';
 
 /* config imports */
-import { BASEPATH } from './config'
+import config from '../config';
 
-const router = createBrowserRouter([
-  {path: (BASEPATH + "/"), element: <LoginPage/>},
-  {path: (BASEPATH + "/menu"), element: <MenuPage/>},
-  {path: (BASEPATH + "/watch"), element: <WatchPage/>},
+export const router = createBrowserRouter([
+  {path: (config.baseDir + "/"), element: <LoginPage/>},
+  {path: (config.baseDir + "/menu"), element: <MenuPage/>},
+  {path: (config.baseDir + "/watch"), element: <WatchPage/>},
 ]);
 
 function App() {

solid-watchparty/src/components/SWChatComponent.jsx

@@ -115,10 +115,10 @@ function SWChatComponent({roomUrl, joined}) {
             <SWAutoScrollDiv className="overflow-y-auto overflow-x-auto mb-2 shrink">
               {messages.map((message) => <SWMessageComponent message={message} key={message.key}/>)}
             </SWAutoScrollDiv>
-            <form className="grow-0 flex flex-between items-center" onSubmit={submitMessage}>
+            <form autocomplete="off" className="grow-0 flex flex-between items-center" onSubmit={submitMessage}>
               <input id="msgInput" className="px-2 h-10 rgb-bg-1 sw-border w-full"
                 onChange={(e) => setInput(parseMessage(e.target.value))}
-                value={input}/>
+                value={input} type='text'/>
               <button className="sw-btn hidden"> P </button>
             </form>
           </>

solid-watchparty/src/config.js

@@ -1,5 +1,3 @@
-export const BASEPATH = '/solid-watch-party'
-
 /* NOTE(Elias): default POD directory structure related to the watchparty */
 export const ROOMS_ROOT = 'watchparties/myRooms';
 export const MESSAGES_ROOT = 'watchparties/myMessages';

solid-watchparty/src/pages/LoginPage.jsx

@@ -7,17 +7,17 @@ import SWPageWrapper from '../components/SWPageWrapper'
 import SWLoginButton from '../components/SWLoginButton'
 
 /* config imports */
-import { BASEPATH } from '../config.js'
+import config from '../../config';
 
 const authOptions = {
   clientName:  "solid-watchparty",
 };
 
 export default function LoginPage()
 {
-  const [oidcIssuer, setOidcIssuer] = useState("http://localhost:3000/");
+  const [oidcIssuer, setOidcIssuer] = useState("");
   const currentLocation = useLocation();
-  const redirectLocation = (currentLocation.state?.from || `${BASEPATH}/menu`);
+  const redirectLocation = (currentLocation.state?.from || `${config.baseDir}/menu`);
   return (
     <SWPageWrapper className="flex justify-center items-center" mustBeAuthenticated={false}>
       <div className="w-1/2">

solid-watchparty/src/pages/MenuPage.jsx

@@ -21,6 +21,8 @@ import {
   validateLength
 } from '../utils/validationUtils';
 
+/* config imports */
+import config from '../../config';
 
 function
 MenuPage()
@@ -46,7 +48,7 @@ MenuPage()
       } else if (!result.exists) {
         setRoomUrl({value: roomUrl.value, alertMsg: "Room does not exist"});
       } else {
-        navigateTo('/watch?room=' + encodeURIComponent(roomUrl.value));
+        navigateTo(`${config.baseDir}/watch?room=${encodeURIComponent(roomUrl.value)}`);
       }
     }
     setIsJoinLoading(false);
@@ -63,7 +65,7 @@ MenuPage()
       if (result.error) {
         setRoomName({value: roomName.value, alertMsg: result.errorMsg});
       } else {
-        navigateTo('/watch?room=' + encodeURIComponent(result.roomUrl));
+        navigateTo(`${config.baseDir}/watch?room=${encodeURIComponent(result.roomUrl)}`);
       }
     }
     setIsCreateLoading(false);

solid-watchparty/vite.config.js

@@ -1,11 +1,12 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import config from './config.js'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  base: '/solid-watch-party/',
+  base: config.baseDir,
   build: {
-    outDir: '../dist'
+    outDir: config.outDir
   },
 })