Move to Typescript

frontend/package.json

@@ -11,18 +11,23 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.11",
     "autoprefixer": "^10.4.19",
     "axios": "^1.6.7",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "framer-motion": "^11.2.4",
     "postcss": "^8.4.38",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",
     "tailwindcss": "^3.4.3",
+    "ts-loader": "^9.5.1",
     "web-vitals": "^2.1.4",
     "workbox-background-sync": "^6.6.0",
     "workbox-broadcast-update": "^6.6.0",
@@ -60,5 +65,11 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.9",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.5.2"
   }
 }

frontend/src/App.jsx → frontend/src/App.tsx

@@ -10,7 +10,7 @@ function App() {
       <main className="flex flex-col">
         <Nav />
         <Routes>
-          <Route exact path="/" element={<Home />} />
+          <Route path="/" element={<Home />} />
           <Route path="/signup" element={<Signup />} />
           <Route path="/about" element={<About />} />
           <Route path="/contact" element={<Contact />} />

frontend/src/assets/images/index.js

@@ -1,6 +1,6 @@
 import headerLogo from './header-logo.png';
 import bestPlace from './best-place.svg';
 import greenPlantsStaircase from './GreenPlantsStaircase.jpg';
-import whiteWoodenShelfBesideBed from './WhiteWoodenShelfBesideBed.jpg';
+import yellowHouse from './yellow-house.jpg';
 
-export { headerLogo, bestPlace, greenPlantsStaircase, whiteWoodenShelfBesideBed};
+export { headerLogo, bestPlace, greenPlantsStaircase, yellowHouse };

frontend/src/components/Nav.jsx → frontend/src/components/Nav.tsx

@@ -1,13 +1,13 @@
 import { Link } from "react-router-dom";
 import PrimaryButton from "./buttons/PrimaryButton";
 import SecondaryButton from "./buttons/SecondaryButton";
-import { useState, useEffect, useRef } from "react";
+import { FC, useState, useEffect, useRef } from "react";
 import { IoMenu, IoClose } from "react-icons/io5";
 
-const Nav = () => {
+const Nav: FC = () => {
   const [isScrolled, setIsScrolled] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const menuRef = useRef(null);
+  const menuRef = useRef<HTMLUListElement>(null);
 
   // To add border shadow on scroll
   useEffect(() => {
@@ -29,8 +29,8 @@ const Nav = () => {
     setIsMenuOpen(!isMenuOpen);
   };
 
-  const handleClickOutside = (event) => {
-    if (menuRef.current && !menuRef.current.contains(event.target)) {
+  const handleClickOutside = (event: MouseEvent) => {
+    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
       setIsMenuOpen(false);
     }
   };
@@ -65,12 +65,12 @@ const Nav = () => {
           {/* Navigation Links */}
           <ul
             ref={menuRef}
-            className={`flex flex-row gap-8 max-md:hidden items-center text-md ${
+            className={`flex flex-row gap-2 max-md:hidden items-center text-md ${
               isMenuOpen ? "block" : "hidden"
             } md:flex`}
           >
             <li>
-              <Link to="/about" className="px-4">
+              <Link to="/about" className="px-2">
                 About
               </Link>
             </li>
@@ -80,7 +80,7 @@ const Nav = () => {
               </Link>
             </li>
             <li>
-              <Link to="/signup">
+              <Link to="/signup" className="h-5 w-5">
                 <PrimaryButton label="Sign Up" Icon={null} />
               </Link>
             </li>

frontend/src/components/Pagination.jsx → frontend/src/components/Pagination.tsx

@@ -1,21 +1,24 @@
+import React from "react";
 import { TbChevronRight, TbChevronLeft, TbChevronRightPipe, TbChevronLeftPipe } from "react-icons/tb";
 
-const Pagination = ({ totalPages, currentPage, onPageChange }) => {
-  const pageNumbers = [];
+interface PaginationProps {
+  totalPages: number;
+  currentPage: number;
+  onPageChange: (page: number) => void;
+}
+
+const Pagination: React.FC<PaginationProps> = ({ totalPages, currentPage, onPageChange }) => {
   const maxPageNumbersToShow = 3;
 
-  const getPageNumbers = () => {
+  const getPageNumbers = (): (number | string)[] => {
     if (totalPages <= maxPageNumbersToShow) {
       return Array.from({ length: totalPages }, (_, i) => i + 1);
     }
 
-    const startPage = Math.max(
-      1,
-      currentPage - Math.floor(maxPageNumbersToShow / 2)
-    );
+    const startPage = Math.max(1, currentPage - Math.floor(maxPageNumbersToShow / 2));
     const endPage = Math.min(totalPages, startPage + maxPageNumbersToShow - 1);
 
-    const pages = [];
+    const pages: (number | string)[] = [];
     for (let i = startPage; i <= endPage; i++) {
       pages.push(i);
     }
@@ -33,11 +36,19 @@ const Pagination = ({ totalPages, currentPage, onPageChange }) => {
     return pages;
   };
 
+  const pageNumbers = getPageNumbers();
+
+  const handlePageChange = (page: number) => {
+    if (page >= 1 && page <= totalPages) {
+      onPageChange(page);
+    }
+  };
+
   return (
     <div className="flex justify-center m-4">
       <ul className="flex space-x-2">
         <li
-          onClick={() => onPageChange(1)}
+          onClick={() => handlePageChange(1)}
           className={`cursor-pointer px-2 md:px-3 py-2 rounded-lg content-center ${
             currentPage === 1
               ? "bg-gray-300 text-gray-500"
@@ -47,7 +58,7 @@ const Pagination = ({ totalPages, currentPage, onPageChange }) => {
           <TbChevronLeftPipe />
         </li>
         <li
-          onClick={() => onPageChange(Math.max(1, currentPage - 1))}
+          onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
           className={`cursor-pointer px-2 md:px-3 py-2 rounded-lg content-center ${
             currentPage === 1
               ? "bg-gray-300 text-gray-500"
@@ -56,10 +67,10 @@ const Pagination = ({ totalPages, currentPage, onPageChange }) => {
         >
           <TbChevronLeft />
         </li>
-        {getPageNumbers().map((number, index) => (
+        {pageNumbers.map((number, index) => (
           <li
             key={index}
-            onClick={() => number !== "..." && onPageChange(number)}
+            onClick={() => typeof number === 'number' && handlePageChange(number)}
             className={`cursor-pointer px-2 md:px-3 py-2 rounded-lg ${
               currentPage === number
                 ? "bg-yellow-500 text-white"
@@ -70,7 +81,7 @@ const Pagination = ({ totalPages, currentPage, onPageChange }) => {
           </li>
         ))}
         <li
-          onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
+          onClick={() => handlePageChange(Math.min(totalPages, currentPage + 1))}
           className={`cursor-pointer px-2 md:px-3 py-2 rounded-lg content-center ${
             currentPage === totalPages
               ? "bg-gray-300 text-gray-500"
@@ -80,7 +91,7 @@ const Pagination = ({ totalPages, currentPage, onPageChange }) => {
           <TbChevronRight />
         </li>
         <li
-          onClick={() => onPageChange(totalPages)}
+          onClick={() => handlePageChange(totalPages)}
           className={`cursor-pointer px-2 md:px-3 py-2 rounded-lg content-center ${
             currentPage === totalPages
               ? "bg-gray-300 text-gray-500"

frontend/src/components/SearchProperties.tsx

@@ -0,0 +1,46 @@
+import { FC, ChangeEvent, KeyboardEvent, useState } from "react";
+import { FiSearch } from "react-icons/fi";
+
+interface SearchPropertiesProps {
+  onSearch: (value: string) => void;
+}
+
+const SearchProperties: FC<SearchPropertiesProps> = ({ onSearch }) => {
+  const [text, setText] = useState<string>("");
+
+  const handleSearch = (value: string) => {
+    setText(value);
+    onSearch(value);
+  };
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      handleSearch(e.target.value);
+    };
+
+  const handleKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      handleSearch(text);
+    }
+  };
+
+  const handleClick = () => {
+    handleSearch(text);
+  };
+
+  return (
+    <span className="flex rounded-2xl border focus-within:ring-2 focus-within:ring-yellow-500 items-center">
+      <input
+        id="search"
+        type="text"
+        value={text}
+        onChange={handleChange}
+        onKeyDown={handleKeyPress}
+        placeholder="Search.."
+        className="rounded-2xl w-full pl-3 py-2 focus:outline-none"
+      />
+      <FiSearch className="fixed-end m-3 text-lg text-gray-500" onClick={handleClick}/>
+    </span>
+  );
+};
+
+export default SearchProperties;

frontend/src/components/buttons/PrimaryButton.jsx → frontend/src/components/buttons/PrimaryButton.tsx

@@ -1,4 +1,11 @@
-const PrimaryButton = ({ label, Icon }) => {
+import { FC, ComponentType } from "react";
+
+interface PrimaryButtonProps {
+  label: string;
+  Icon?: ComponentType<{ className?: string }> | null;
+}
+
+const PrimaryButton: FC<PrimaryButtonProps> = ({ label, Icon }) => {
   return (
     <button className="flex justify-center items-center px-7 py-4 border shadow-md hover:shadow-lg text-md font-semibold leading-none bg-yellow-500 rounded-3xl border-yellow-500 text-white">
       {label}

frontend/src/components/buttons/PrimarySubmitButton.jsx → frontend/src/components/buttons/PrimarySubmitButton.tsx

@@ -1,4 +1,11 @@
-const PrimarySubmitButton = ({ label, Icon }) => {
+import { FC, ComponentType } from "react";
+
+interface PrimarySubmitButtonProps {
+  label: string;
+  Icon?: ComponentType<{ className?: string }> | null;
+}
+
+const PrimarySubmitButton: FC<PrimarySubmitButtonProps> = ({ label, Icon }) => {
   return (
     <button
       type="submit"

frontend/src/components/buttons/SecondaryButton.jsx → frontend/src/components/buttons/SecondaryButton.tsx

@@ -1,4 +1,11 @@
-const SecondaryButton = ({ label, Icon }) => {
+import { FC, ComponentType } from "react";
+
+interface SecondaryButtonProps {
+  label: string;
+  Icon?: ComponentType<{ className?: string }> | null;
+}
+
+const SecondaryButton: FC<SecondaryButtonProps> = ({ label, Icon }) => {
   return (
     <button className="flex justify-center items-center px-7 py-4 border shadow-md hover:shadow-lg text-md leading-none rounded-3xl border-yellow-500">
       {label}

frontend/src/components/buttons/SecondarySubmitButton.jsx → frontend/src/components/buttons/SecondarySubmitButton.tsx

@@ -1,4 +1,11 @@
-const SecondarySubmitButton = ({ label, Icon }) => {
+import {FC, ComponentType} from "react";
+
+interface SecondarySubmitButtonProps {
+  label: string;
+  Icon?: ComponentType<{ className?: string }> | null;
+}
+
+const SecondarySubmitButton: FC<SecondarySubmitButtonProps> = ({ label, Icon }) => {
   return (
     <button
       type="submit"

frontend/src/index.js → frontend/src/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
 import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-);
+);