Convert to typescript

bs3/package.json

@@ -2,7 +2,7 @@
   "name": "bs3",
   "version": "0.1.0",
   "private": true,
-  "main": "src/index.js",
+  "main": "src/index.ts",
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
@@ -29,7 +29,14 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
-    "env-cmd": "^10.1.0"
+    "@types/node": "^22.14.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
+    "@typescript-eslint/eslint-plugin": "^8.29.1",
+    "@typescript-eslint/parser": "^8.29.1",
+    "env-cmd": "^10.1.0",
+    "eslint": "^9.24.0",
+    "typescript": "^5.8.3"
   },
   "scripts": {
     "start": "react-scripts start",

bs3/src/App.js → bs3/src/App.tsx

@@ -1,16 +1,15 @@
+import React, { useEffect } from 'react';
 import './App.css';
 import BottomAppBar from './components/bottom-app-bar';
 import { Outlet } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { setLocation } from './app/geolocatorSlice';
 import useGeoLocationCheck from './api/geolocation';
-import { useEffect } from 'react';
 
 function App() {
   const dispatch = useDispatch();
-  const geoLocation = useGeoLocationCheck(); // Custom hook
+  const geoLocation = useGeoLocationCheck();
 
-  // Use useEffect to dispatch the action only when geoLocation is valid
   useEffect(() => {
     if (geoLocation) {
       dispatch(setLocation(geoLocation));
@@ -20,9 +19,9 @@ function App() {
   return (
     <div className="App">
       <Outlet />
-      <BottomAppBar></BottomAppBar>
+      <BottomAppBar />
     </div>
   );
 }
 
-export default App;
+export default App;

bs3/src/AppWrapper.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import App from './App';
+import { Box, Typography, Button, Modal } from '@mui/material';
+
+interface AppModalProps {
+  onClose: () => void;
+}
+
+const AppModal: React.FC<AppModalProps> = ({ onClose }) => {
+  const [showModal, setShowModal] = useState(true);
+
+  return (
+    <Modal
+      open={showModal}
+      onClose={onClose}
+      aria-labelledby="modal-title"
+      aria-describedby="modal-description"
+    >
+      <Box
+        sx={{
+          p: 4,
+          bgcolor: 'background.paper',
+          borderRadius: 1,
+          margin: 'auto',
+          maxWidth: '500px',
+          mt: '10%',
+          boxShadow: 24,
+        }}
+      >
+        <Typography id="modal-title" variant="h6" component="h2">
+          Welcome to the BS3 community.
+        </Typography>
+        <Typography id="modal-description" sx={{ mt: 2 }}>
+          Location is optional but without it you will not be able to vote or post.
+          Location data will never be stored.
+        </Typography>
+        <Button onClick={onClose} sx={{ mt: 2 }}>
+          OK
+        </Button>
+      </Box>
+    </Modal>
+  );
+};
+
+const AppWrapper: React.FC = () => {
+  const dispatch = useDispatch();
+  const [loading, setLoading] = useState(true);
+  const [showModal, setShowModal] = useState(true);
+
+  useEffect(() => {
+    if (!showModal) {
+      setLoading(false);
+    }
+  }, [dispatch, showModal]);
+
+  const handleCloseModal = () => {
+    setShowModal(false);
+  };
+
+  if (showModal) {
+    return <AppModal onClose={handleCloseModal} />;
+  }
+
+  if (loading) {
+    return <div>Checking location...</div>;
+  }
+
+  return <App />;
+};
+
+export default AppWrapper;

bs3/src/api/firebaseConfig.ts

@@ -0,0 +1,16 @@
+import { initializeApp } from "firebase/app";
+import { getFirestore } from "firebase/firestore";
+
+const firebaseConfig = {
+  apiKey: process.env.REACT_APP_FIREBASE_API_KEY as string,
+  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN as string,
+  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID as string,
+  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET as string,
+  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID as string,
+  appId: process.env.REACT_APP_FIREBASE_APP_ID as string,
+};
+
+const app = initializeApp(firebaseConfig);
+const db = getFirestore(app);
+
+export { db };