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 # Others
package-lock.json dist*
build* build*
# Logs # 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": { "dependencies": {
"prop-types": "15.8.1", "prop-types": "15.8.1",
"react": "18.2.0", "react": "18.2.0",
"react-bootstrap": "2.5.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-router-dom": "6.3.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 React, { useState } from 'react'
import { Button, Form } from 'react-bootstrap'
//TODO import 'bootstrap/dist/css/bootstrap.min.css';
import array from './array'; import array from './array';
import { v4 as uuid } from 'uuid'; import { v4 as uuid } from 'uuid';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
function Create() { export default function Create() {
// Making usestate for setting and // Making usestate for setting and
// fetching a value in jsx // fetching a value in jsx
@ -33,45 +31,44 @@ function Create() {
} }
return ( return (
<div > <div>
<Form className="d-grid gap-2" style={{margin:'15rem'}}> <h1>Create</h1>
<form
{/* Fetching a value from input textfirld onSubmit={e => handelSubmit(e)}
in a setname using usestate*/} >
<Form.Group className="mb-3" controlId="formBasicName"> <label>
<Form.Control onChange={e => setname(e.target.value)} Enter name (input:{name}):
type="text" <input
placeholder="Enter Name" required/> onChange={e => setname(e.target.value)}
</Form.Group> type="text"
placeholder="Enter Name"
required
{/* Fetching a value from input textfirld in />
a setage using usestate*/} </label>
<Form.Group className="mb-3" controlId="formBasicAge"> <label>
<Form.Control onChange={e => setage(e.target.value)} Enter name (input:{age}):
type="text" <input
placeholder="Age" required/> onChange={e => setage(e.target.value)}
</Form.Group> type="text"
placeholder="Enter Age"
{/* handing a onclick event in button for required
firing a function */} />
<Button </label>
onClick={e => handelSubmit(e)} <button
variant="primary" type="submit"> onClick={e => handelSubmit(e)}
Submit type="submit"
</Button> >
Create
{/* Redirecting back to home page */} </button>
<Link className="d-grid gap-2" to='/'> <Link
<Button variant="info" size="lg"> to='/'
Home >
</Button> <button>
</Link> Home
</button>
</Form> </Link>
</div> </form>
) </div>
} );
};
export default Create

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

@ -1,12 +1,9 @@
import React, { useEffect, useState } from 'react' 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 array from './array';
import { Link} from 'react-router-dom'; import { Link} from 'react-router-dom';
import {useNavigate} from 'react-router-dom'; import {useNavigate} from 'react-router-dom';
export default function Edit() {
function Edit() {
// Here usestate has been used in order // Here usestate has been used in order
// to set and get values from the jsx // to set and get values from the jsx
@ -43,39 +40,43 @@ function Edit() {
setage(localStorage.getItem('Age')) setage(localStorage.getItem('Age'))
setid(localStorage.getItem('id')) setid(localStorage.getItem('id'))
}, []) }, [])
return(
return ( <div>
<div> <h1>Update</h1>
<Form className="d-grid gap-2" style={{margin:'15rem'}}> <form
onSubmit={e => handelSubmit(e)}
{/* setting a name from the input textfiled */} >
<Form.Group className="mb-3" controlId="formBasicEmail"> <label>
<Form.Control value={name} Enter name (input:{name}):
onChange={e => setname(e.target.value)} <input
type="text" placeholder="Enter Name" /> onChange={e => setname(e.target.value)}
</Form.Group> type="text"
placeholder="Enter Name"
{/* setting a age from the input textfiled */} />
<Form.Group className="mb-3" controlId="formBasicPassword"> </label>
<Form.Control value={age} <label>
onChange={e => setage(e.target.value)} Enter name (input:{age}):
type="text" placeholder="Age" /> <input
</Form.Group> value={age}
onChange={e => setage(e.target.value)}
{/* Hadinling an onclick event running an edit logic */} type="text"
<Button placeholder="Enter Age"
onClick={e => handelSubmit(e)} />
variant="primary" type="submit" size="lg"> </label>
Update <button
</Button> onClick={e => handelSubmit(e)}
type="submit"
{/* Redirecting to main page after editing */} >
<Link className="d-grid gap-2" to='/'> Update
<Button variant="warning" size="lg">Home</Button> </button>
</Link> <Link
</Form> to='/'
</div> >
) <button>
} Home
</button>
export default Edit </Link>
</form>
</div>
);
};

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

@ -1,10 +1,8 @@
import React from 'react' import React from 'react'
import { Button,Table } from 'react-bootstrap'
//TODO import 'bootstrap/dist/css/bootstrap.min.css';
import array from './array'; import array from './array';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
function Home() { export default function Home() {
let history = useNavigate() let history = useNavigate()
@ -30,47 +28,61 @@ function Home() {
history('/') history('/')
} }
return ( return (
<div style={{margin:'10rem'}}> <div>
<Table striped bordered hover size="sm"> <table>
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Age</th> <th>Age</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{/* Mapping though every element in the array
{/* Mapping though every element in the array and showing the data in the form of table */}
and showing the data in the form of table */} {array.map((item,key) => {
{array.map((item) => { return(
return( <tr
<tr> key={key}
<td>{item.Name}</td> >
<td>{item.Age}</td> <td>{item.Name}</td>
<td>{item.Age}</td>
{/* getting theid,name, and age for storing these {/* getting theid,name, and age for storing these
value in the jsx with onclick event */} value in the jsx with onclick event */}
<td><Link to={`/edit`}><Button onClick={(e) => <td><Link
setID(item.id,item.Name,item.Age)} variant="info"> to={`/edit`}
Update</Button></Link></td> >
<button
{/* Using thr deleted function passing onClick={(e) =>
the id of an entry */} setID(item.id,item.Name,item.Age)}
<td><Button onClick={e => deleted(item.id)} >
variant="danger">Delete</Button></td> Update
</tr> </button>
)})} </Link>
</tbody> </td>
</Table> {/* Using thr deleted function passing
the id of an entry */}
{/* Button for redirecting to create page for <td>
insertion of values */} <button
<Link className="d-grid gap-2" to='/create'> onClick={e => deleted(item.id)}
<Button variant="warning" size="lg">Create</Button> >
</Link> Delete
</div> </button>
) </td>
} </tr>
)})}
export default Home </tbody>
</table>
{/* button for redirecting to create page for
insertion of values */}
<Link
to='/create'
>
<button
>
Create
</button>
</Link>
</div>
);
};