Skip to content

Commit ad8d303

Browse files
NetFreak26NetFreak26
committed
Project setup done
1 parent f42821d commit ad8d303

17 files changed

+993
-48
lines changed

‎package-lock.json

+325
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+8
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,21 @@
22
"name": "ppm-tool-ui",
33
"version": "0.1.0",
44
"private": true,
5+
"proxy": "http://localhost:8080",
56
"dependencies": {
67
"@testing-library/jest-dom": "^5.16.5",
78
"@testing-library/react": "^13.4.0",
89
"@testing-library/user-event": "^13.5.0",
10+
"axios": "^0.27.2",
11+
"bootstrap": "^4.1.3",
912
"react": "^18.2.0",
1013
"react-dom": "^18.2.0",
14+
"react-redux": "^8.0.2",
15+
"react-router": "^6.4.0",
16+
"react-router-dom": "^6.4.0",
1117
"react-scripts": "5.0.1",
18+
"redux": "^4.2.0",
19+
"redux-thunk": "^2.4.1",
1220
"web-vitals": "^2.1.4"
1321
},
1422
"scripts": {

‎public/index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
28+
crossorigin="anonymous">
29+
<title>Project Management Tool</title>
2830
</head>
2931
<body>
3032
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.css

+72-27
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,83 @@
1-
.App {
2-
text-align: center;
1+
img {
2+
width: 100%;
33
}
44

5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
5+
.navbar {
6+
background-color: #e3f2fd;
7+
}
8+
.fa.fa-edit {
9+
color: #18a2b9;
10+
}
11+
12+
.list-group-item.delete:hover {
13+
cursor: -webkit-grab;
14+
background-color: pink;
15+
}
16+
17+
.list-group-item.update:hover {
18+
cursor: -webkit-grab;
19+
background-color: gainsboro;
20+
}
21+
22+
.list-group-item.board:hover {
23+
cursor: -webkit-grab;
24+
background-color: gainsboro;
25+
}
26+
27+
.fa.fa-minus-circle {
28+
color: red;
829
}
930

10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
31+
.landing {
32+
position: relative;
33+
/* background: url("../img/showcase.jpg") no-repeat; */
34+
background-size: cover;
35+
background-position: center;
36+
height: 100vh;
37+
margin-top: -24px;
38+
margin-bottom: -50px;
1439
}
1540

16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
41+
.landing-inner {
42+
padding-top: 80px;
2543
}
2644

27-
.App-link {
28-
color: #61dafb;
45+
.dark-overlay {
46+
background-color: rgba(0, 0, 0, 0.7);
47+
position: absolute;
48+
top: 0;
49+
left: 0;
50+
width: 100%;
51+
height: 100%;
2952
}
3053

31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
54+
.card-form {
55+
opacity: 0.9;
3856
}
57+
58+
.latest-profiles-img {
59+
width: 40px;
60+
height: 40px;
61+
}
62+
63+
.form-control::placeholder {
64+
color: #bbb !important;
65+
}
66+
67+
.feedback {
68+
width: 100%;
69+
margin-top: 0.25rem;
70+
font-size: .875em;
71+
color: #dc3545;
72+
}
73+
74+
.description {
75+
background-color: white;
76+
height: 100%;
77+
color: rgb(50, 50, 50)
78+
}
79+
80+
.red {
81+
color: red;
82+
font-weight: 700;
83+
}

‎src/App.js

+18-17
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
1-
import logo from './logo.svg';
21
import './App.css';
2+
import { Dashboard } from './components/Dashboard';
3+
import { Header } from './components/Layout/Header';
4+
import "bootstrap/dist/css/bootstrap.min.css"
5+
import { BrowserRouter, Routes, Route } from "react-router-dom";
6+
import { AddProjectTemplate } from './components/Project/AddProjectTemplate';
7+
import { Provider } from 'react-redux';
8+
import store from './store';
9+
import { UpdateProjectTemplate } from './components/Project/UpdateProjectTemplate';
310

411
function App() {
512
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
21-
</div>
13+
<Provider store={store}>
14+
<BrowserRouter>
15+
<Header />
16+
<Routes>
17+
<Route path='dashboard' element={<Dashboard />}></Route>
18+
<Route path='createProject' element={<AddProjectTemplate />}></Route>
19+
<Route path='updateProject' element={<UpdateProjectTemplate />}></Route>
20+
</Routes>
21+
</BrowserRouter>
22+
</Provider>
2223
);
2324
}
2425

‎src/actions/actionTypes.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const SAVE_PROJECT = "SAVE_PROJECT"
2+
export const GET_ERRORS = "GET_ERRORS";
3+
export const GET_PROJECTS = "GET_PROJECTS";
4+
export const GET_PROJECT = "GET_PROJECT";
5+
export const DELETE_PROJECT = "DELETE_PROJECT";

‎src/actions/projectActions.js

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import axios from "axios";
2+
import { DELETE_PROJECT, GET_ERRORS, GET_PROJECTS, SAVE_PROJECT, GET_PROJECT } from "./actionTypes";
3+
4+
export const saveProject = async (project) => {
5+
try {
6+
const resp = await axios.post("/api/project/save", project);
7+
return {
8+
type: SAVE_PROJECT,
9+
payload: resp.data
10+
};
11+
} catch (error) {
12+
return {
13+
type: GET_ERRORS,
14+
payload: error.response.data
15+
}
16+
}
17+
}
18+
19+
export const getProjects = async () => {
20+
try {
21+
const resp = await axios.get("/api/project/findAll");
22+
return {
23+
type: GET_PROJECTS,
24+
payload: resp.data
25+
}
26+
} catch (error) {
27+
return {
28+
type: GET_ERRORS,
29+
payload: error.response.data
30+
}
31+
}
32+
}
33+
34+
export const deleteProject = async (projectID) => {
35+
try {
36+
await axios.delete(`/api/project/delete?projectID=${projectID}`);
37+
return {
38+
type: DELETE_PROJECT,
39+
payload: projectID
40+
}
41+
} catch (error){
42+
return {
43+
type: GET_ERRORS,
44+
payload: error.response.data
45+
}
46+
}
47+
}
48+
49+
export const getProject = async (projectID) => {
50+
try {
51+
const resp = await axios.get(`/api/project/find?projectID=${projectID}`);
52+
return {
53+
type: GET_PROJECT,
54+
payload: resp.data
55+
}
56+
} catch (error) {
57+
return {
58+
type: GET_ERRORS,
59+
payload: error.response.data
60+
}
61+
}
62+
}
63+

‎src/components/Dashboard.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { useEffect } from 'react'
2+
import { useDispatch, useSelector } from 'react-redux'
3+
import { getProjects } from '../actions/projectActions'
4+
import { CreateProjectButton } from './Project/CreateProjectButton'
5+
import { ProjectTemplate } from './Project/ProjectTemplate'
6+
7+
export const Dashboard = (props) => {
8+
9+
const projects = useSelector(state => state.project.projects)
10+
11+
const dispatch = useDispatch();
12+
13+
useEffect(() => {
14+
const loadData = async () => {
15+
const action = await getProjects()
16+
dispatch(action)
17+
}
18+
loadData();
19+
}, []
20+
)
21+
22+
23+
return (
24+
<div className="projects">
25+
<div className="container">
26+
<div className="row">
27+
<div className="col-md-12">
28+
<h1 className="display-4 text-center">Projects</h1>
29+
<br />
30+
<CreateProjectButton />
31+
<br />
32+
<hr />
33+
{
34+
projects.map((project) => (
35+
<ProjectTemplate key={ project.projectID } project={project} />
36+
))
37+
}
38+
</div>
39+
</div>
40+
</div>
41+
</div>
42+
)
43+
}

‎src/components/Layout/Header.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Link } from "react-router-dom";
2+
3+
export const Header = () => {
4+
return (
5+
<nav className="navbar navbar-expand-sm navbar-dark bg-primary mb-4">
6+
<div className="container">
7+
<a className="navbar-brand" href="Dashboard.html">
8+
Personal Project Management Tool
9+
</a>
10+
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#mobile-nav">
11+
<span className="navbar-toggler-icon" />
12+
</button>
13+
14+
<div className="collapse navbar-collapse" id="mobile-nav">
15+
<ul className="navbar-nav mr-auto">
16+
<li className="nav-item">
17+
<Link className="nav-link" to="/dashboard">
18+
Dashboard
19+
</Link>
20+
</li>
21+
</ul>
22+
23+
<ul className="navbar-nav ml-auto">
24+
<li className="nav-item">
25+
<Link className="nav-link" to="/signup">
26+
Sign up
27+
</Link>
28+
</li>
29+
<li className="nav-item">
30+
<Link className="nav-link" to="/login">
31+
Login
32+
</Link>
33+
</li>
34+
</ul>
35+
</div>
36+
</div>
37+
</nav>
38+
)
39+
}

0 commit comments

Comments
 (0)