Merge pull request #15 from ladnishad/development

Frontend v1.1
ladnishad · Jan 22, 2023 · a2d0bd9 · a2d0bd9
2 parents 483a5a0 + 0d310bb
commit a2d0bd9
Show file tree

Hide file tree

Showing 23 changed files with 3,355 additions and 870 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,12 +18,14 @@
     "axios": "^0.26.1",
     "dayjs": "^1.11.3",
     "lodash": "^4.17.21",
+    "node-vibrant": "3.1.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.31.3",
     "react-material-ui-carousel": "^3.4.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "socket.io-client": "^4.5.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -53,6 +55,7 @@
   },
   "devDependencies": {
     "cross-env": "^7.0.3",
-    "tailwindcss": "^3.0.24"
+    "tailwindcss": "^3.0.24",
+    "worker-loader": "^3.0.8"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -3,12 +3,15 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-    rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+      href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
@@ -35,7 +38,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>ThatsMyPlane.com</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/helpers.js b/src/helpers.js
@@ -0,0 +1,23 @@
+import Vibrant from 'node-vibrant';
+
+// export const getAirlineProminentColor = async (airlineName) => {
+//   const response = await fetch(
+//     `https://www.googleapis.com/customsearch/v1?q=${encodeURIComponent(
+//       airlineName
+//     )}+logo&cx=017576662512468239146:omuauf_lfve&imgSize=large&imgType=news&num=1&searchType=image&key=YOUR_API_KEY`
+//   );
+//   const data = await response.json();
+//
+//   // Return the image URL of the first search result
+//   return data.items[0].link;
+// }
+
+export const getProminentColor = async(imageLink) => {
+  console.log("Function called");
+  const palette = await Vibrant.from(imageLink).getPalette();
+  const dominantColor = palette.Vibrant.getHex();
+
+  console.log(dominantColor);
+  // Return the dominant color as a CSS color string
+  return `${dominantColor}`;
+}
diff --git a/src/pages/components/AppFooter/FooterComponentNew.jsx b/src/pages/components/AppFooter/FooterComponentNew.jsx
@@ -1,162 +1,196 @@
-import React, { useState, useEffect } from 'react';
-import Box from '@mui/joy/Box';
-import Paper from '@mui/material/Paper';
-import ListItemDecorator from '@mui/joy/ListItemDecorator';
-import Container from '@mui/material/Container';
-import Tabs from '@mui/joy/Tabs';
-import TabList from '@mui/joy/TabList';
-import Tab, { tabClasses } from '@mui/joy/Tab';
-import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
-import ConnectingAirportsOutlinedIcon from '@mui/icons-material/ConnectingAirportsOutlined';
-import AddBoxOutlinedIcon from '@mui/icons-material/AddBoxOutlined';
-import NotificationsOutlinedIcon from '@mui/icons-material/NotificationsOutlined';
-import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
-import { Link, useNavigate, useLocation  } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import io from "socket.io-client";
+import Box from "@mui/joy/Box";
+import Paper from "@mui/material/Paper";
+import ListItemDecorator from "@mui/joy/ListItemDecorator";
+import Container from "@mui/material/Container";
+import Tabs from "@mui/joy/Tabs";
+import TabList from "@mui/joy/TabList";
+import Tab, { tabClasses } from "@mui/joy/Tab";
+import Badge from "@mui/joy/Badge";
+import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
+import ConnectingAirportsOutlinedIcon from "@mui/icons-material/ConnectingAirportsOutlined";
+import AddBoxOutlinedIcon from "@mui/icons-material/AddBoxOutlined";
+import NotificationsOutlinedIcon from "@mui/icons-material/NotificationsOutlined";
+import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
+import { Link, useNavigate, useLocation } from "react-router-dom";
+
+import useAuth from "../../../hooks/useAuth";
+
+const BASE_URL =
+  process.env.REACT_APP_ENV === "prod"
+    ? process.env.REACT_APP_PRODUCTION_API_ENDPOINT
+    : process.env.REACT_APP_LOCAL_API_ENDPOINT;
 
 export const BottomNavigationComponent = () => {
   const location = useLocation();
+  const { auth } = useAuth();
 
   const [value, setValue] = useState(0);
+  const [notificationsCount, setNotificationsCount] = useState(0);
 
   const navigate = useNavigate();
 
   useEffect(() => {
-    switch(location.pathname){
+    if (!auth?.userId) {
+      return;
+    }
+    const socket = io(BASE_URL, {
+      query: {
+        userId: auth?.userId,
+      },
+    });
+
+    socket.on("notificationsForUser", (notifications) => {
+      console.log("Notifications updated");
+      // Update the count on the bell icon
+      setNotificationsCount(notifications.length);
+    });
+
+    return () => {
+      socket.disconnect();
+    };
+  }, [auth]);
+
+  useEffect(() => {
+    switch (location.pathname) {
       case "/home":
-        setValue(0)
-        break
+        setValue(0);
+        break;
 
       case "/aircrafts":
-        setValue(1)
-        break
+        setValue(1);
+        break;
 
       case "/post":
-        setValue(2)
-        break
+        setValue(2);
+        break;
 
       case "/notifications":
-        setValue(3)
-        break
+        setValue(3);
+        break;
 
       case "/account":
-        setValue(4)
-        break
+        setValue(4);
+        break;
       default:
-        setValue(0)
-        break
+        setValue(0);
+        break;
     }
-  }, [location])
+  }, [location]);
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
 
-    switch(newValue){
+    switch (newValue) {
       case 0:
-        navigate("/home")
-        break
+        navigate("/home");
+        break;
 
       case 1:
-        navigate("/aircrafts")
-        break
+        navigate("/aircrafts");
+        break;
 
       case 2:
-        navigate("/post")
-        break
+        navigate("/post");
+        break;
 
       case 3:
-        navigate("/notifications")
-        break
+        navigate("/notifications");
+        break;
 
       case 4:
-        navigate("/account")
-        break
+        navigate("/account");
+        break;
       default:
-        navigate("/home")
-        break
+        navigate("/home");
+        break;
     }
   };
 
   return (
     <Box
-        sx={{
-          position: 'fixed',
-          bottom: -5,
-          left: 0,
-          right: 0,
-          m: -3,
-          mr: 0.1,
-          ml: 0.1,
-          p: 1,
-          py: 5,
-          borderRadius: 'sm',
-          bgcolor: "primary",
-        }}
-      >
-        <Container maxWidth="lg">
+      sx={{
+        position: "fixed",
+        bottom: -5,
+        left: 0,
+        right: 0,
+        m: -3,
+        mr: 0.1,
+        ml: 0.1,
+        p: 1,
+        py: 5,
+        borderRadius: "sm",
+        bgcolor: "primary",
+      }}
+    >
+      <Container maxWidth="lg">
         <Tabs
           size="lg"
           aria-label="Bottom Navigation"
           value={value}
           onChange={handleChange}
           sx={(theme) => ({
-            borderBottomLeftRadius: '1rem',
-            borderBottomRightRadius: '1rem',
-            borderTopLeftRadius: '1rem',
-            borderTopRightRadius: '1rem',
+            borderBottomLeftRadius: "1rem",
+            borderBottomRightRadius: "1rem",
+            borderTopLeftRadius: "1rem",
+            borderTopRightRadius: "1rem",
             width: "98%",
-            mx: 'auto',
+            mx: "auto",
             boxShadow: theme.shadow.sm,
-            '--Tabs-gap': '8px',
-            '--joy-shadowChannel': theme.vars.palette["primary"].darkChannel,
+            "--Tabs-gap": "8px",
+            "--joy-shadowChannel": theme.vars.palette["primary"].darkChannel,
             [`& .${tabClasses.root}`]: {
-              boxShadow: 'none',
-              borderRadius: 'lg',
-              whiteSpace: 'nowrap',
-              transition: '0.3s',
-              fontWeight: 'lg',
+              boxShadow: "none",
+              borderRadius: "lg",
+              whiteSpace: "nowrap",
+              transition: "0.3s",
+              fontWeight: "lg",
               flex: 1,
               [`&:not(.${tabClasses.selected}):not(:hover)`]: {
                 opacity: 0.72,
               },
             },
           })}
         >
-          <TabList variant="plain" sx={{ '--List-decorator-size': '28px' }}>
+          <TabList variant="plain" sx={{ "--List-decorator-size": "28px" }}>
             <Tab
               orientation="vertical"
-              {...(value === 0 && { variant: 'soft', color: "primary" })}
+              {...(value === 0 && { variant: "soft", color: "primary" })}
             >
               <ListItemDecorator>
                 <HomeOutlinedIcon />
               </ListItemDecorator>
             </Tab>
             <Tab
               orientation="vertical"
-              {...(value === 1 && { variant: 'soft', color: "primary" })}
+              {...(value === 1 && { variant: "soft", color: "primary" })}
             >
               <ListItemDecorator>
                 <ConnectingAirportsOutlinedIcon />
               </ListItemDecorator>
             </Tab>
             <Tab
               orientation="vertical"
-              {...(value === 2 && { variant: 'soft', color: "primary" })}
+              {...(value === 2 && { variant: "soft", color: "primary" })}
             >
               <ListItemDecorator>
                 <AddBoxOutlinedIcon />
               </ListItemDecorator>
             </Tab>
             <Tab
               orientation="vertical"
-              {...(value === 3 && { variant: 'soft', color: "primary" })}
+              {...(value === 3 && { variant: "soft", color: "primary" })}
             >
               <ListItemDecorator>
-                <NotificationsOutlinedIcon />
+                <Badge badgeContent={notificationsCount}>
+                  <NotificationsOutlinedIcon />
+                </Badge>
               </ListItemDecorator>
             </Tab>
             <Tab
               orientation="vertical"
-              {...(value === 4 && { variant: 'soft', color: "primary" })}
+              {...(value === 4 && { variant: "soft", color: "primary" })}
             >
               <ListItemDecorator>
                 <PersonOutlineOutlinedIcon />
@@ -165,6 +199,6 @@ export const BottomNavigationComponent = () => {
           </TabList>
         </Tabs>
       </Container>
-      </Box>
+    </Box>
   );
-}
+};