Changeset 899b19d for frontend


Ignore:
Timestamp:
07/10/22 10:27:45 (2 years ago)
Author:
Danilo <danilo.najkov@…>
Branches:
master
Children:
a26f6a1
Parents:
cc4db18
Message:

reviews full feature

Location:
frontend/src
Files:
1 added
3 edited

Legend:

Unmodified
Added
Removed

  • frontend/src/App.js

    rcc4db18 r899b19d  
    11import './App.css';
    2 import {Route, BrowserRouter as Router, Navigate, Routes} from "react-router-dom";
     2import {Route, BrowserRouter as Router, Navigate, Routes, useNavigate} from "react-router-dom";
    33import axios from 'axios'
    44import env from './env'
    … …  
    1212import Restaurant from "./Dashboard/Restaurant";
    1313import Menu from "./Dashboard/Menu";
     14import Review from "./Dashboard/Review";
    1415
    1516
    1617function App() {
    17   const [user, setUser] = useState(false)
     18  const [user, setUser] = useState(undefined)
    1819  const [loading, setLoading] = useState(false)
    1920  useEffect(()=>{
    … …  
    2930    })
    3031  }
     32  const logout = () => {
     33    setUser(undefined);
     34    sessionStorage.removeItem('Auth');
     35    window.location.replace('/')
     36  }
    3137  return (
    3238    <div style={{textAlign:'center'}}>
    3339      <Router>
    3440          <Routes>
    35             <Route path="/dashboard" element={loading ? <Spin /> : user ?<Dashboard setUser={setUser}/> :  <Navigate to="/login" replace={true} />}>
     41            <Route path="/dashboard" element={loading ? <Spin /> : user ? (user.isAdmin ? <Dashboard setUser={setUser}/> : <Navigate to="/" replace={true} />) :  <Navigate to="/login" replace={true} />}>
    3642              <Route path="/dashboard" element={<Restaurant/>}/>
    3743              <Route path="/dashboard/menu" element={<Menu/>}/>
    3844              <Route path="/dashboard/reservations" element={<Reservations/>}/>
    39               <Route path="/dashboard/reviews" element={'reviews'}/>
     45              <Route path="/dashboard/reviews" element={<Review/>}/>
    4046              <Route path="/dashboard/todo" element={'todo'}/>
    4147            </Route>
    4248            <Route path="/login" element={loading ? <Spin /> :  !user ? <Login setUser={setUser}/> :  <Navigate to="/dashboard" replace={true} />}/>
    4349            <Route path="/register" element={loading ? <Spin /> :  !user ? <Register setUser={setUser}/> :  <Navigate to="/dashboard" replace={true} />}/>
    44             <Route path="/" element={<FrontPage/>}/>
     50            <Route path="/" element={<FrontPage user={user} logout={logout}/>}/>
    4551          </Routes>
    4652      </Router>

  • frontend/src/FrontPage.js

    rcc4db18 r899b19d  
    22import {Header} from "./Header";
    33import {useNavigate} from "react-router-dom";
    4 import {Button, Card, Image, Modal, Spin} from "antd";
     4import {Button, Card, DatePicker, Form, Image, Input, Modal, notification, Rate, Spin} from "antd";
    55import placeholderImage from '../src/Assets/placeholder.png'
    66import AddNewReservation from "./Dashboard/AddNewReservation";
    77import axios from "axios";
    88import env from "./env";
     9import Review from "./Dashboard/Review";
    910
    10 const FrontPage = ({}) => {
     11const FrontPage = ({user, logout}) => {
    1112    const [restaurant, setRestaurant] = useState({name:'Sample Restaurant name', address: 'Sample street 1', city:'Sample'});
    1213    const [newReservationModal, setNewReservationModal] = useState(false);
    1314    const [saveModalLoading, setSaveModalLoading] = useState(false);
     15    const [newReviewModal, setNewReviewModal] = useState(false);
    1416    const [loading, setLoading] = useState(true);
     17    const [refreshToggle, setRefreshToggle] = useState(false);
    1518    const history = useNavigate();
    1619
    … …  
    2326    },[])
    2427
     28    const saveNewReview = data =>{
     29        setSaveModalLoading(true)
     30        axios.post(env.api + 'Reviews',data,{ headers: {Authorization: sessionStorage.getItem('Auth')}}).then(res=>{
     31            setNewReviewModal(false)
     32            setSaveModalLoading(false)
     33            notification['success']({
     34                message: 'Успешно зачувано',
     35            });
     36            setRefreshToggle(ref => !ref);
     37        }).catch(err=>{
     38            setSaveModalLoading(false)
     39            notification['error']({
     40                message: 'Се случи проблем при зачувување',
     41            });
     42        });
     43    }
     44
    2545    return(
    2646        <div>
    27             <Header onClickButton={()=>history('/login')} buttonText={'Логирај се'}/>
     47            <Header onClickButton={!user?()=>history('/login'):logout} buttonText={!user?'Најави се':'Одјави се'}/>
    2848            {loading ? <Spin style={{margin: 20}}/> :
    2949                <div style={{
    … …  
    6989                    </div>
    7090                    <div style={{textAlign: 'start', backgroundColor: '#F2F2F2'}}>
    71                         <h2 style={{textAlign:'center',paddingTop:'20px'}}>Мени</h2>
     91                        <div style={{
     92                            width: '100%',
     93                            height:'75px',
     94                            backgroundColor: 'white',
     95                            padding: '20px',
     96                            border: '1px solid lightgray'
     97                        }} >
     98                            <h2 style={{float: 'left'}}>Мени</h2>
     99                        </div>
    72100                        {restaurant.menu.map(el =>
    73                             <Card title={el.title} style={{ width: 280, display:'inline-block', margin:'10px' }} size="small">
     101                            <Card key={el.id} title={el.title} style={{ width: 280, display:'inline-block', margin:'10px' }} size="small">
    74102                                <p>{el.description}</p>
    75103                                <b>{el.price} ден.</b>
    76104                            </Card>
    77105                        )}
     106                        <Review user={user} front refresh={refreshToggle} setVisible={setNewReviewModal}/>
    78107                    </div>
    79108                </div>
    … …  
    92121                <AddNewReservation setModalSaveLoading={setSaveModalLoading} setModalVisible={setNewReservationModal} />
    93122            </Modal>
     123            <Modal
     124                style={{top: 20}}
     125                width={'700px'}
     126                title="Нова оценка"
     127                footer={[
     128                    <Button form="newReviewForm" key="submit" htmlType="submit" type={'primary'} loading={saveModalLoading}>
     129                        Прати
     130                    </Button>
     131                ]}
     132                onCancel={()=>setNewReviewModal(false)}
     133                visible={newReviewModal}>
     134                <Form onFinish={saveNewReview}
     135                      id={'newReviewForm'}
     136                      onFinishFailed={()=>
     137                          notification['error']({
     138                              message: 'Ве молиме поправете ги сите грешки пред зачувување!',
     139                          })}>
     140                    <Form.Item
     141                        label="Наслов"
     142                        name="title"
     143                        rules={[
     144                            {
     145                                required: true,
     146                                message: 'Ве молиме внесете наслов!',
     147                            },
     148                        ]}
     149                    >
     150                        <Input/>
     151                    </Form.Item>
     152                    <Form.Item
     153                        label="Опис"
     154                        name="description"
     155                        rules={[
     156                            {
     157                                required: true,
     158                                message: 'Ве молиме внесете опис!',
     159                            },
     160                        ]}
     161                    >
     162                        <Input.TextArea rows={4}/>
     163                    </Form.Item>
     164                    <Form.Item
     165                        label="Оценка"
     166                        name="stars"
     167                        rules={[
     168                            {
     169                                required: true,
     170                                message: 'Ве молиме внесете оценка!',
     171                            },
     172                        ]}
     173                    >
     174                        <Rate/>
     175                    </Form.Item>
     176                </Form>
     177            </Modal>
    94178        </div>
    95 
    96179    )
    97180}
    98 
    99181export default FrontPage;

  • frontend/src/auth.js

    rcc4db18 r899b19d  
    2121            setAuthCookie(res.data.token)
    2222            console.log(res.data.token)
    23             setUser(true)
     23            setUser(res.data)
    2424            setLoading(false)
    25             history('/dashboard')
     25            history(res.data.isAdmin ? '/dashboard' : '/')
    2626        }).catch(el => {
    2727            Modal.error({
    … …  
    101101        axios.post(env.api+'Users/register',{email: attr.email, password: attr.password}).then(res => {
    102102            setAuthCookie(res.data.token)
    103             setUser(true)
     103            setUser(res.data)
    104104            setLoading(false)
    105             history('/dashboard')
     105            history(res.data.isAdmin ? '/dashboard' : '/')
    106106        })
    107107    }
Note: See TracChangeset for help on using the changeset viewer.