Changeset 13f1472 for frontend/src/FrontPage.js

Timestamp:

09/18/22 18:09:53 (22 months ago)

Author:

Danilo <danilo.najkov@…>

Branches:

master

Parents:

49b0bbd

Message:

vip functionallity + menu fields + alergens filtering + google/fb login + email queueing

File:

• frontend/src/FrontPage.js (modified) (7 diffs)

frontend/src/FrontPage.js

@@ -2 +2 @@
 import {Header} from "./Header";
 import {Link, useNavigate} from "react-router-dom";
-import {Button, Card, DatePicker, Form, Image, Input, Modal, notification, Rate, Spin} from "antd";
+import {Button, Card, DatePicker, Form, Image, Input, Modal, notification, Rate, Spin, Upload} from "antd";
 import placeholderImage from '../src/Assets/placeholder.png'
 import AddNewReservation from "./Dashboard/AddNewReservation";
@@ -8 +8 @@
 import env from "./env";
 import Review from "./Dashboard/Review";
+import {PlusOutlined} from "@ant-design/icons";
 
 const FrontPage = ({user, logout}) => {
@@ -17 +18 @@
     const [refreshToggle, setRefreshToggle] = useState(false);
     const history = useNavigate();
+    const [filteredMenuItems, setFilteredMenuItems] = useState([]);
 
     useEffect(()=>{
@@ -22 +24 @@
         axios.get(env.api + 'Restaurants').then(res=>{
             setRestaurant(res.data);
+            console.log(user);
+            if(!user || !user.isVip){
+                setFilteredMenuItems(res.data.menu.filter(x => !x.isVipOnly));
+            }else{
+                setFilteredMenuItems(res.data.menu.sort((x,y) => x.isVipOnly ? -1 : 1));
+            }
             setLoading(false);
         });
-    },[])
+    },[user])
 
     useEffect(()=>{
@@ -33 +41 @@
         }
     },[user])
+
+    const updateSearchValue = (value) => {
+        const val = value.target.value.toLowerCase();
+        setFilteredMenuItems(items=>{
+            if(val.length==0){
+                return restaurant.menu;
+            }
+            const its = val.split(' ');
+            let allItems = []
+            if(!user || !user.isVip){
+                allItems = [...restaurant.menu.filter(x => !x.isVipOnly)]
+            }else{
+                allItems = [...restaurant.menu.sort(x => x.isVipOnly)]
+            }
+            for(let it of its){
+                if(it.length>0)
+                    allItems = allItems.filter(x => !x.alergens.includes(it));
+            }
+            return allItems;
+        })
+    }
 
     const saveNewReview = data =>{
@@ -53 +82 @@
     return(
         <div>
-            <Header onClickButton={!user?()=>history('/login'):logout} buttonText={!user?'Најави се':'Одјави се'}/>
+            <Header onClickButton={!user?()=>history('/login'):logout} buttonText={!user?'Најави се':'Одјави се'} isVip={user && user.isVip}/>
             {loading ? <Spin style={{margin: 20}}/> :
                 <div style={{
@@ -105 +134 @@
                         }} >
                             <h2 style={{float: 'left'}}>Мени</h2>
+                            <Input.Search onChange={updateSearchValue} placeholder={'Филтрирај алергени'} style={{float:'right', width:'200px'}}/>
                         </div>
-                        {restaurant.menu.map(el =>
-                            <Card key={el.id} title={el.title} style={{ width: 280, display:'inline-block', margin:'10px' }} size="small">
+                        {filteredMenuItems.map(el =>
+                            <Card
+                                key={el.id}
+                                title={el.title}
+                                extra={el.isVipOnly ? <span style={{color:'orange',fontWeight:'bold'}}>VIP </span>:''}
+                                style={{ width: 280, display:'inline-block', margin:'10px',verticalAlign:'middle' }}
+                                size="small"
+                                cover={el.image != "data:image/png;base64," ? <img style={{cursor: 'pointer'}} src={el.image} alt="avatar"
+                                                                                    height='100px' width={'270px'}/> : ''}
+                            >
                                 <p>{el.description}</p>
+                                <p>Алергени: {el.alergens.length ==0 ? 'Нема' : el.alergens}</p>
                                 <b>{el.price} ден.</b>
                             </Card>