Merge pull request #77 from advanced-computer-lab-2023/video-chat

alternative_medicines_36
advanced-computer-lab-2023 · Dec 17, 2023 · 5e73b7d · 5e73b7d
2 parents cbc50c1 + 26720fe
commit 5e73b7d
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 31 deletions.
diff --git a/client/src/sections/products/product-details.jsx b/client/src/sections/products/product-details.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import axios from 'axios';
-import { useEffect, useState } from 'react';
+import { useState,useEffect } from 'react';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import Card from '@mui/material/Card';
@@ -26,6 +26,22 @@ export default function ProductDetails({ product, onCloseProductDetails }) {
   const [medicineProduct, setMedicineProduct] = useState(product);
   const [isArchived, setIsArchived] = useState(product.isArchived);
   const [uploadImg, setUploadImg] = useState('');
+  const [alternativeProducts, setAlternativeProducts] = useState([]);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+
+  const alternatives = async () => {
+    try{
+      const response = await axios.get(`http://localhost:3000/medicine`);
+      setAlternativeProducts(response.data.result);
+      console.log(response);
+    }
+    catch (error) {
+      console.error(error.message);
+    }
+  }
+  useEffect(() => {
+    alternatives();
+  }, []);
   const [isEditModalOpen, setIsEditMadalOpen] = useState(false);
   // useEffect(() => {
   //   const loadMedicineProduct = async () => {
@@ -172,7 +188,14 @@ export default function ProductDetails({ product, onCloseProductDetails }) {
       </Card>
     );
   }
+
+  const filteredAlternatives = alternativeProducts?.filter((alternative) =>
+  alternative.activeIngredients.some((ingredient) =>
+    medicineProduct.activeIngredients.includes(ingredient)
+  )
+) || [];
   return (
+    <Box>
     <Card>
       <IconButton onClick={onCloseProductDetails} color="primary" aria-label="back">
         <ArrowBackIcon />
@@ -185,7 +208,6 @@ export default function ProductDetails({ product, onCloseProductDetails }) {
             {medicineProduct._id && renderStatus}
             {user === 'Pharmacist' && renderArchiveButton}
             {user == 'Pharmacist' && renderAddNewImageButton}
-            {user == 'Pharmacist' && renderEditMedicineButton}
           </Stack>
         </Stack>
       </Stack>
@@ -195,34 +217,48 @@ export default function ProductDetails({ product, onCloseProductDetails }) {
             {medicineProduct.name}
           </Link>
 
-          <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ pl: 2 }}>
-            {/* <ColorPreview colors={['red', 'blue', 'yellow', 'green']} /> */}
-            {/* it suppose here to be medicineProduct.colors */}
-            {renderPrice}
+              <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ pl: 2 }}>
+                {/* <ColorPreview colors={['red', 'blue', 'yellow', 'green']} /> */}
+                {/* it suppose here to be medicineProduct.colors */}
+                {renderPrice}
+              </Stack>
+            </Stack>
+            {user === 'Pharmacist' && (
+              <Stack spacing={1} sx={{ p: 3 }}>
+                <Typography color="inherit" underline="hover" variant="subtitle2">
+                  items left in the stock
+                </Typography>
+                <Typography color="inherit" underline="hover" variant="subtitle2" sx={{ pl: 7 }}>
+                  {medicineProduct.numStock}
+                </Typography>
+              </Stack>
+            )}
+            {user === 'Pharmacist' && (
+              <Stack spacing={1} sx={{ p: 3 }}>
+                <Typography color="inherit" underline="hover" variant="subtitle2">
+                  items sold
+                </Typography>
+                <Typography color="inherit" underline="hover" variant="subtitle2" sx={{ pl: 4 }}>
+                  {medicineProduct.numSold}
+                </Typography>
+              </Stack>
+            )}
           </Stack>
-        </Stack>
-        {user === 'Pharmacist' && (
-          <Stack spacing={1} sx={{ p: 3 }}>
-            <Typography color="inherit" underline="hover" variant="subtitle2">
-              items left in the stock
-            </Typography>
-            <Typography color="inherit" underline="hover" variant="subtitle2" sx={{ pl: 7 }}>
-              {medicineProduct.numStock}
-            </Typography>
-          </Stack>
-        )}
-        {user === 'Pharmacist' && (
-          <Stack spacing={1} sx={{ p: 3 }}>
-            <Typography color="inherit" underline="hover" variant="subtitle2">
-              items sold
-            </Typography>
-            <Typography color="inherit" underline="hover" variant="subtitle2" sx={{ pl: 4 }}>
-              {medicineProduct.numSold}
-            </Typography>
-          </Stack>
-        )}
-      </Stack>
-    </Card>
+        </Card>
+        {medicineProduct.numStock === 0 && (
+        <Card>
+          <Typography variant="h5" mt={3}>
+            Alternative Products
+          </Typography>
+          {filteredAlternatives.map((alternative) => (
+            <Card key={alternative._id}>
+              <Typography>{alternative.name}</Typography>
+            </Card>
+          ))}
+        </Card>
+      )}
+      </Box>  
+
   );
 }
 

diff --git a/client/src/sections/textChat/components/UsersList.jsx b/client/src/sections/textChat/components/UsersList.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { axiosInstance } from '../../../utils/axiosInstance';
 import Chat from './Chat';
-import { Typography, List, ListItem, ListItemText, Paper, Box, Divider } from '@mui/material';
+import { Typography, List, ListItem, ListItemText, Paper, Box, Divider,Button } from '@mui/material';
 import io from 'socket.io-client';
 
 function UsersList({ ioUrl, contactUrl }) {
@@ -16,6 +16,33 @@ function UsersList({ ioUrl, contactUrl }) {
         setSelectedUser(user);
     };
 
+    var firstTime = true;
+    //const myGmail = localStorage.getItem('userEmail')
+    //console.log(myGmail);
+
+    const handleVideoChat = async (user) => {
+        try {
+            if (firstTime) {
+                firstTime = false;
+
+                await fetch('http://localhost:3000/video-permission', {
+                    method: 'GET',
+                });
+
+            } else {
+                // Open a new tab with Google Calendar URL
+                window.open('https://calendar.google.com/', '_blank');
+
+                // Use fetch for the second time with a request body
+                await fetch('http://localhost:3000/video-permission/schedule-videoCall', {
+                    method: 'GET',
+                });
+            }
+        } catch (error) {
+            console.error('Error initiating video chat:', error);
+        }
+    };
+
     const handleChatClose = () => {
         setSelectedUser(null);
         console.log("in chat close ");
@@ -138,6 +165,8 @@ function UsersList({ ioUrl, contactUrl }) {
                                     '&:hover': {
                                         backgroundColor: '#c2e2ff', // Lighter Blue on Hover
                                     },
+                                    //display: 'flex',
+                                    //alignItems: 'center'
                                 }}
                                 onClick={() => handleUserClick(user)}
                             >
@@ -166,6 +195,16 @@ function UsersList({ ioUrl, contactUrl }) {
                                         </div>
                                     </div>
                                 )}
+                                                <Button
+                                                    variant="outlined"
+                                                    onClick={(e) =>{
+                                                        e.stopPropagation();
+                                                        handleVideoChat(user)
+                                                    }}
+                                                    style={{ marginLeft: 'auto' }}
+                                                >
+                                                        Video Chat
+                                                 </Button>
                             </ListItem>
                             <Divider sx={{ backgroundColor: '#bdbdbd' }} />
                         </React.Fragment>

diff --git a/server/src/.env.example b/server/src/.env.example
@@ -9,4 +9,12 @@ STRIPE_SECRET_KEY=sk_test_51Muur1KGvucEcQBJeB9RUYEoUMfXUdhvZu6k7HEtjJ7M2uMH2IcUV
 REDIS_SECRET_PASS=W6Q5Zzw7VtA0ZZAc9TfxD9FeAsK7ZZ8n
 
 EMAIL_USER=[email protected]
-EMAIL_PASSWORD=zxwe qojz lnyl bllb
+EMAIL_PASSWORD=zxwe qojz lnyl bllb
+
+CLIENT_ID=117708553016-pq87ruofdghn10jhqgredem0bd620q4t.apps.googleusercontent.com
+
+CLIENT_SECRET=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
+
+REDIRECT_URI=http://localhost:3000/video-permission/google
+
+API_KEY=AIzaSyAzJNgnb_HJkC-3aKUZnXK_Hdn6cphYG-o