Skip to content

S
seat-booking
Commit afaedd02 by Syed Abdul Rahman
Options

code refactoring in progress

parent dc0416e8
Showing with 308 additions and 112 deletions
db.json
...@@ -15,6 +15,14 @@ ...@@ -15,6 +15,14 @@
{ {
"id": "4422", "id": "4422",
"email": "test@krds.fr" "email": "test@krds.fr"
},
{
"id": "6c91",
"email": "anas@gmail.com"
},
{
"id": "68fd",
"email": "lucy@gmail.com"
} }
], ],
"selectedSeats": [ "selectedSeats": [
......
src/Navigates.jsx
import { Routes, Route, Navigate } from 'react-router-dom'; import { Routes, Route, Navigate } from 'react-router-dom';
import Login from './components/TopLevel/Login/Index'; import Login from './pages/LoginPage/Index';
import SeatBooking from './components/TopLevel/SeatBooking/Index'; // import SeatBooking from './components/TopLevel/SeatBooking/Index';
import { getItem } from '../src/lib/localStorage'; import { getItem } from '../src/lib/localStorage';
const Navigates = () => { const Navigates = () => {
const isAuthenticated = getItem('user'); const isAuthenticated = getItem('user');
const RequireAuth = ({ children }) => { const RequireAuth = ({ children }) => {
return isAuthenticated ? children : <Navigate to="/login" replace />; return isAuthenticated ? children : <Navigate to="/login" replace />;
}; };
return ( return (
<Routes> <Routes>
<Route path="/login" element={<Login />} /> <Route path="/login" element={<Login />} />
...@@ -14,7 +16,8 @@ const Navigates = () => { ...@@ -14,7 +16,8 @@ const Navigates = () => {
path="/" path="/"
element={ element={
<RequireAuth> <RequireAuth>
<SeatBooking /> {/* <SeatBooking /> */}
<div>SEAT BOOKING</div>
</RequireAuth> </RequireAuth>
} }
/> />
......
src/components/Layout/BookingWrapper/BookingWrapper.stories.jsx
...@@ -31,129 +31,278 @@ export const Default = { ...@@ -31,129 +31,278 @@ export const Default = {
{ {
row_id: 1, row_id: 1,
columnData: [ columnData: [
{ id: 0, status: 'aisle' }, {
{ id: 1, status: 'reserved' }, id: 0,
{ id: 2, status: 'available' }, status: 'aisle'
{ id: 3, status: 'reserved' }, },
{ id: 4, status: 'available' }, {
{ id: 0, status: 'aisle' }, id: 1
{ id: 5, status: 'available' }, },
{ id: 6, status: 'reserved' }, {
{ id: 7, status: 'available' }, id: 2
{ id: 8, status: 'reserved' }, },
{ id: 0, status: 'aisle' } {
id: 3
},
{
id: 0
},
{
id: 4
},
{
id: 5
},
{
id: 6
},
{
id: 0,
status: 'aisle'
}
] ]
}, },
{ {
row_id: 2, row_id: 2,
columnData: [ columnData: [
{ id: 1, status: 'available' }, {
{ id: 2, status: 'available' }, id: 1,
{ id: 3, status: 'available' }, status: 'available'
{ id: 4, status: 'available' }, },
{ id: 5, status: 'available' }, {
{ id: 0, status: 'aisle' }, id: 2,
{ id: 6, status: 'available' }, status: 'available'
{ id: 7, status: 'available' }, },
{ id: 8, status: 'available' }, {
{ id: 9, status: 'available' }, id: 3,
{ id: 10, status: 'available' } status: 'available'
},
{
id: 4,
status: 'available'
},
{
id: 0,
status: 'aisle'
},
{
id: 5,
status: 'available'
},
{
id: 6,
status: 'available'
},
{
id: 7,
status: 'available'
},
{
id: 8,
status: 'available'
}
] ]
}, },
{ {
row_id: 3, row_id: 3,
columnData: [ columnData: [
{ id: 1, status: 'available' }, {
{ id: 2, status: 'available' }, id: 1
{ id: 3, status: 'available' }, },
{ id: 4, status: 'available' }, {
{ id: 5, status: 'available' }, id: 2
{ id: 0, status: 'aisle' }, },
{ id: 6, status: 'available' }, {
{ id: 7, status: 'available' }, id: 3
{ id: 8, status: 'available' }, },
{ id: 9, status: 'available' }, {
{ id: 10, status: 'available' } id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
] ]
}, },
{ {
row_id: 4, row_id: 4,
columnData: [ columnData: [
{ id: 1, status: 'available' }, {
{ id: 2, status: 'available' }, id: 1
{ id: 3, status: 'available' }, },
{ id: 4, status: 'available' }, {
{ id: 5, status: 'available' }, id: 2
{ id: 0, status: 'aisle' }, },
{ id: 6, status: 'available' }, {
{ id: 7, status: 'available' }, id: 3
{ id: 8, status: 'available' }, },
{ id: 9, status: 'available' }, {
{ id: 10, status: 'available' } id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
] ]
}, },
{ {
row_id: 5, row_id: 5,
columnData: [ columnData: [
{ id: 1, status: 'available' }, {
{ id: 2, status: 'available' }, id: 1
{ id: 3, status: 'available' }, },
{ id: 4, status: 'available' }, {
{ id: 5, status: 'available' }, id: 2
{ id: 0, status: 'aisle' }, },
{ id: 6, status: 'available' }, {
{ id: 7, status: 'available' }, id: 3
{ id: 8, status: 'available' }, },
{ id: 9, status: 'available' }, {
{ id: 10, status: 'available' } id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
] ]
}, },
{ {
row_id: 6, row_id: 6,
columnData: [ columnData: [
{ id: 1, status: 'available' }, {
{ id: 2, status: 'available' }, id: 1
{ id: 3, status: 'available' }, },
{ id: 4, status: 'available' }, {
{ id: 5, status: 'available' }, id: 2
{ id: 0, status: 'aisle' }, },
{ id: 6, status: 'available' }, {
{ id: 7, status: 'available' }, id: 3
{ id: 8, status: 'available' }, },
{ id: 9, status: 'available' }, {
{ id: 10, status: 'available' } id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
] ]
}, },
{ {
row_id: 7, row_id: 7,
columnData: [ columnData: [
{ id: 1, status: 'available' }, {
{ id: 2, status: 'available' }, id: 1
{ id: 3, status: 'available' }, },
{ id: 4, status: 'available' }, {
{ id: 5, status: 'available' }, id: 2
{ id: 0, status: 'aisle' }, },
{ id: 6, status: 'available' }, {
{ id: 7, status: 'available' }, id: 3
{ id: 8, status: 'available' }, },
{ id: 9, status: 'available' }, {
{ id: 10, status: 'available' } id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
] ]
}, },
{ {
row_id: 8, row_id: 8,
columnData: [ columnData: [
{ id: 0, status: 'aisle' }, {
{ id: 1, status: 'reserved' }, id: 0,
{ id: 2, status: 'available' }, status: 'aisle'
{ id: 3, status: 'reserved' }, },
{ id: 4, status: 'available' }, {
{ id: 0, status: 'aisle' }, id: 1
{ id: 5, status: 'available' }, },
{ id: 6, status: 'reserved' }, {
{ id: 7, status: 'available' }, id: 2
{ id: 8, status: 'reserved' }, },
{ id: 9, status: 'available' } {
id: 3
},
{
id: 0
},
{
id: 4
},
{
id: 5
},
{
id: 6
},
{
id: 0,
status: 'aisle'
}
] ]
} }
], ],
......
src/components/TopLevel/Login/Index.jsx
import { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Input from '../../Base/Input/Index'; import Input from '../../Base/Input/Index';
import Button from '../../Base/Button/Index'; import Button from '../../Base/Button/Index';
import styles from './styles.module.css'; import styles from './styles.module.css';
const Login = ({ handleSubmit }) => { const Login = ({ onSubmit }) => {
const [inputValue, setInputValue] = useState(); const handleSubmit = (e) => {
const onValueChange = (e) => { e.preventDefault();
setInputValue(e); const formData = new FormData(e.target);
const data = { ...Object.fromEntries(formData) };
console.log(data?.email);
onSubmit(data?.email);
}; };
return ( return (
<div className={styles.bg}> <div className={styles.bg}>
<section className={styles.container}> <section className={styles.container}>
...@@ -18,19 +21,15 @@ const Login = ({ handleSubmit }) => { ...@@ -18,19 +21,15 @@ const Login = ({ handleSubmit }) => {
Login with email and passoword to book seats. Login with email and passoword to book seats.
</div> </div>
</div> </div>
<div className={styles.formWrapper}> <form className={styles.formWrapper} onSubmit={(e) => handleSubmit(e)}>
<Input <Input
label="Email" label="Email"
name="email" name="email"
type="email" type="email"
placeholder="Enter email" placeholder="Enter email"
value={inputValue}
onChange={(e) => onValueChange(e.target.value)}
/> />
<Button size={'md'} onClick={() => handleSubmit(inputValue)}> <Button size={'md'}>Confirm</Button>
Confirm </form>
</Button>
</div>
</section> </section>
</div> </div>
); );
...@@ -39,5 +38,5 @@ const Login = ({ handleSubmit }) => { ...@@ -39,5 +38,5 @@ const Login = ({ handleSubmit }) => {
export default Login; export default Login;
Login.propTypes = { Login.propTypes = {
handleSubmit: PropTypes.func.isRequired onSubmit: PropTypes.func.isRequired
}; };
src/lib/AppConstants.js
export const appConstants = { export const appConstants = {
API_URL_SEATS: "http://192.168.1.73:3000/selectedSeats", API_URL_SEATS: 'http://192.168.1.73:3000/selectedSeats',
API_URL_USERS: "http://192.168.1.73:3000/users", API_URL_USERS: 'http://192.168.1.73:3000/users',
USER: "user", USER: 'user',
MODAL: "modal" MODAL: 'modal'
} };
// 192.168.1.121 // 192.168.1.121
\ No newline at end of file
src/lib/api.js
export const login = async () => { import { appConstants } from '../lib/AppConstants';
export const login = async (email) => {
const response = await fetch(`${appConstants.API_URL_USERS}`); const response = await fetch(`${appConstants.API_URL_USERS}`);
const data = await response.json(); const data = await response.json();
const user = data.find((e) => e.email == email); const user = data.find((e) => e.email == email);
return user; return user;
}; };
export const createUser = async (email) => {
const response = await fetch(`${appConstants.API_URL_USERS}`, {
method: 'POST',
body: JSON.stringify({
email: email
})
});
const data = await response.json();
return data;
};
export const getSelectedSeats = async () => { export const getSelectedSeats = async () => {
const response = await fetch(`${appConstants.API_URL_SEATS}`); const response = await fetch(`${appConstants.API_URL_SEATS}`);
const data = await response.json(); const data = await response.json();
......
src/pages/LoginPage/Index.jsx 0 → 100644
import { useNavigate } from 'react-router-dom';
import Login from '../../components/TopLevel/Login/Index';
import { login, createUser } from '../../lib/api';
import { setItem } from '../../lib/localStorage';
import styles from './styles.module.css';
const LoginPage = () => {
const navigate = useNavigate();
const onSubmit = async (email) => {
const userData = await login(email);
if (userData) {
navigate('/');
setItem('user', userData.id);
setItem('modal', true);
} else {
const data = await createUser(email);
navigate('/');
setItem('user', data.id);
setItem('modal', true);
}
};
return <Login onSubmit={onSubmit} />;
};
export default LoginPage;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment