Skip to content

Commit 57e534e

Browse files
sivaprasadreddysivaprasadreddy
committed
Upgrading bootstrap version
1 parent a010711 commit 57e534e

File tree

11 files changed

+2407
-2116
lines changed

11 files changed

+2407
-2116
lines changed

‎README.md

Lines changed: 3 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
1+
# DevZone UI - React + TypeScript
22

33
## Available Scripts
44

@@ -9,36 +9,10 @@ In the project directory, you can run:
99
Runs the app in the development mode.<br />
1010
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
1111

12-
The page will reload if you make edits.<br />
13-
You will also see any lint errors in the console.
14-
1512
### `yarn test`
1613

17-
Launches the test runner in the interactive watch mode.<br />
18-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
14+
Launches the test runner in the interactive watch mode.
1915

2016
### `yarn build`
2117

22-
Builds the app for production to the `build` folder.<br />
23-
It correctly bundles React in production mode and optimizes the build for the best performance.
24-
25-
The build is minified and the filenames include the hashes.<br />
26-
Your app is ready to be deployed!
27-
28-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29-
30-
### `yarn eject`
31-
32-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33-
34-
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35-
36-
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37-
38-
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39-
40-
## Learn More
41-
42-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43-
44-
To learn React, check out the [React documentation](https://reactjs.org/).
18+
Builds the app for production to the `build` folder.

‎package.json

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,15 @@
1515
"@types/react-dom": "^16.9.0",
1616
"@types/react-router-dom": "^5.1.5",
1717
"axios": "^0.19.0",
18-
"bootstrap": "^4.3.1",
18+
"bootstrap": "^5.1.3",
1919
"classnames": "^2.2.6",
20-
"jquery": "^3.5.1",
2120
"lodash": "^4.17.15",
2221
"moment": "^2.24.0",
23-
"popper.js": "^1.16.1",
24-
"primeflex": "^1.0.0",
25-
"primeicons": "^2.0.0",
26-
"primereact": "^3.3.2",
2722
"react": "^16.13.1",
2823
"react-dom": "^16.13.1",
2924
"react-router-dom": "^5.2.0",
3025
"react-scripts": "3.4.3",
31-
"typescript": "~3.7.2"
26+
"typescript": "^4.1.2"
3227
},
3328
"scripts": {
3429
"start": "react-scripts start",

‎src/bootswatch.min.css

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/layout/NavBar.tsx

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,18 @@ const NavBar = () => {
1414
const user = authService.getCurrentUser();
1515
if (user.access_token) {
1616
authenticatedLinks = (
17-
<ul className="navbar-nav">
17+
<ul className="navbar-nav mb-2 mb-md-0">
1818
<li className="nav-item">
1919
<NavLink className="nav-link" to="/links/new">
2020
<i className="fas fa-plus-circle"/> Add Link
2121
</NavLink>
2222
</li>
2323
<li className="nav-item dropdown">
2424
<NavLink className="nav-link dropdown-toggle" to="#" id="navbarDropdown" role="button"
25-
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
25+
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
2626
<i className="fas fa-user"/> <span>{user.user.name}</span>
2727
</NavLink>
28-
<div className="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
28+
<div className="dropdown-menu">
2929
<NavLink className="dropdown-item" to="/logout" onClick={logoutHandler}>
3030
<i className="fas fa-sign-out-alt"/> Logout
3131
</NavLink>
@@ -35,7 +35,7 @@ const NavBar = () => {
3535
);
3636
} else {
3737
authenticatedLinks = (
38-
<ul className="navbar-nav">
38+
<ul className="navbar-nav mb-2 mb-md-0">
3939
<li className="nav-item">
4040
<NavLink className="nav-link" to="/login">
4141
Login
@@ -50,21 +50,23 @@ const NavBar = () => {
5050
);
5151
}
5252
return (
53-
<nav className="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
54-
<NavLink className="navbar-brand" to="/">
55-
DevZone
56-
</NavLink>
57-
<button className="navbar-toggler" type="button" data-toggle="collapse"
58-
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
59-
aria-expanded="false" aria-label="Toggle navigation">
60-
<span className="navbar-toggler-icon"/>
61-
</button>
53+
<nav className="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
54+
<div className="container">
55+
<NavLink className="navbar-brand" to="/">
56+
DevZone
57+
</NavLink>
58+
<button className="navbar-toggler" type="button" data-bs-toggle="collapse"
59+
data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
60+
aria-label="Toggle navigation">
61+
<span className="navbar-toggler-icon"></span>
62+
</button>
6263

63-
<div className="collapse navbar-collapse" id="navbarSupportedContent">
64-
<ul className="navbar-nav mr-auto">
64+
<div className="collapse navbar-collapse" id="navbarCollapse">
65+
<ul className="navbar-nav me-auto mb-2 mb-md-0">
6566

66-
</ul>
67-
{authenticatedLinks}
67+
</ul>
68+
{authenticatedLinks}
69+
</div>
6870
</div>
6971
</nav>
7072
);

‎src/components/links/Link.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {LinkModel} from "../../models/LinkModels";
55
const Link: React.FC<LinkModel> = (link) => {
66
const tags = link.tags.map(tag => {
77
return (<span key={tag} style={{"fontSize": "20px"}}>
8-
<NavLink className="badge badge-primary" to={`/links?tag=${tag}`}>
8+
<NavLink className="badge bg-primary" to={`/links?tag=${tag}`}>
99
{tag}
1010
</NavLink>
1111
&nbsp;

‎src/components/links/Search.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,16 @@ const Search : React.FC<SearchProps>= ( props ) => {
88
const [query, setQuery] = useState("");
99

1010
return (
11-
<div>
12-
<form className="form-inline pb-3" method="get">
13-
<div className="form-group col-md-11">
11+
<div className={'pb-2'}>
12+
<form className="row g-3 align-items-center">
13+
<div className="col">
1414
<input className="col-md-12 form-control" type="search" name="query" placeholder="Search for"
1515
value={query}
1616
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}/>
1717
</div>
18-
<button className="btn btn-primary btn" type="button" onClick={(e) => props.ClickHandler(query)}>Search</button>
18+
<div className="col-auto">
19+
<button className="btn btn-primary btn" type="button" onClick={(e) => props.ClickHandler(query)}>Search</button>
20+
</div>
1921
</form>
2022
</div>
2123
);

‎src/index.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,13 @@ import ReactDOM from "react-dom";
33
import {BrowserRouter as Router} from "react-router-dom";
44
import App from "./App";
55
import "@fortawesome/fontawesome-free/css/all.css";
6-
//import "bootstrap/dist/css/bootstrap.min.css";
76
//import "primereact/resources/themes/nova-light/theme.css";
87
//import "primereact/resources/primereact.min.css";
98
//import "primeicons/primeicons.css";
109
//import "primeflex/primeflex.css";
10+
//import "bootstrap/dist/css/bootstrap.min.css";
1111
import "./bootswatch.min.css";
12-
import 'bootstrap/dist/js/bootstrap.min.js';
13-
import "jquery";
14-
import "popper.js";
12+
import 'bootstrap/dist/js/bootstrap.bundle.min';
1513
import "./index.css";
1614

1715
ReactDOM.render(

‎src/pages/links/NewLink.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, {useState} from "react";
2-
import {InputText} from "primereact/inputtext";
32
import LinkService from "../../services/LinkService";
43
import {LinkModel} from "../../models/LinkModels";
54

@@ -31,41 +30,42 @@ const NewLink = () => {
3130
};
3231

3332
return (
34-
<div className="container col-md-4">
33+
<div className="container col-md-6">
3534
<div className="card">
3635
<div className="card-header text-center">
3736
<h3>New Link Form</h3>
3837
</div>
3938
<div className="card-body">
40-
<form onSubmit={e => handleCreateLink(e)} className="row justify-content-center">
41-
<div className="form-group col-md-10">
42-
<label htmlFor="title">Title</label>
43-
<InputText
39+
<form onSubmit={e => handleCreateLink(e)}>
40+
<div className="mb-3">
41+
<label htmlFor="title" className="form-label">Title</label>
42+
<input
4443
id="title"
4544
className="form-control col-md-12"
4645
value={newLink.title}
4746
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNewLink({...newLink, title: e.target.value})}
4847
/>
48+
4949
</div>
50-
<div className="form-group col-md-10">
51-
<label htmlFor="url">URL</label>
52-
<InputText
50+
<div className="mb-3">
51+
<label htmlFor="url" className="form-label">URL</label>
52+
<input
5353
id="url"
5454
className="form-control col-md-12"
5555
value={newLink.url}
5656
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNewLink({...newLink, url: e.target.value})}
5757
/>
5858
</div>
59-
<div className="form-group col-md-10">
60-
<label htmlFor="tags">Tags</label>
61-
<InputText
59+
<div className="mb-3">
60+
<label htmlFor="tags" className="form-label">Tags</label>
61+
<input
6262
id="tags"
6363
className="form-control col-md-12"
6464
value={tags}
6565
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTags(e.target.value)}
6666
/>
6767
</div>
68-
<div className="form-group col-md-10">
68+
<div className="mb-3">
6969
<button type="submit" className="btn btn-primary">
7070
Save
7171
</button>

‎src/pages/login/Login.tsx

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import React, {useState} from "react";
2-
import {InputText} from "primereact/inputtext";
3-
import {Password} from "primereact/password";
42
import AuthService from "../../services/AuthService";
53

64
const Login = () => {
@@ -32,28 +30,28 @@ const Login = () => {
3230
<h3>Login Form</h3>
3331
</div>
3432
<div className="card-body">
35-
<form onSubmit={e => handleLogin(e)} className="row justify-content-center">
36-
<div className="form-group col-md-10">
37-
<label htmlFor="email">Email</label>
38-
<InputText
33+
<form onSubmit={e => handleLogin(e)} >
34+
<div className="mb-3">
35+
<label htmlFor="email" className="form-label">Email</label>
36+
<input
3937
id="email"
40-
keyfilter="email"
38+
type="email"
4139
className="form-control col-md-12"
4240
value={username}
4341
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUsername(e.target.value)}
4442
/>
4543
</div>
46-
<div className="form-group col-md-10">
47-
<label htmlFor="password">Password</label>
48-
<Password
44+
<div className="mb-3">
45+
<label htmlFor="password" className="form-label">Password</label>
46+
<input
4947
id="password"
5048
className="form-control col-md-12"
51-
feedback={false}
49+
type="password"
5250
value={password}
5351
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
5452
/>
5553
</div>
56-
<div className="form-group col-md-10">
54+
<div className="mb-3">
5755
<button type="submit" className="btn btn-primary">
5856
Login
5957
</button>

‎src/pages/registration/Registration.tsx

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React, {useState} from "react";
22
import { useHistory } from "react-router-dom";
3-
import {InputText} from "primereact/inputtext";
4-
import {Password} from "primereact/password";
53
import UserService from "../../services/UserService";
64

75
const Registration = () => {
@@ -36,36 +34,36 @@ const Registration = () => {
3634
</div>
3735
<div className="card-body">
3836
<form onSubmit={e => handleRegistration(e)} className="row justify-content-center">
39-
<div className="form-group col-md-10">
40-
<label htmlFor="name">Name</label>
41-
<InputText
37+
<div className="mb-3">
38+
<label htmlFor="name" className="form-label">Name</label>
39+
<input
4240
id="name"
4341
className="form-control col-md-12"
4442
value={name}
4543
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
4644
/>
4745
</div>
48-
<div className="form-group col-md-10">
49-
<label htmlFor="email">Email</label>
50-
<InputText
46+
<div className="mb-3">
47+
<label htmlFor="email" className="form-label">Email</label>
48+
<input
5149
id="email"
52-
keyfilter="email"
50+
type="email"
5351
className="form-control col-md-12"
5452
value={email}
5553
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
5654
/>
5755
</div>
58-
<div className="form-group col-md-10">
59-
<label htmlFor="password">Password</label>
60-
<Password
56+
<div className="mb-3">
57+
<label htmlFor="password" className="form-label">Password</label>
58+
<input
6159
id="password"
6260
className="form-control col-md-12"
63-
feedback={false}
61+
type="password"
6462
value={password}
6563
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
6664
/>
6765
</div>
68-
<div className="form-group col-md-10">
66+
<div className="mb-3">
6967
<button type="submit" className="btn btn-primary">
7068
Register
7169
</button>

0 commit comments

Comments
 (0)