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 @@
{
"id": "4422",
"email": "test@krds.fr"
},
{
"id": "6c91",
"email": "anas@gmail.com"
},
{
"id": "68fd",
"email": "lucy@gmail.com"
}
],
"selectedSeats": [
......
src/Navigates.jsx
import { Routes, Route, Navigate } from 'react-router-dom';
import Login from './components/TopLevel/Login/Index';
import SeatBooking from './components/TopLevel/SeatBooking/Index';
import Login from './pages/LoginPage/Index';
// import SeatBooking from './components/TopLevel/SeatBooking/Index';
import { getItem } from '../src/lib/localStorage';
const Navigates = () => {
const isAuthenticated = getItem('user');
const RequireAuth = ({ children }) => {
return isAuthenticated ? children : <Navigate to="/login" replace />;
};
return (
<Routes>
<Route path="/login" element={<Login />} />
......@@ -14,7 +16,8 @@ const Navigates = () => {
path="/"
element={
<RequireAuth>
<SeatBooking />
{/* <SeatBooking /> */}
<div>SEAT BOOKING</div>
</RequireAuth>
}
/>
......
src/components/Layout/BookingWrapper/BookingWrapper.stories.jsx
......@@ -31,129 +31,278 @@ export const Default = {
{
row_id: 1,
columnData: [
{ id: 0, status: 'aisle' },
{ id: 1, status: 'reserved' },
{ id: 2, status: 'available' },
{ id: 3, status: 'reserved' },
{ id: 4, status: 'available' },
{ id: 0, status: 'aisle' },
{ id: 5, status: 'available' },
{ id: 6, status: 'reserved' },
{ id: 7, status: 'available' },
{ id: 8, status: 'reserved' },
{ id: 0, status: 'aisle' }
{
id: 0,
status: 'aisle'
},
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 0
},
{
id: 4
},
{
id: 5
},
{
id: 6
},
{
id: 0,
status: 'aisle'
}
]
},
{
row_id: 2,
columnData: [
{ id: 1, status: 'available' },
{ id: 2, status: 'available' },
{ id: 3, status: 'available' },
{ id: 4, status: 'available' },
{ id: 5, status: 'available' },
{ id: 0, status: 'aisle' },
{ id: 6, status: 'available' },
{ id: 7, status: 'available' },
{ id: 8, status: 'available' },
{ id: 9, status: 'available' },
{ id: 10, status: 'available' }
{
id: 1,
status: 'available'
},
{
id: 2,
status: 'available'
},
{
id: 3,
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,
columnData: [
{ id: 1, status: 'available' },
{ id: 2, status: 'available' },
{ id: 3, status: 'available' },
{ id: 4, status: 'available' },
{ id: 5, status: 'available' },
{ id: 0, status: 'aisle' },
{ id: 6, status: 'available' },
{ id: 7, status: 'available' },
{ id: 8, status: 'available' },
{ id: 9, status: 'available' },
{ id: 10, status: 'available' }
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
},
{
row_id: 4,
columnData: [
{ id: 1, status: 'available' },
{ id: 2, status: 'available' },
{ id: 3, status: 'available' },
{ id: 4, status: 'available' },
{ id: 5, status: 'available' },
{ id: 0, status: 'aisle' },
{ id: 6, status: 'available' },
{ id: 7, status: 'available' },
{ id: 8, status: 'available' },
{ id: 9, status: 'available' },
{ id: 10, status: 'available' }
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
},
{
row_id: 5,
columnData: [
{ id: 1, status: 'available' },
{ id: 2, status: 'available' },
{ id: 3, status: 'available' },
{ id: 4, status: 'available' },
{ id: 5, status: 'available' },
{ id: 0, status: 'aisle' },
{ id: 6, status: 'available' },
{ id: 7, status: 'available' },
{ id: 8, status: 'available' },
{ id: 9, status: 'available' },
{ id: 10, status: 'available' }
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
},
{
row_id: 6,
columnData: [
{ id: 1, status: 'available' },
{ id: 2, status: 'available' },
{ id: 3, status: 'available' },
{ id: 4, status: 'available' },
{ id: 5, status: 'available' },
{ id: 0, status: 'aisle' },
{ id: 6, status: 'available' },
{ id: 7, status: 'available' },
{ id: 8, status: 'available' },
{ id: 9, status: 'available' },
{ id: 10, status: 'available' }
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
},
{
row_id: 7,
columnData: [
{ id: 1, status: 'available' },
{ id: 2, status: 'available' },
{ id: 3, status: 'available' },
{ id: 4, status: 'available' },
{ id: 5, status: 'available' },
{ id: 0, status: 'aisle' },
{ id: 6, status: 'available' },
{ id: 7, status: 'available' },
{ id: 8, status: 'available' },
{ id: 9, status: 'available' },
{ id: 10, status: 'available' }
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 0
},
{
id: 5
},
{
id: 6
},
{
id: 7
},
{
id: 8
}
]
},
{
row_id: 8,
columnData: [
{ id: 0, status: 'aisle' },
{ id: 1, status: 'reserved' },
{ id: 2, status: 'available' },
{ id: 3, status: 'reserved' },
{ id: 4, status: 'available' },
{ id: 0, status: 'aisle' },
{ id: 5, status: 'available' },
{ id: 6, status: 'reserved' },
{ id: 7, status: 'available' },
{ id: 8, status: 'reserved' },
{ id: 9, status: 'available' }
{
id: 0,
status: 'aisle'
},
{
id: 1
},
{
id: 2
},
{
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 Input from '../../Base/Input/Index';
import Button from '../../Base/Button/Index';
import styles from './styles.module.css';
const Login = ({ handleSubmit }) => {
const [inputValue, setInputValue] = useState();
const onValueChange = (e) => {
setInputValue(e);
const Login = ({ onSubmit }) => {
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const data = { ...Object.fromEntries(formData) };
console.log(data?.email);
onSubmit(data?.email);
};
return (
<div className={styles.bg}>
<section className={styles.container}>
......@@ -18,19 +21,15 @@ const Login = ({ handleSubmit }) => {
Login with email and passoword to book seats.
</div>
</div>
<div className={styles.formWrapper}>
<form className={styles.formWrapper} onSubmit={(e) => handleSubmit(e)}>
<Input
label="Email"
name="email"
type="email"
placeholder="Enter email"
value={inputValue}
onChange={(e) => onValueChange(e.target.value)}
/>
<Button size={'md'} onClick={() => handleSubmit(inputValue)}>
Confirm
</Button>
</div>
<Button size={'md'}>Confirm</Button>
</form>
</section>
</div>
);
......@@ -39,5 +38,5 @@ const Login = ({ handleSubmit }) => {
export default Login;
Login.propTypes = {
handleSubmit: PropTypes.func.isRequired
onSubmit: PropTypes.func.isRequired
};
src/lib/AppConstants.js
export const appConstants = {
API_URL_SEATS: "http://192.168.1.73:3000/selectedSeats",
API_URL_USERS: "http://192.168.1.73:3000/users",
USER: "user",
MODAL: "modal"
}
API_URL_SEATS: 'http://192.168.1.73:3000/selectedSeats',
API_URL_USERS: 'http://192.168.1.73:3000/users',
USER: 'user',
MODAL: 'modal'
};
// 192.168.1.121
\ No newline at end of file
// 192.168.1.121
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 data = await response.json();
const user = data.find((e) => e.email == email);
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 () => {
const response = await fetch(`${appConstants.API_URL_SEATS}`);
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