feat: remove react-bootstrap
This commit is contained in:
parent
23e30ac60e
commit
9863881e60
|
@ -1,5 +1,5 @@
|
|||
# Others
|
||||
package-lock.json
|
||||
dist*
|
||||
build*
|
||||
|
||||
# Logs
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -28,7 +28,6 @@
|
|||
"dependencies": {
|
||||
"prop-types": "15.8.1",
|
||||
"react": "18.2.0",
|
||||
"react-bootstrap": "2.5.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-router-dom": "6.3.0"
|
||||
}
|
||||
|
|
|
@ -1,11 +1,9 @@
|
|||
import React, { useState } from 'react'
|
||||
import { Button, Form } from 'react-bootstrap'
|
||||
//TODO import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import array from './array';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
|
||||
function Create() {
|
||||
export default function Create() {
|
||||
|
||||
// Making usestate for setting and
|
||||
// fetching a value in jsx
|
||||
|
@ -34,44 +32,43 @@ function Create() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div >
|
||||
<Form className="d-grid gap-2" style={{margin:'15rem'}}>
|
||||
|
||||
{/* Fetching a value from input textfirld
|
||||
in a setname using usestate*/}
|
||||
<Form.Group className="mb-3" controlId="formBasicName">
|
||||
<Form.Control onChange={e => setname(e.target.value)}
|
||||
<div>
|
||||
<h1>Create</h1>
|
||||
<form
|
||||
onSubmit={e => handelSubmit(e)}
|
||||
>
|
||||
<label>
|
||||
Enter name (input:{name}):
|
||||
<input
|
||||
onChange={e => setname(e.target.value)}
|
||||
type="text"
|
||||
placeholder="Enter Name" required/>
|
||||
</Form.Group>
|
||||
|
||||
|
||||
{/* Fetching a value from input textfirld in
|
||||
a setage using usestate*/}
|
||||
<Form.Group className="mb-3" controlId="formBasicAge">
|
||||
<Form.Control onChange={e => setage(e.target.value)}
|
||||
placeholder="Enter Name"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Enter name (input:{age}):
|
||||
<input
|
||||
onChange={e => setage(e.target.value)}
|
||||
type="text"
|
||||
placeholder="Age" required/>
|
||||
</Form.Group>
|
||||
|
||||
{/* handing a onclick event in button for
|
||||
firing a function */}
|
||||
<Button
|
||||
placeholder="Enter Age"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
onClick={e => handelSubmit(e)}
|
||||
variant="primary" type="submit">
|
||||
Submit
|
||||
</Button>
|
||||
|
||||
{/* Redirecting back to home page */}
|
||||
<Link className="d-grid gap-2" to='/'>
|
||||
<Button variant="info" size="lg">
|
||||
type="submit"
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
<Link
|
||||
to='/'
|
||||
>
|
||||
<button>
|
||||
Home
|
||||
</Button>
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
</Form>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Create
|
||||
);
|
||||
};
|
||||
|
|
|
@ -1,12 +1,9 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import { Button, Form } from 'react-bootstrap';
|
||||
//TODO import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import array from './array';
|
||||
import { Link} from 'react-router-dom';
|
||||
import {useNavigate} from 'react-router-dom';
|
||||
|
||||
|
||||
function Edit() {
|
||||
export default function Edit() {
|
||||
|
||||
// Here usestate has been used in order
|
||||
// to set and get values from the jsx
|
||||
|
@ -43,39 +40,43 @@ function Edit() {
|
|||
setage(localStorage.getItem('Age'))
|
||||
setid(localStorage.getItem('id'))
|
||||
}, [])
|
||||
|
||||
return (
|
||||
return(
|
||||
<div>
|
||||
<Form className="d-grid gap-2" style={{margin:'15rem'}}>
|
||||
|
||||
{/* setting a name from the input textfiled */}
|
||||
<Form.Group className="mb-3" controlId="formBasicEmail">
|
||||
<Form.Control value={name}
|
||||
<h1>Update</h1>
|
||||
<form
|
||||
onSubmit={e => handelSubmit(e)}
|
||||
>
|
||||
<label>
|
||||
Enter name (input:{name}):
|
||||
<input
|
||||
onChange={e => setname(e.target.value)}
|
||||
type="text" placeholder="Enter Name" />
|
||||
</Form.Group>
|
||||
|
||||
{/* setting a age from the input textfiled */}
|
||||
<Form.Group className="mb-3" controlId="formBasicPassword">
|
||||
<Form.Control value={age}
|
||||
type="text"
|
||||
placeholder="Enter Name"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Enter name (input:{age}):
|
||||
<input
|
||||
value={age}
|
||||
onChange={e => setage(e.target.value)}
|
||||
type="text" placeholder="Age" />
|
||||
</Form.Group>
|
||||
|
||||
{/* Hadinling an onclick event running an edit logic */}
|
||||
<Button
|
||||
type="text"
|
||||
placeholder="Enter Age"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
onClick={e => handelSubmit(e)}
|
||||
variant="primary" type="submit" size="lg">
|
||||
type="submit"
|
||||
>
|
||||
Update
|
||||
</Button>
|
||||
|
||||
{/* Redirecting to main page after editing */}
|
||||
<Link className="d-grid gap-2" to='/'>
|
||||
<Button variant="warning" size="lg">Home</Button>
|
||||
</button>
|
||||
<Link
|
||||
to='/'
|
||||
>
|
||||
<button>
|
||||
Home
|
||||
</button>
|
||||
</Link>
|
||||
</Form>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Edit
|
||||
);
|
||||
};
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
import React from 'react'
|
||||
import { Button,Table } from 'react-bootstrap'
|
||||
//TODO import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import array from './array';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
|
||||
function Home() {
|
||||
export default function Home() {
|
||||
|
||||
let history = useNavigate()
|
||||
|
||||
|
@ -31,8 +29,8 @@ function Home() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div style={{margin:'10rem'}}>
|
||||
<Table striped bordered hover size="sm">
|
||||
<div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
@ -40,37 +38,51 @@ function Home() {
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
{/* Mapping though every element in the array
|
||||
and showing the data in the form of table */}
|
||||
{array.map((item) => {
|
||||
return(
|
||||
<tr>
|
||||
{array.map((item,key) => {
|
||||
return(
|
||||
<tr
|
||||
key={key}
|
||||
>
|
||||
<td>{item.Name}</td>
|
||||
<td>{item.Age}</td>
|
||||
|
||||
{/* getting theid,name, and age for storing these
|
||||
value in the jsx with onclick event */}
|
||||
<td><Link to={`/edit`}><Button onClick={(e) =>
|
||||
setID(item.id,item.Name,item.Age)} variant="info">
|
||||
Update</Button></Link></td>
|
||||
|
||||
<td><Link
|
||||
to={`/edit`}
|
||||
>
|
||||
<button
|
||||
onClick={(e) =>
|
||||
setID(item.id,item.Name,item.Age)}
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
</Link>
|
||||
</td>
|
||||
{/* Using thr deleted function passing
|
||||
the id of an entry */}
|
||||
<td><Button onClick={e => deleted(item.id)}
|
||||
variant="danger">Delete</Button></td>
|
||||
<td>
|
||||
<button
|
||||
onClick={e => deleted(item.id)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)})}
|
||||
)})}
|
||||
</tbody>
|
||||
</Table>
|
||||
|
||||
{/* Button for redirecting to create page for
|
||||
</table>
|
||||
{/* button for redirecting to create page for
|
||||
insertion of values */}
|
||||
<Link className="d-grid gap-2" to='/create'>
|
||||
<Button variant="warning" size="lg">Create</Button>
|
||||
</Link>
|
||||
<Link
|
||||
to='/create'
|
||||
>
|
||||
<button
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue