added NotFound page for undefined paths, fix callback link to BE

Author: vyue013

.DS_Store

@@ -17,6 +17,7 @@ import { config } from 'dotenv';
 import log from '../logger/index';
 import type { DefaultErr } from '../../src/Types';
 import session from 'express-session';
+import path from 'path';
 
 config();
 
@@ -110,8 +111,9 @@ const routes = (app: Express) => {
     res.json({ message: 'Reached /api/ route' });
   });
 
-  app.get('/*', (_req, res) => {
-    res.status(404).send('Not found');
+  // This must be placed **after** all your API routes
+  app.get('*', (_req, res) => {
+    res.sendFile(path.join(__dirname, '../dist', 'index.html'));
   });
 
   // Global Error Handler

server/routes/index.ts

@@ -8,6 +8,7 @@ import Shared from './pages/Shared';
 import TestNewQuery from './pages/TestNewQuery';
 import ViewSavedQueries from './pages/ViewSavedQueries';
 import GitHubCallback from './pages/GitHubCallback';
+import NotFound from './pages/NotFound';
 
 //-- used to store and access login info. using Zustand (state management library)
 import useCredentialsStore from './store/credentialsStore';
@@ -51,6 +52,9 @@ const App: React.FC = () => {
         <Route path="/auth/github/callback" element={<GitHubCallback />} />
 
         {/* main dashboard? route does not live inside the Shared layout */}
+
+        {/* Catch all route for undefined paths */}
+        <Route path="*" element={<NotFound />} />
       </Routes>
     </BrowserRouter>
   );

src/App.tsx

@@ -2,12 +2,8 @@ import React from 'react';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import useCredentialsStore from '../store/credentialsStore';
-import { config } from 'dotenv';
-
-config();
 
 const GitHubCallback: React.FC = () => {
-  const apiOauth = process.env.PROD_API_OAUTH || 'http://localhost:8080/api/oauth';
   const setUser = useCredentialsStore((state) => state.setUser);
   const navigate = useNavigate();
 
@@ -21,9 +17,9 @@ const GitHubCallback: React.FC = () => {
       return;
     }
 
-    // in development mode, change redirect_uri to 'http://localhost:8080/auth/github/callback'
-    // in production mode, change redirect_uri back to 'https://dbspy.net/auth/github/callback' before deploying
-    fetch('https://www.dbspy.net/auth/github/callback', {
+    // in development mode, change redirect_uri to 'http://localhost:8080/api/oauth'
+    // in production mode, change redirect_uri back to 'https://www.dbspy.net/api/oauth' before deploying
+    fetch('https://www.dbspy.net/api/oauth', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ code, state, type: 'GITHUB' }),

src/pages/GitHubCallback.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const NotFound: React.FC = () => {
+  return (
+    <div style={{ textAlign: 'center', marginTop: '5rem' }}>
+      <h1>404 - Page Not Found</h1>
+      <p>The page you're looking for doesn't exist.</p>
+      <p>
+        <Link className="text-blue-600 dark:text-[#f8f4eb]" to="/">
+          Return to homepage
+        </Link>
+      </p>
+    </div>
+  );
+};
+
+export default NotFound;