Skip to content

Commit 2178451

Browse files
e-candeloroe-candeloro
committed
improved urls props and fixed some bugs
1 parent ad03ba3 commit 2178451

File tree

9 files changed

+113
-107
lines changed

9 files changed

+113
-107
lines changed

‎src/App.jsx

Lines changed: 49 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -10,35 +10,40 @@ import Home from "./pages/Home";
1010
import NotFound from "./pages/NotFound";
1111

1212
function App() {
13-
const app_title = "React CRUD Client";
14-
const list_title = "Elements List";
15-
const detail_title = "Element Detail";
16-
const edit_title = "Edit Element";
17-
const add_title = "Add Element";
18-
19-
const base_url = "http://127.0.0.1:8000/api";
13+
const titles = {
14+
app_title: "React CRUD Client",
15+
app_element_list_title: "Elements List",
16+
app_detail_title: "Element Detail",
17+
app_edit_title: "Edit Element",
18+
app_add_title: "Add Element",
19+
};
2020

21-
const home_url = "/app/react";
22-
const list_url = "elements";
23-
const detail_url = "/:element_id";
24-
const edit_url = "edit";
25-
const add_url = "add";
21+
const urls = {
22+
api_base_url: "http://127.0.0.1:8000/api",
23+
api_element_list_url: "/elements",
24+
// api_get_post_element_list_url: "http://127.0.0.1:8000/api/elements",
25+
app_home_url: "/app/react",
26+
app_list_url: "/elements",
27+
app_element_id_url: "/:element_id",
28+
app_edit_url: "/edit",
29+
app_add_url: "/add",
30+
};
2631

2732
const [elements, setElements] = React.useState([]);
2833
const [loading, setLoading] = React.useState(true);
2934

3035
React.useEffect(() => {
3136
//NOTE: React in Strict Mode (when developing and not in deployment) calls this twice!
32-
getDataAPI(base_url + "/" + list_url);
33-
}, [base_url, list_url]);
37+
getDataAPI(urls.api_base_url + urls.api_element_list_url);
38+
}, [urls.api_base_url, urls.api_element_list_url]);
3439

3540
const getDataAPI = (url) => {
3641
setLoading(true);
3742
console.log("Fetching data from: " + url);
3843
fetch(url)
3944
.then((response) => {
4045
if (!response.ok) {
41-
console.log("Response: " + response);
46+
console.log("Response: " + response.json());
4247
throw Error(response.statusText);
4348
}
4449
return response.json();
@@ -60,7 +65,7 @@ function App() {
6065
})
6166
.then((response) => {
6267
if (!response.ok) {
63-
console.log(response);
68+
console.log(response.json());
6469
throw Error(response.statusText);
6570
} else {
6671
setElements((prevElements) => {
@@ -93,8 +98,9 @@ function App() {
9398
})
9499
.then((response) => {
95100
if (!response.ok) {
96-
console.log("Obtained Response: " + response);
97-
console.log("While trying to update/post data: " + data_dict);
101+
console.log("Obtained Response: " + response.json());
102+
console.log("While trying to update/post data: ");
103+
console.log(data_dict);
98104
throw Error(response.statusText);
99105
}
100106
return response.json();
@@ -103,9 +109,8 @@ function App() {
103109
if (is_post) {
104110
setElements((prevElements) => {
105111
const newElements = [...prevElements, data];
106-
console.log(
107-
"Created element with id " + data.id + " with name: " + data.name
108-
);
112+
console.log("Created element with id " + data.id + " with data: ");
113+
console.log(data);
109114
setLoading(false);
110115
return newElements;
111116
});
@@ -118,9 +123,8 @@ function App() {
118123
return data;
119124
}
120125
});
121-
console.log(
122-
"Updated element with id " + id + " with name: " + data.name
123-
);
126+
console.log("Updated element with id " + id + " with data: ");
127+
console.log(data);
124128
setLoading(false);
125129
return newElements;
126130
});
@@ -145,78 +149,63 @@ function App() {
145149
return (
146150
<React.Fragment>
147151
<Routes>
148-
<Route path={home_url} element={<SharedLayout app_title={app_title} />}>
152+
<Route
153+
path={urls.app_home_url}
154+
element={<SharedLayout app_title={titles.app_title} />}
155+
>
156+
<Route index element={<Home urls={urls} />} />
149157
<Route
150-
index
151-
element={
152-
<Home
153-
base_url={base_url}
154-
home_url={home_url}
155-
list_url={list_url}
156-
/>
157-
}
158-
/>
159-
<Route
160-
path={home_url + "/" + list_url}
158+
path={urls.app_home_url + urls.app_list_url}
161159
element={
162160
<ElementsList
163-
title={list_title}
161+
title={titles.app_element_list_title}
164162
data={elements}
165163
getDataAPI={getDataAPI}
166164
deleteDataAPI={deleteDataAPI}
167-
home_url={home_url}
168-
base_url={base_url}
169-
detail_url={list_url}
170-
edit_url={edit_url}
171-
add_url={add_url}
165+
urls={urls}
172166
loading={loading}
173167
/>
174168
}
175169
/>
176170
<Route
177-
path={home_url + "/" + list_url + detail_url}
171+
path={
172+
urls.app_home_url + urls.app_list_url + urls.app_element_id_url
173+
}
178174
element={
179175
<ElementDetail
180-
title={detail_title}
176+
title={titles.app_detail_title}
181177
data={elements}
182178
findElement={findElement}
183179
deleteDataAPI={deleteDataAPI}
184-
base_url={base_url}
185-
home_url={home_url}
186-
detail_url={list_url}
187-
edit_url={edit_url}
180+
urls={urls}
188181
/>
189182
}
190183
/>
191184
<Route
192-
path={home_url + "/" + edit_url + detail_url}
185+
path={urls.app_home_url + urls.app_edit_url + urls.app_element_id_url}
193186
element={
194187
<ElementEdit
195-
title={edit_title}
188+
title={titles.app_edit_title}
196189
data={elements}
197190
findElement={findElement}
198191
updateDataAPI={updateDataAPI}
199-
base_url={base_url}
200-
home_url={home_url}
201-
detail_url={list_url}
192+
urls={urls}
202193
/>
203194
}
204195
/>
205196
<Route
206-
path={home_url + "/" + add_url}
197+
path={urls.app_home_url + urls.app_add_url}
207198
element={
208199
<ElementAdd
209-
title={add_title}
200+
title={titles.app_add_title}
210201
updateDataAPI={updateDataAPI}
211-
base_url={base_url}
212-
home_url={home_url}
213-
detail_url={list_url}
202+
urls={urls}
214203
/>
215204
}
216205
/>
217206
<Route
218-
path={home_url + "/" + "*"}
219-
element={<NotFound home_url={home_url} />}
207+
path={urls.app_home_url + "/" + "*"}
208+
element={<NotFound urls={urls} />}
220209
/>
221210
</Route>
222211
</Routes>

‎src/components/Element.jsx

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,52 +3,67 @@ import { Link } from "react-router-dom";
33

44
export default function Element(props) {
55
const detail = props.details_button ? true : false;
6+
//change the element_title to the correct attribute name of the element object you receive from the API
7+
const element_title = props.element.name;
68

79
const listProperties = () => {
810
return Object.keys(props.element).map((key) => {
911
return (
10-
<>
12+
<React.Fragment key={key}>
1113
<p>
1214
<span className="is-capitalized is-rounded tag is-medium is-light">
1315
{key}
1416
</span>
1517
<span className=""> {props.element[key]}</span>
1618
</p>
17-
</>
19+
</React.Fragment>
1820
);
1921
});
2022
};
2123
return (
2224
//change the props.element.name to props.element.id to display the id instead of the name or other properties
2325
<React.Fragment>
2426
<div className="box">
25-
<h3>{props.element.name}</h3>
27+
<h3>{element_title}</h3>
2628
{listProperties()}
2729
<hr />
2830
<div className="buttons">
2931
{detail ? (
3032
<Link
3133
className="button is-link is-light"
32-
to={props.home_url + "/" + props.detail_url + '/' + props.element.id}
34+
to={
35+
props.urls.app_home_url +
36+
props.urls.app_list_url +
37+
"/" +
38+
props.element.id
39+
}
3340
>
3441
Details 🔎
3542
</Link>
3643
) : (
37-
<Link className="button is-light" to={props.home_url + '/' + props.detail_url}>
44+
<Link
45+
className="button is-light"
46+
to={props.urls.app_home_url + props.urls.app_list_url}
47+
>
3848
Go Back 🔙
3949
</Link>
4050
)}
4151
<Link
4252
className="button is-light is-success"
43-
to={props.home_url + "/" + props.edit_url + "/" + props.element.id}
53+
to={
54+
props.urls.app_home_url +
55+
props.urls.app_edit_url +
56+
"/" +
57+
props.element.id
58+
}
4459
>
4560
Edit ✏️
4661
</Link>
4762
<button
4863
className="button is-danger is-light"
4964
onClick={() =>
5065
props.deleteDataAPI(
51-
props.base_url + '/' + props.detail_url,
66+
props.urls.api_base_url + props.urls.api_element_list_url,
5267
props.element.id
5368
)
5469
}

‎src/components/Form.jsx

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,12 @@ import { useForm } from "react-hook-form";
55
import { yupResolver } from "@hookform/resolvers/yup";
66

77
export default function Form(props) {
8+
console.log("rendering form");
89
const navigate = useNavigate();
9-
const element = props.element;
10+
const element = props.element
11+
const element_id = props.element_id
12+
13+
//SCHEMA FOR VALIDATION OF THE FORM -> CHANGE THIS FOR YOUR OWN FORM
1014
const schema = yup
1115
.object({
1216
name: yup.string().required(),
@@ -34,31 +38,43 @@ export default function Form(props) {
3438

3539
const onSubmit = (data) => {
3640
console.log(data);
37-
if (props.element_id) {
41+
if (element_id) {
3842
console.log("Updating:");
3943
console.log(
40-
"to " + props.base_url + '/' + props.detail_url + "/" + props.element_id
44+
"to " +
45+
props.urls.api_base_url +
46+
props.urls.api_element_list_url +
47+
"/" +
48+
element_id
4149
);
4250
props.updateDataAPI(
43-
props.base_url + '/' + props.detail_url,
51+
props.urls.api_base_url + props.urls.api_element_list_url,
4452
data,
45-
props.element_id,
53+
element_id,
4654
"PUT"
4755
);
4856
} else {
4957
console.log("Posting:");
5058
console.log(
51-
"to " + props.base_url + '/' + props.detail_url + "/" + props.element_id
59+
"to " + props.urls.api_base_url + props.urls.api_element_list_url
60+
);
61+
props.updateDataAPI(
62+
props.urls.api_base_url + props.urls.api_element_list_url,
63+
data,
64+
"",
65+
"POST"
5266
);
53-
props.updateDataAPI(props.base_url + '/' + props.detail_url, data, "", "POST");
5467
}
55-
navigate(props.home_url + '/' + props.detail_url);
68+
navigate(props.urls.app_home_url + props.urls.app_list_url);
5669
};
5770
//console.log(errors);
5871
return (
5972
<React.Fragment>
6073
<div className="box">
6174
<form onSubmit={handleSubmit(onSubmit)}>
75+
{
76+
//EVERY INPUT IS WRAPPEN IN A FIELD DIV, A CONTROL DIV AND THEN NEED TO BE REGISTERED WITH HIS OWN NAME FROM THE SCHEMA
77+
}
6278
<div className="field">
6379
<div className="control">
6480
<input
@@ -92,7 +108,10 @@ export default function Form(props) {
92108
<p className="help is-danger">{errors.element_type?.message}</p>
93109
</div>
94110
<div className="buttons">
95-
<Link to={props.detail_url} className="button is-light">
111+
<Link
112+
to={props.urls.app_home_url + props.urls.app_list_url}
113+
className="button is-light"
114+
>
96115
Go Back 🔙
97116
</Link>
98117
<button className="button is-link" type="submit">

‎src/pages/ElementAdd.jsx

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,13 @@
11
import * as React from "react";
22
import Form from "../components/Form";
33

4-
export default function ElementEdit(props) {
5-
const [element, setElement] = React.useState({});
6-
4+
export default function ElementAdd(props) {
75
React.useEffect(() => {
8-
console.log("rendering");
9-
}, [props]);
6+
//console.log("rendering form");
7+
}, []);
108

119
function renderDataForm() {
12-
return (
13-
<Form
14-
base_url={props.base_url}
15-
home_url={props.home_url}
16-
detail_url={props.detail_url}
17-
updateDataAPI={props.updateDataAPI}
18-
/>
19-
);
10+
return <Form urls={props.urls} updateDataAPI={props.updateDataAPI} />;
2011
}
2112

2213
return (

0 commit comments

Comments
 (0)