Skip to content

Commit dd54f18

Browse files
foyzulkarimfoyzulkarim
committed
Added resource entry feature
1 parent 9eee50a commit dd54f18

23 files changed

+641
-176
lines changed

‎client/package-lock.json

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

‎client/package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"@testing-library/react": "^9.3.2",
88
"@testing-library/user-event": "^7.1.2",
99
"axios": "^0.19.2",
10+
"formik": "^2.2.2",
1011
"react": "^16.14.0",
1112
"react-dom": "^16.14.0",
1213
"react-hook-form": "^5.7.2",
@@ -16,7 +17,8 @@
1617
"react-scripts": "3.4.1",
1718
"redux": "^4.0.5",
1819
"redux-promise": "^0.6.0",
19-
"redux-saga": "^1.1.3"
20+
"redux-saga": "^1.1.3",
21+
"yup": "^0.29.3"
2022
},
2123
"scripts": {
2224
"start": "react-scripts start",

‎client/public/index.html

+11-3
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@
2525
<title>React App</title>
2626
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
2727
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
28+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
29+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
2830
</head>
2931

3032
<body>
@@ -41,9 +43,15 @@
4143
To create a production bundle, use `npm run build` or `yarn build`.
4244
-->
4345

44-
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
45-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
46-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
46+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
47+
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
48+
crossorigin="anonymous"></script>
49+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
50+
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
51+
crossorigin="anonymous"></script>
52+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
53+
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
54+
crossorigin="anonymous"></script>
4755

4856
</body>
4957

‎client/src/App.js

+6-9
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,16 @@ import { Login } from "./components/Login";
88
import { Register } from "./components/Register";
99
import { Constants } from "./constants";
1010
import { usePermission, checkPermission } from "./hooks/usePermission.js";
11+
import Basic from "./components/resources";
1112

1213
export const PrivateRoute = ({ component: Component, ...rest }) => {
1314

1415
const userContext = useSelector(state => {
1516
return state.userContext;
1617
});
1718

18-
const isOk = () => {
19-
const ok = userContext.isAuthenticated;
20-
console.log('isOk', ok);
21-
return ok;
22-
};
23-
2419
const isAllowed = checkPermission(Component.name, userContext);
2520

26-
console.log('isAllowed', isAllowed);
27-
2821
return (
2922
<Route {...rest} render={props => {
3023
return (isAllowed)
@@ -90,6 +83,9 @@ const App = () => {
9083
<Link to="/post-create" className="list-group-item list-group-item-action bg-light">Create Post</Link>
9184
</>
9285
}
86+
<>
87+
<Link to="/basic" className="list-group-item list-group-item-action bg-light">Basic</Link>
88+
</>
9389
</div>
9490
</div>
9591

@@ -98,7 +94,7 @@ const App = () => {
9894
<Navigation />
9995
</nav>
10096

101-
<div className="container-fluid">
97+
<div className="container">
10298
<Switch>
10399
<PrivateRoute path="/post-detail/:id" component={PostDetail}></PrivateRoute>
104100
<PrivateRoute path="/post-create" component={PostCreate}></PrivateRoute>
@@ -107,6 +103,7 @@ const App = () => {
107103
<PrivateRoute path="/posts" component={Posts}></PrivateRoute>
108104
<Route path="/login" component={Login}></Route>
109105
<Route path="/register" component={Register}></Route>
106+
<Route path="/basic" component={Basic}></Route>
110107
<Route path="/"><Home /></Route>
111108
</Switch>
112109
</div>

‎client/src/components/Posts.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ import { BrowserRouter as Router, Switch, Route, Link, useRouteMatch, useParams,
44
import { useForm } from 'react-hook-form';
55
import { useSelector, useDispatch } from 'react-redux';
66

7-
export const Home = () => { return (<h2>Hello. You are in Home</h2>) };
7+
export const Home = () => {
8+
return (
9+
<h1>Welcome home!</h1>
10+
)
11+
};
812

913
export const PostCreate = () => {
1014
let history = useHistory();
@@ -16,7 +20,7 @@ export const PostCreate = () => {
1620
function success(position) {
1721
const latitude = position.coords.latitude;
1822
const longitude = position.coords.longitude;
19-
//location = { latitude, longitude };
23+
//location = {latitude, longitude};
2024
setLocation({ latitude, longitude });
2125
}
2226

@@ -76,7 +80,7 @@ export const PostEdit = (props) => {
7680
function success(position) {
7781
const latitude = position.coords.latitude;
7882
const longitude = position.coords.longitude;
79-
//location = { latitude, longitude };
83+
//location = {latitude, longitude};
8084
setLocation({ latitude, longitude });
8185
}
8286

‎client/src/components/resources/index.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import { BrowserRouter as Router, Switch, Route, Link, useRouteMatch, useParams, useHistory } from "react-router-dom";
3+
import { Formik, Form, Field, ErrorMessage } from 'formik';
4+
import * as Yup from 'yup';
5+
import { useSelector, useDispatch } from 'react-redux';
6+
7+
const ResourceSchema = Yup.object().shape({
8+
name: Yup.string()
9+
.min(3, 'Too Short!')
10+
.max(30, 'Too Long!')
11+
.required('Hey input the value!')
12+
});
13+
14+
const Basic = () => {
15+
16+
let history = useHistory();
17+
let dispatch = useDispatch();
18+
19+
return (
20+
<div>
21+
<h1>Resource entry</h1>
22+
<Formik
23+
initialValues={{ name: '' }}
24+
validationSchema={ResourceSchema}
25+
onSubmit={(values, { setSubmitting }) => {
26+
dispatch({
27+
type: "ADD_RESOURCE", payload: values
28+
});
29+
setSubmitting(false);
30+
history.push('/home');
31+
}}
32+
>
33+
{({ isSubmitting }) => (
34+
<Form>
35+
<div className="form-group row">
36+
<label htmlFor="name" className="col-sm-2 col-form-label">Resource</label>
37+
<Field className="col-sm-8 col-form-label" type="text" name="name" />
38+
<ErrorMessage className="col-sm-2 col-form-label text-danger" name="name" component="div" />
39+
</div>
40+
41+
<div className="form-group row">
42+
<label htmlFor="name" className="col-sm-2 col-form-label"></label>
43+
<button type="submit" disabled={isSubmitting}>Submit</button>
44+
</div>
45+
</Form>
46+
)}
47+
</Formik>
48+
</div>
49+
);
50+
};
51+
52+
53+
export default Basic;

‎client/src/reducers/resourceReducer.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Constants } from "../constants";
2+
const initialState = {
3+
resourceList: [],
4+
selectedResource: {},
5+
notificationText: ''
6+
};
7+
8+
9+
export default (state = initialState, action) => {
10+
11+
switch (action.type) {
12+
13+
case 'ADD_RESOURCE_SUCCESS':
14+
return {
15+
...state,
16+
notificationText: 'Resource added successfully'
17+
};
18+
case 'FETCH_RESOURCE_SUCCESS':
19+
return {
20+
...state,
21+
postList: action.payload.data,
22+
notificationText: ''
23+
};
24+
case 'FETCH_RESOURCE_DETAIL_SUCCESS':
25+
return {
26+
...state,
27+
selectedPost: action.payload.data
28+
};
29+
case 'ADD_RESOURCE_SUCCESS':
30+
return {
31+
...state,
32+
notificationText: 'Comment added successfully'
33+
};
34+
case 'FETCH_RESOURCE_SUCCESS':
35+
if (action.payload.data == null) {
36+
action.payload.data = [];
37+
}
38+
39+
return {
40+
...state,
41+
selectedComments: action.payload.data,
42+
notificationText: ''
43+
}
44+
case 'CLEAR_SELECTION':
45+
return {
46+
...state,
47+
selectedPost: initialState.selectedPost,
48+
selectedComments: initialState.selectedComments,
49+
};
50+
default:
51+
return state;
52+
}
53+
}

‎client/src/sagas/api.js

+6
Original file line numberDiff line numberDiff line change
@@ -72,4 +72,10 @@ export const login = (data) => {
7272
export const register = (data) => {
7373
console.log("register api call ->", data);
7474
return axios.post(`${AuthUrl}/api/user/register`, data);
75+
}
76+
77+
78+
export const createResource = (data) => {
79+
console.log("createResource api call ->", data);
80+
return axios.post(`${AuthUrl}/api/ApplicationResources`, data);
7581
}

0 commit comments

Comments
 (0)