Migrate ReactJS App to TypeScript

.firebase/hosting.YnVpbGQ.cache

@@ -1,12 +1,12 @@
-asset-manifest.json,1717906062368,265f68e2bbba2a6892be2eb328fc384936d260b45e7d5feb48a4442168c712a4
-index.html,1717906062368,564deb1a78ec7ffd86b5649a740aa345962f41e15dfe3f0de7bbc3da06e43270
-manifest.json,1717906050468,90ef6b7ee0341b32fddf19b4ded4c8fa09039cd428bb3518df89c01d1745eb39
-robots.txt,1717906050468,2544ca049f223a42bff01f72ad930a5edba75bbb7199d0f8430a02ff5aca16ec
-static/css/main.1e6d6c35.css,1717906062380,f68d731ceba0df6233c6418e7bd252ef1431bb87ce50a7b5bf8c87ba99e9303a
-static/css/main.1e6d6c35.css.map,1717906062380,0e6925dfafad9769cd9ffbbd1a38a9a61212c291613da807692cdef5aba4c9a5
-static/js/453.9113e28b.chunk.js,1717906062380,9322d2f411e7661c2cb7d934b37d3d5b3c57baab6ce7055156f879e8ca8fbc4c
-static/js/453.9113e28b.chunk.js.map,1717906062380,a88471ab7a13b4d38779b385ba9be5cb694ea289b818ec528b5fabbec08d2924
-static/js/main.4dab00a8.js.LICENSE.txt,1717906062380,c3be17e167b9804cb2586c997403b1fae9a242af6b6d99c6a69bbdafb7ffcd7a
-logo.png,1717906050468,fc0c55b3ea575ffb5690a6391f7306dd0fd0b834ad99a7b7ef1593da0d2b4b5c
-static/js/main.4dab00a8.js,1717906062380,f9c0edec35740a3abab93bb4a82a6ab99de63f81059bae0b50118a2b80edec6d
-static/js/main.4dab00a8.js.map,1717906062380,a6286504890d56bed2953b203c79aef4a704f67c7483dd234e507a6b236d85a4
+asset-manifest.json,1718881102696,753ade81a79023810ee92e8602e5729178f32ccb0d57c1ea22ab83e62bbadb47
+index.html,1718881102696,78340148468d4299f248933872c5f08526ad77f7881fcd26abeccf238becd5c7
+manifest.json,1718881086947,90ef6b7ee0341b32fddf19b4ded4c8fa09039cd428bb3518df89c01d1745eb39
+robots.txt,1718881086947,2544ca049f223a42bff01f72ad930a5edba75bbb7199d0f8430a02ff5aca16ec
+static/css/main.395e26c8.css,1718881102708,45e2efe78c0c7f31fb5f6bb4fd6d2995552ed30a59e15bddcb58dbf46ed3ecaf
+static/js/453.9113e28b.chunk.js,1718881102708,9322d2f411e7661c2cb7d934b37d3d5b3c57baab6ce7055156f879e8ca8fbc4c
+static/css/main.395e26c8.css.map,1718881102708,67b0c1fb87185faff6e623e83866f539328578badd7bf787f1a6791b22cecbbf
+static/js/453.9113e28b.chunk.js.map,1718881102708,a88471ab7a13b4d38779b385ba9be5cb694ea289b818ec528b5fabbec08d2924
+static/js/main.9cf92d87.js.LICENSE.txt,1718881102708,79000665ecf6ab75ebdb74114ee1a053dede9b39ecce36c4d87a55a200ccd159
+logo.png,1718881086947,fc0c55b3ea575ffb5690a6391f7306dd0fd0b834ad99a7b7ef1593da0d2b4b5c
+static/js/main.9cf92d87.js,1718881102708,19cfc986495b0aa613a1edd1cb56101e543312194b5271a02afe7a0e85b8c1bf
+static/js/main.9cf92d87.js.map,1718881102708,a86fd80b6d7b3daf91713d0fe37fc4a137844e86d424b1f2c62c815db3df40fa

package.json

@@ -16,13 +16,14 @@
     "firebase": "^10.12.2",
     "firebase-tools": "^13.11.2",
     "react": "^18.3.1",
-    "react-bootstrap": "^2.10.2",
+    "react-bootstrap": "^2.10.3",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "redux": "^5.0.1",
+    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.jsx → src/App.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Route, Routes } from "react-router-dom";
 import { HomeRoutes } from "./routes/HomeRoutes";
-import Alert from "./components/Alert.jsx";
+import Alert from "./components/Alert";
 function App() {
   return (
     <>

src/components/Alert.jsx → src/components/Alert.tsx

@@ -2,14 +2,17 @@ import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { remove } from "../features/alerts";
 import "../styles/components/Alert.css"; // Importing custom CSS for additional styling
-
+type messageMap = {
+  category: string;
+  message: string;
+};
 const Alert = () => {
-  const flashedMessages = useSelector((state) => state.alerts.values);
+  const flashedMessages = useSelector((state: any) => state.alerts.values);
   const dispatch = useDispatch();
 
   return (
     <div className="alerts-container">
-      {flashedMessages.map(({ category, message }, index) => (
+      {flashedMessages.map(({ category, message }: messageMap, index: any) => (
         <div
           key={index}
           className={`alert alert-${category} alert-dismissible fade show custom-alert`}

src/components/Footer.jsx → src/components/Footer.tsx

@@ -1,20 +1,18 @@
 import React from "react";
-import { Container, Row, Col } from "react-bootstrap";
-import "../styles/components/Footer.css";
+import { Link } from "react-router-dom";
 import {
   FaFacebookF,
   FaTwitter,
   FaInstagram,
   FaLinkedinIn,
 } from "react-icons/fa";
-import { Link } from "react-router-dom";
 
 export default function Footer() {
   return (
     <footer className="footer">
-      <Container>
-        <Row>
-          <Col md={4}>
+      <div className="container">
+        <div className="row">
+          <div className="col-md-4">
             <h5>Company</h5>
             <ul className="list-unstyled">
               <li>
@@ -28,8 +26,8 @@ export default function Footer() {
                 </Link>
               </li>
             </ul>
-          </Col>
-          <Col md={4}>
+          </div>
+          <div className="col-md-4">
             <h5>Quick Links</h5>
             <ul className="list-unstyled">
               <li>
@@ -43,8 +41,8 @@ export default function Footer() {
                 </Link>
               </li>
             </ul>
-          </Col>
-          <Col md={4}>
+          </div>
+          <div className="col-md-4">
             <h5>Follow Us</h5>
             <div className="social-icons">
               <a href="#" className="social-icon">
@@ -60,14 +58,14 @@ export default function Footer() {
                 <FaLinkedinIn />
               </a>
             </div>
-          </Col>
-        </Row>
-        <Row>
-          <Col className="text-center mt-4">
+          </div>
+        </div>
+        <div className="row">
+          <div className="col text-center mt-4">
             <p>&copy; 2024 Your Company. All rights reserved.</p>
-          </Col>
-        </Row>
-      </Container>
+          </div>
+        </div>
+      </div>
     </footer>
   );
 }

src/components/Forms/ContactForm.jsx → src/components/Forms/ContactForm.tsx

@@ -1,18 +1,25 @@
 import React, { useState } from "react";
 import "../../styles/components/Forms/ContactForm.css";
-const ContactForm = ({ onSubmit }) => {
+type contactFormSubmit = {
+  name: string;
+  email: string;
+  message: string;
+};
+type contactFormProps = {
+  onSubmit: ({ name, email, message }: contactFormSubmit) => any;
+};
+const ContactForm = ({ onSubmit }: contactFormProps) => {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [message, setMessage] = useState("");
 
-  const handleSubmit = (e) => {
+  const handleSubmit = (e: any) => {
     e.preventDefault();
     onSubmit({ name, email, message });
     setName("");
     setEmail("");
     setMessage("");
   };
-
   return (
     <form className="contact-form" onSubmit={handleSubmit}>
       <input
@@ -31,11 +38,11 @@ const ContactForm = ({ onSubmit }) => {
       />
       <textarea
         placeholder="Your Message"
-        rows="5"
+        rows={5}
         value={message}
         onChange={(e) => setMessage(e.target.value)}
         required
-       />
+      />
       <button type="submit">Send Message</button>
     </form>
   );

src/components/Forms/LoginForm.jsx → src/components/Forms/LoginForm.tsx

@@ -4,7 +4,7 @@ import "../../styles/components/Forms/LoginForm.css";
 export default function LoginForm({
   handleEmailAndPasswordSubmit,
   handleGoogleSubmit,
-}) {
+}: any) {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   return (

src/components/Forms/SignUpForm.jsx → src/components/Forms/SignUpForm.tsx

@@ -4,7 +4,7 @@ import "../../styles/components/Forms/SignUpForm.css";
 export default function SignUpForm({
   handleEmailandPasswordSubmit,
   handleGoogleSubmit,
-}) {
+}: any) {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");

src/features/user.js → src/features/user.ts

@@ -1,16 +1,20 @@
 import { createSlice } from "@reduxjs/toolkit";
+
 const initialState = { uid: "" };
+
 export const userSlice = createSlice({
   name: "user",
   initialState,
   reducers: {
     login: (state, action) => {
-      state.uid = action.uid;
+      state.uid = action.payload.uid; // Access payload to get uid
     },
     logout: (state, _) => {
-      state = initialState;
+      state.uid = ""; // Reset uid to empty string
     },
   },
 });
+
 export const { login, logout } = userSlice.actions;
+
 export default userSlice.reducer;

src/firebase/Auth.js → src/firebase/Auth.ts

@@ -9,7 +9,6 @@ import {
   updateProfile,
 } from "firebase/auth";
 import { auth } from "../config/firebase";
-
 /**
  * FirebaseAuthentication class for performing authentication operations.
  */
@@ -20,7 +19,7 @@ export default class FirebaseAuthentication {
    * @param {string} password - The password of the user.
    * @returns {[boolean, string]} - An array indicating success (true/false) and the user ID or error message.
    */
-  async register(email, password, name) {
+  async register(email: any, password: any, name: any) {
     try {
       // Create user with email and password
       const userCredential = await createUserWithEmailAndPassword(
@@ -36,7 +35,7 @@ export default class FirebaseAuthentication {
 
       // Return success status and user ID
       return [true, userCredential.user.uid];
-    } catch (error) {
+    } catch (error: any) {
       // Return error message
       return [false, error.message];
     }
@@ -47,15 +46,15 @@ export default class FirebaseAuthentication {
    * @param {string} password - The password of the user.
    * @returns {[boolean, string]} - An array indicating success (true/false) and the user ID or error message.
    */
-  async signIn(email, password) {
+  async signIn(email: any, password: any) {
     try {
       const userCredential = await signInWithEmailAndPassword(
         auth,
         email,
         password
       );
       return [true, userCredential.user.uid];
-    } catch (error) {
+    } catch (error: any) {
       return [false, error.message];
     }
   }
@@ -68,7 +67,7 @@ export default class FirebaseAuthentication {
     try {
       await signOut(auth);
       return [true, NaN];
-    } catch (error) {
+    } catch (error: any) {
       return [false, error.message];
     }
   }
@@ -78,11 +77,11 @@ export default class FirebaseAuthentication {
    * @param {string} email - The email address of the user.
    * @returns {[boolean, NaN]} - An array indicating success (true/false) and NaN (no data returned).
    */
-  async resetPassword(email) {
+  async resetPassword(email: any) {
     try {
       await sendPasswordResetEmail(auth, email);
       return [true, NaN];
-    } catch (error) {
+    } catch (error: any) {
       return [false, error.message];
     }
   }
@@ -92,7 +91,7 @@ export default class FirebaseAuthentication {
    * @param {string} newPassword - The new password for the user.
    * @returns {[boolean, NaN]} - An array indicating success (true/false) and NaN (no data returned).
    */
-  async updatePassword(newPassword) {
+  async updatePassword(newPassword: any) {
     try {
       const user = auth.currentUser;
       if (user) {
@@ -101,7 +100,7 @@ export default class FirebaseAuthentication {
       } else {
         return [false, "No user is signed in"];
       }
-    } catch (error) {
+    } catch (error: any) {
       return [false, error.message];
     }
   }
@@ -115,7 +114,7 @@ export default class FirebaseAuthentication {
       const provider = new GoogleAuthProvider();
       const result = await signInWithPopup(auth, provider);
       return [true, result.user.uid];
-    } catch (error) {
+    } catch (error: any) {
       return [false, error.message];
     }
   }