ujkjk

client/src/App.css

@@ -0,0 +1,22 @@
+@import '~antd/dist/antd.css';
+
+
+.App {
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+input{
+
+ height: 30px;
+ width: 200px;
+ font-size: 25px;
+ margin: 5px;
+}
+
+
+
+

client/src/App.js

@@ -0,0 +1,120 @@
+import { useState, useEffect } from 'react';
+import Axios from 'axios';
+import './App.css';
+import Register from './Pages/Register';
+import Register1 from './Pages/Register1';
+import FrontPage from './Pages/FrontPage';
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+
+function App() {
+ return (
+ <div className='App'>
+ <div>
+ <Router>
+ <Routes>
+ <Route exact path='/' element={<FrontPage />} />
+ {/* <Route exact path="/queryPage" element={<QueryPage />} />
+ <Route exact path = "/showPost" element={<ShowPost/>}/> */}
+
+ {/* <Route exact path="/post" element={<Post />} /> */}
+ <Route path='/register' element={<Register />} />
+
+ {/* <Route
+ path="/login"
+ element={<LogIn setLoginUser={setLoginUser} />}
+ /> */}
+ </Routes>
+ </Router>
+ {/* <Register/> */}
+ </div>
+
+ {/* <Register1 /> */}
+
+ {/* <Register /> */}
+ {/* <FrontPage /> */}
+ </div>
+ );
+}
+
+// function App() {
+
+// // const [Dname,setDname] = useState('');
+// // const [Bgroup,setBgroup] = useState('');
+
+// // const [DonorList,setDonorList] = useState([]);
+
+// // const [newDName,setNewDname] = useState('');
+
+// // useEffect(()=>{
+// // Axios.get("http:https://localhost:3001/read").then((response)=>{
+// // console.log(response);
+// // setDonorList(response.data)
+// // })
+
+// // },[])
+
+// // const RegisterDonor = ()=>{
+
+// // Axios.post("http:https://localhost:3001/",{
+// // DonorName: Dname,
+// // BloodGroup: Bgroup,
+
+// // });
+
+// // // console.log(Dname+' '+Bgroup);
+
+// // };
+
+// // const updateDonor = (id)=>{
+
+// // Axios.put("http:https://localhost:3001/update",{
+// // id:id,
+// // newDName:newDName
+
+// // })
+// // }
+
+// // const deleteDonor = (id)=>{
+// // Axios.delete(`http:https://localhost:3001/delete/${id}`);
+// // }
+
+// return (
+// <div className="App">
+// {/* <h1>Blood For life</h1>
+// <div className="App">
+// <label>Donor Name</label>
+// <input type="text" onChange={(event)=>
+// setDname(event.target.value)
+// }/>
+// <label> Blood Group</label>
+// <input type="text" onChange={(event)=>
+// setBgroup(event.target.value)
+// }/>
+// </div>
+
+// <button onClick={RegisterDonor}>Register</button>
+
+// <h1>Donor List</h1>
+
+// {DonorList.map((val,key)=>{
+// return <div key={key}>
+// <h1>{val.DonorName}</h1>
+// <h1>{val.BloodGroup}</h1>
+// <input type= "text" placeholder="Upate your name.."
+// onChange={(event)=>
+// setNewDname(event.target.value)
+// }/>
+// <button onClick={()=>updateDonor(val._id)}>Update</button>
+// <button onClick = {()=>deleteDonor(val._id)}>Delete</button>
+// </div>
+// })}
+
+// */}
+
+// <Register />
+
+// </div>
+// );
+// }
+
+export default App;

client/src/Pages/FrontPage.css

@@ -0,0 +1,19 @@
+.background {
+
+ height: 100vh;
+ width: 100vw;
+
+ background-image: url('./Images/FrontPage_background.jpg');
+}
+
+.header{
+
+ font-size: 50px;
+ color: rgb(220, 20, 20); 
+}
+
+.SignUpButton {
+ margin-left: 1000px;
+ /* padding: 26px 16px 16px; */
+ background: rgb(7, 54, 54);
+ }

client/src/Pages/FrontPage.js

@@ -0,0 +1,29 @@
+import { Button, Radio } from 'antd';
+import { DownloadOutlined } from '@ant-design/icons';
+import frontPage from './FrontPage.css';
+import { useNavigate } from 'react-router-dom';
+// import { useRouter } from "next/router";
+
+//import {useRouter} from "next/router";
+
+const FrontPage = () => {
+ const navigate = useNavigate();
+ //const router = useRouter();
+
+ return (
+ <div className='background'>
+ <h1 className='header'> Blood For Life</h1>
+ <Button
+ className='SignUpButton'
+ type='dashed'
+ ghost
+ onClick={() => {
+ navigate('/Register');
+ }}>
+ Sign Up
+ </Button>
+ </div>
+ );
+};
+
+export default FrontPage;

client/src/Pages/Pages/Demo.js

@@ -0,0 +1,7 @@
+export default function Demo() {
+ return(
+ <div style={{backgroundColor: "red", height: "100vh"}}>
+ habijabi
+ </div>
+ );
+}

client/src/Pages/Pages/Edit.js

@@ -0,0 +1,163 @@
+import Axios from 'axios';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { DatePicker, Space } from 'antd';
+
+import { Form, Input, Select, Button } from 'antd';
+const { Option } = Select;
+const formItemLayout = {
+ labelCol: {
+ xs: {
+ span: 24,
+ },
+ sm: {
+ span: 12,
+ },
+ },
+ wrapperCol: {
+ xs: {
+ span: 24,
+ },
+ sm: {
+ span: 16,
+ },
+ },
+};
+const tailFormItemLayout = {
+ wrapperCol: {
+ xs: {
+ span: 24,
+ offset: 0,
+ },
+ sm: {
+ span: 16,
+ offset: 8,
+ },
+ },
+};
+
+const Edit = () => {
+ const [form] = Form.useForm();
+
+ const navigate = useNavigate();
+
+ const [user, setUser] = useState({
+ location: '',
+ phone: '',
+ lastDonation: '',
+ });
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setUser({
+ ...user,
+ [name]: value,
+ });
+ console.log(name, value);
+ };
+
+ const handleChangeSelect = (key, value) => {
+ setUser({
+ ...user,
+ [key]: value,
+ });
+ console.log(key, value);
+ };
+
+ const submit = () => {
+ console.log(user);
+
+ const { location, phone, lastDonation } = user;
+
+ if (location || phone || lastDonation) {
+ console.log(user);
+
+ Axios.put('http:https://localhost:3001/Edit', user).then((res) => {
+ //alert(res.data.message);
+ // setLoginUser(res.data.user);
+ navigate('/Profile');
+ console.log(res.data.message);
+ });
+ }
+ };
+
+ return (
+ <Form {...formItemLayout} form={form} name='register' scrollToFirstError>
+
+
+ <Form.Item
+ name='City'
+ label='Ciry'
+ rules={[
+ {
+ required: true,
+ message: 'Please select City!',
+ },
+ ]}>
+ <Select
+ type='text'
+ name='location'
+ value={user.location}
+ onChange={(value) => handleChangeSelect('location', value)}
+ placeholder='Select Your City'>
+ <Select.Option value='Dhaka'>Dhaka</Select.Option>
+ <Select.Option value='Sylhet'>Sylhet</Select.Option>
+ <Select.Option value='Chittagong'>Chittagong</Select.Option>
+ <Select.Option value='Comilla'>Comilla</Select.Option>
+ <Select.Option value='Rajshahi'>Rajshahi</Select.Option>
+ <Select.Option value='Rangpur'>Rangpur</Select.Option>
+ <Select.Option value='Barishal'>Barishal</Select.Option>
+ <Select.Option value='Brahminbaria'>Brahminbaria</Select.Option>
+ </Select>
+ </Form.Item>
+
+ <Form.Item
+ name='phone'
+ label='Phone Number'
+ rules={[
+ {
+ required: true,
+ message: 'Please input your phone number!',
+ },
+ ]}>
+ <Input
+ // addonBefore={prefixSelector}
+ style={{
+ width: '100%',
+ }}
+ type='text'
+ name='phone'
+ value={user.phone}
+ onChange={handleChange}
+ placeholder='Your phone number'
+ />
+ </Form.Item>
+
+
+
+ <Form.Item
+ name='lastDonation'
+ label='Last Blood Donation'
+ rules={[
+ {
+ required: true,
+ message: 'Please input date!',
+ },
+ ]}>
+ <DatePicker
+ name='lastDonation'
+ value={user.lastDonation}
+ onChange={(value) => handleChangeSelect('lastDonation', value)}
+ />
+ </Form.Item>
+
+ <Form.Item {...tailFormItemLayout}>
+ <Button type='primary' htmlType='submit' onClick={submit}>
+ Submit
+ </Button>
+ </Form.Item>
+ </Form>
+ );
+};
+
+export default Edit;