Skip to content

Commit 6343b02

Browse files
emilRacz21emilRacz21
committed
fix styles
1 parent c01e653 commit 6343b02

File tree

12 files changed

+299
-204
lines changed

12 files changed

+299
-204
lines changed

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
/>
1414
</head>
1515
<body>
16-
<div id="root"></div>
16+
<div class="root" id="root"></div>
1717
<script type="module" src="/src/main.jsx"></script>
1818
</body>
1919
</html>

‎src/components/Api_/ShopApi.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ export default async function fetchShopData(setData, setResponseText) {
1515
}
1616

1717
//POST - add a new item to API
18-
export function handleAddInvention(newItems, setData) {
18+
export function handleAddInvention(newItems, setData, setErrorMessage) {
1919
return axios
2020
.post(url, newItems)
2121
.then(() => {
2222
fetchShopData(setData, () => {});
2323
})
24-
.catch((error) => console.log(error));
24+
.catch((error) => setErrorMessage(`Try again later (${error.name})`));
2525
}
2626

2727
//POST - add a new review to existing invention

‎src/components/Header/Header.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
@use "../../index.scss" as *;
22
header {
3-
z-index: 10;
3+
z-index: 1001;
44
background-color: $main-color;
55
display: flex;
66
position: fixed;
77
top: 0rem;
8-
width: 100vw;
8+
width: 100%;
99
justify-content: center;
1010
backdrop-filter: blur(0.8rem);
1111
box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.211);

‎src/components/Shopp/ShopAddInvention/ShopAddInvention.jsx

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import "./ShopAddInvention.scss";
2+
import { inventObj } from "../../../content";
3+
export default function ShopAddInvention({
4+
newItems,
5+
errorMessage,
6+
addNewInvention,
7+
handleChangeInvention,
8+
}) {
9+
const inventionObjects = inventObj(newItems);
10+
function getFieldClass(value) {
11+
return errorMessage !== "" && value === "" ? "active" : "";
12+
}
13+
14+
return (
15+
<form className="shop-invention-add-form">
16+
<div>
17+
{inventionObjects[0].map((item, index) => {
18+
return (
19+
<div key={index}>
20+
<label className={getFieldClass(item.field)}>
21+
{item.title} :
22+
</label>
23+
{item.name == "description" ? (
24+
<textarea
25+
className={getFieldClass(item.field)}
26+
name={item.name}
27+
value={newItems.description}
28+
onChange={handleChangeInvention}
29+
></textarea>
30+
) : (
31+
<input
32+
className={getFieldClass(item.field)}
33+
name={item.name}
34+
value={item.field}
35+
onChange={handleChangeInvention}
36+
min={0}
37+
type={
38+
item.name == "weight" || item.name == "price"
39+
? "number"
40+
: "text"
41+
}
42+
/>
43+
)}
44+
</div>
45+
);
46+
})}
47+
</div>
48+
<hr />
49+
<div>
50+
{inventionObjects[1].map((item, index) => {
51+
return (
52+
<div key={index}>
53+
<label className={getFieldClass(item.field)}>
54+
{item.title} :
55+
</label>
56+
<input
57+
className={getFieldClass(item.field)}
58+
value={item.field}
59+
name={item.name}
60+
onChange={handleChangeInvention}
61+
min={1}
62+
type={item.name == "status" ? "number" : "text"}
63+
/>
64+
</div>
65+
);
66+
})}
67+
<span>
68+
<button onClick={addNewInvention}>Add invention</button>
69+
</span>
70+
<p className="shop-invention-text">
71+
<a>*</a>
72+
If you add your invention, it will appear at the bottom of the page!
73+
</p>
74+
</div>
75+
</form>
76+
);
77+
}

‎src/components/Shopp/ShopAddInvention/ShopAddInvention.scss

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
@use "../../../index.scss" as *;
2+
3+
.shop-invention-add-form {
4+
margin: 0;
5+
margin-top: 1rem;
6+
margin-bottom: 2rem;
7+
display: grid;
8+
place-items: center;
9+
grid-template-columns: 1fr 0.4fr 1fr;
10+
div {
11+
display: flex;
12+
flex-direction: column;
13+
}
14+
hr {
15+
width: 1px;
16+
height: 99%;
17+
background-color: rgba(255, 255, 255, 0.303);
18+
border: none;
19+
}
20+
label {
21+
margin-left: 0.2rem;
22+
margin-top: 0.5rem;
23+
font-size: $font-p;
24+
&.active {
25+
color: rgb(255, 73, 73);
26+
}
27+
}
28+
input {
29+
@include form;
30+
border: 1px solid rgba(255, 255, 255, 0.231);
31+
font-size: $font-p;
32+
background-color: $background;
33+
width: 15rem;
34+
height: 2rem;
35+
&.active {
36+
border: 1px solid rgb(255, 73, 73);
37+
}
38+
}
39+
textarea {
40+
@include form;
41+
border: 1px solid rgba(255, 255, 255, 0.231);
42+
background-color: $background;
43+
resize: none;
44+
height: 9rem;
45+
padding: 1rem;
46+
&.active {
47+
border: 1px solid rgb(255, 73, 73);
48+
}
49+
}
50+
.shop-invention-text {
51+
line-height: 1rem;
52+
margin: 0;
53+
font-size: 1rem;
54+
a {
55+
color: rgb(213, 78, 78);
56+
font-size: 1.8rem;
57+
}
58+
}
59+
60+
button {
61+
margin: 1rem 0;
62+
padding: 1rem 4.9rem;
63+
@include button;
64+
background-color: $color-blue;
65+
&:hover {
66+
background-color: rgb(22, 70, 158);
67+
}
68+
}
69+
}

‎src/components/Shopp/ShopContainer/ShopContainer.jsx

+18-120
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,8 @@ import LoadingAnimation from "../../LoadingAnimation/LoadingAnimation";
66
import ShopItem from "../ShopItem/ShopItem";
77
import ShowModal from "../../ShowModal/ShowModal";
88
import { handleAddInvention } from "../../Api_/ShopApi";
9-
10-
const newInvention = {
11-
name: "",
12-
description: "",
13-
uses: "",
14-
creator: "",
15-
image: "",
16-
date_of_invention: "",
17-
patent_number: "",
18-
price: "",
19-
weight: "",
20-
dimensions: "",
21-
power_source: "",
22-
operating_time: "",
23-
material: "",
24-
status: 0,
25-
reviews: [],
26-
category: "",
27-
target_audience: "",
28-
};
9+
import ShopAddInvention from "../ShopAddInvention/ShopAddInvention";
10+
import { newInvention } from "../../../content";
2911

3012
export default function ShopContainer() {
3113
const [data, setData] = useState([]);
@@ -36,6 +18,7 @@ export default function ShopContainer() {
3618
const [selectedSectionId, setSelectedSectionId] = useState(null);
3719
const [addItem, setAddItem] = useState(false);
3820
const [newItems, setNewItems] = useState(newInvention);
21+
const [errorMessage, setErrorMessage] = useState("");
3922

4023
function handleChangeInvention(event) {
4124
setNewItems((prev) => {
@@ -45,8 +28,14 @@ export default function ShopContainer() {
4528

4629
function addNewInvention(event) {
4730
event.preventDefault();
48-
handleAddInvention(newItems, setData);
49-
setNewItems(newInvention);
31+
handleAddInvention(newItems, setData, setErrorMessage);
32+
33+
setTimeout(() => setErrorMessage(""), 5000);
34+
35+
if (!Object.values(newItems).includes("") && errorMessage === "") {
36+
setAddItem(false);
37+
setNewItems(newInvention);
38+
}
5039
}
5140
useEffect(() => {
5241
fetchShopData((newData) => {
@@ -101,106 +90,15 @@ export default function ShopContainer() {
10190
<Navbar title={["Getting started", "Shop"]}>
10291
<ShowModal
10392
modalStatus={addItem}
104-
title="Add a new invention"
93+
title={errorMessage !== "" ? errorMessage : `Add a new Invention`}
10594
modalDisable={setAddItem}
10695
>
107-
<form className="shop-invention-add-form">
108-
<div>
109-
<label>Your name:</label>
110-
<input
111-
name="creator"
112-
onChange={handleChangeInvention}
113-
type="text"
114-
/>
115-
<label>Invention name:</label>
116-
<input
117-
name="name"
118-
value={newItems.name}
119-
onChange={handleChangeInvention}
120-
type="text"
121-
/>
122-
<label>Uses form:</label>
123-
<input
124-
name="uses"
125-
value={newItems.uses}
126-
onChange={handleChangeInvention}
127-
type="text"
128-
/>
129-
<label>Price:</label>
130-
<input
131-
name="price"
132-
value={newItems.price}
133-
onChange={handleChangeInvention}
134-
type="text"
135-
/>
136-
<label>Weight:</label>
137-
<input
138-
name="weight"
139-
value={newItems.weight}
140-
onChange={handleChangeInvention}
141-
type="text"
142-
/>
143-
<label>Description:</label>
144-
<textarea
145-
name="description"
146-
value={newItems.description}
147-
onChange={handleChangeInvention}
148-
></textarea>
149-
</div>
150-
<hr />
151-
<div>
152-
<label>Dimensions:</label>
153-
<input
154-
value={newItems.dimensions}
155-
name="dimensions"
156-
onChange={handleChangeInvention}
157-
type="text"
158-
/>
159-
<label>Power source:</label>
160-
<input
161-
value={newItems.power_source}
162-
name="power_source"
163-
onChange={handleChangeInvention}
164-
type="text"
165-
/>
166-
<label>Material:</label>
167-
<input
168-
value={newItems.material}
169-
name="material"
170-
onChange={handleChangeInvention}
171-
type="text"
172-
/>
173-
<label>Avaiable:</label>
174-
<input
175-
value={newItems.status}
176-
name="status"
177-
onChange={handleChangeInvention}
178-
type="number"
179-
/>
180-
<label>Category:</label>
181-
<input
182-
value={newItems.category}
183-
name="category"
184-
onChange={handleChangeInvention}
185-
type="text"
186-
/>
187-
<label>Target Audience:</label>
188-
<input
189-
value={newItems.target_audience}
190-
name="target_audience"
191-
onChange={handleChangeInvention}
192-
type="text"
193-
/>
194-
195-
<span>
196-
<button onClick={addNewInvention}>Add invention</button>
197-
</span>
198-
<p className="shop-invention-text">
199-
<a>*</a>If you add your invention, it will appear at the bottom of
200-
page!
201-
</p>
202-
</div>
203-
</form>
96+
<ShopAddInvention
97+
newItems={newItems}
98+
errorMessage={errorMessage}
99+
addNewInvention={addNewInvention}
100+
handleChangeInvention={handleChangeInvention}
101+
/>
204102
</ShowModal>
205103
<section className="shop-searchbox">
206104
<input

‎src/components/Shopp/ShopItem/ShopItem.jsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,13 @@ export default function ShopItem({
3131
</section>
3232
<section className="item-section-2">
3333
<div>
34-
<h2>{item.price}</h2>
34+
<h2>
35+
<a className="item-dolar">$</a>
36+
{item.price}
37+
</h2>
3538
<span>
3639
<a>Weight:</a>
37-
<p>{item.weight}</p>
40+
<p>{item.weight} kg</p>
3841
</span>
3942
<span>
4043
<a>Status:</a>

‎src/components/Shopp/ShopItem/ShopItem.scss

+4
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,10 @@
5656
h2 {
5757
color: white;
5858
}
59+
.item-dolar {
60+
font-size: 1.6rem;
61+
color: rgb(20, 220, 20);
62+
}
5963
}
6064
.shop-buttons {
6165
display: grid;

0 commit comments

Comments
 (0)