dancingCycle
/
sandbox-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: remove react-bootstrap

This commit is contained in:
dancingCycle 2023-04-06 17:05:47 +02:00
parent 23e30ac60e
commit 9863881e60
6 changed files with 10154 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
crud/.gitignore vendored
View File

@ -1,5 +1,5 @@
# Others
package-lock.json
dist*
build*
# Logs

10011
crud/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

1
crud/package.json
View File

@ -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"
}

87
crud/src/components/create.js
View File

@ -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
@ -33,45 +31,44 @@ 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)}
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)}
type="text"
placeholder="Age" required/>
</Form.Group>
{/* handing a onclick event in button for
firing a function */}
<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">
Home
</Button>
</Link>
</Form>
</div>
)
}
export default Create
return (
<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
/>
</label>
<label>
Enter name (input:{age}):
<input
onChange={e => setage(e.target.value)}
type="text"
placeholder="Enter Age"
required
/>
</label>
<button
onClick={e => handelSubmit(e)}
type="submit"
>
Create
</button>
<Link
to='/'
>
<button>
Home
</button>
</Link>
</form>
</div>
);
};

81
crud/src/components/edit.js
View File

@ -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 (
<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}
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}
onChange={e => setage(e.target.value)}
type="text" placeholder="Age" />
</Form.Group>
{/* Hadinling an onclick event running an edit logic */}
<Button
onClick={e => handelSubmit(e)}
variant="primary" type="submit" size="lg">
Update
</Button>
{/* Redirecting to main page after editing */}
<Link className="d-grid gap-2" to='/'>
<Button variant="warning" size="lg">Home</Button>
</Link>
</Form>
</div>
)
}
export default Edit
return(
<div>
<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"
/>
</label>
<label>
Enter name (input:{age}):
<input
value={age}
onChange={e => setage(e.target.value)}
type="text"
placeholder="Enter Age"
/>
</label>
<button
onClick={e => handelSubmit(e)}
type="submit"
>
Update
</button>
<Link
to='/'
>
<button>
Home
</button>
</Link>
</form>
</div>
);
};

106
crud/src/components/home.js
View File

@ -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()
@ -30,47 +28,61 @@ function Home() {
history('/')
}
return (
<div style={{margin:'10rem'}}>
<Table striped bordered hover size="sm">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
{/* Mapping though every element in the array
and showing the data in the form of table */}
{array.map((item) => {
return(
<tr>
<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>
{/* Using thr deleted function passing
the id of an entry */}
<td><Button onClick={e => deleted(item.id)}
variant="danger">Delete</Button></td>
</tr>
)})}
</tbody>
</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>
</div>
)
}
export default Home
return (
<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
{/* Mapping though every element in the array
and showing the data in the form of table */}
{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)}
>
Update
</button>
</Link>
</td>
{/* Using thr deleted function passing
the id of an entry */}
<td>
<button
onClick={e => deleted(item.id)}
>
Delete
</button>
</td>
</tr>
)})}
</tbody>
</table>
{/* button for redirecting to create page for
insertion of values */}
<Link
to='/create'
>
<button
>
Create
</button>
</Link>
</div>
);
};