Skip to content

Commit cfd0e61

Browse files
atapasatapas
committed
feat: Now we are persisting a shape to the DB
1 parent d08d834 commit cfd0e61

5 files changed

Lines changed: 84 additions & 68 deletions

File tree

‎components/core/CreateShape.js‎

Lines changed: 55 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,25 @@ import Col from "react-bootstrap/Col";
55
import Modal from "react-bootstrap/Modal";
66
import Button from "react-bootstrap/Button";
77

8+
// Toast
9+
import toast from "react-hot-toast";
10+
11+
// harperDb fetch call
12+
import { harperFetch } from "../../utils/HarperFetch";
13+
814
import { ShapeForm, ShapePreview } from "..";
915

1016
const CreateShape = (props) => {
1117
const [shapeInformation, setShapeInformation] = useState({
1218
"name": "Tilted Square",
13-
"type": "tiltedSquare",
1419
"formula": "polygon(10% 10%, 90% 10%, 90% 90%, 10% 80%)",
1520
"vertices": 4,
21+
"private": false,
1622
"edges": 4,
1723
"notes": "",
1824
"clipPathType": "polygon",
19-
"showShadow": true,
20-
"backgroundColor": "#12a8d6",
25+
"showShadow": false,
26+
"backgroundColor": "#d61284",
2127
"verticeCoordinates" : [
2228
{
2329
"x": "10%",
@@ -42,13 +48,18 @@ const CreateShape = (props) => {
4248
const name = event.target.name || event.type;
4349
const value = event.target.type === "checkbox" ? event.target.checked : event.target.value;
4450

45-
console.log(event, data);
51+
// console.log(event, data);
4652

4753
if (name === "name") {
4854
setShapeInformation({
4955
...shapeInformation,
5056
"name": value,
51-
"type": value.toLowerCase(),
57+
});
58+
} else if (name === 'private') {
59+
setShapeInformation({
60+
...shapeInformation,
61+
"private": !shapeInformation.private,
62+
5263
});
5364
} else if (name === "formula") {
5465
const edgeVerticeNumber = shapeInformation.clipPathType === "polygon" ? value.split(",").length: 0;
@@ -171,17 +182,15 @@ const CreateShape = (props) => {
171182
if (clipPathType === "polygon") {
172183
setShapeInformation({
173184
...shapeInformation,
174-
"name": "Tilted Square",
175-
"type": "tiltedSquare",
185+
"name": "Tilted Square",
176186
"formula": "polygon(10% 10%, 90% 10%, 90% 90%, 10% 80%)",
177187
});
178188
}
179189

180190
if (clipPathType === "circle") {
181191
setShapeInformation({
182192
...shapeInformation,
183-
"name": "Circle",
184-
"type": "circle",
193+
"name": "Circle",
185194
"formula": "circle(50% at 50% 50%)",
186195
});
187196
}
@@ -190,7 +199,6 @@ const CreateShape = (props) => {
190199
setShapeInformation({
191200
...shapeInformation,
192201
"name": "Ellipse",
193-
"type": "ellipse",
194202
"formula": "ellipse(25% 40% at 50% 50%)",
195203
});
196204
}
@@ -208,13 +216,48 @@ const CreateShape = (props) => {
208216

209217
const [validated, setValidated] = useState(false);
210218

211-
const handleSubmit = (event) => {
219+
const handleSubmit = async(event) => {
220+
event.preventDefault();
212221
const form = event.currentTarget;
213222
if (form.checkValidity() === false) {
214223
event.preventDefault();
215224
event.stopPropagation();
216225
}
217226
setValidated(true);
227+
228+
console.log(shapeInformation);
229+
230+
// Create the shape in the DB
231+
const insertShape = await harperFetch({
232+
operation: "sql",
233+
sql: `INSERT into tryshape.shapes(backgroundColor, createdAt, createdBy, edges, email, formula, likes, name, notes, private, type, vertices)
234+
values('${shapeInformation.backgroundColor}', null, '${props.user.email}', ${shapeInformation.edges}, null, '${shapeInformation.formula}', 0, '${shapeInformation.name}', '${shapeInformation.notes}', ${shapeInformation.private}, '${shapeInformation.clipPathType}', ${shapeInformation.vertices})`,
235+
});
236+
237+
console.log(insertShape);
238+
239+
// Create the user in the db
240+
if (insertShape['inserted_hashes'].length > 0) {
241+
// First check if the user exist
242+
const result = await harperFetch({
243+
operation: "sql",
244+
sql: `SELECT count(*) from tryshape.users WHERE email='${props.user.email}'`,
245+
});
246+
const count = (result[0]['COUNT(*)']);
247+
console.log({count});
248+
// If doesn't exist, create in db
249+
if (count === 0) {
250+
const insertUser = await harperFetch({
251+
operation: "sql",
252+
sql: `INSERT into tryshape.users(email, name, photoURL)
253+
values('${props.user.email}', '${props.user.displayName}', '${props.user.photoURL}')`,
254+
});
255+
} else {
256+
console.log(`The user ${props.user.email} present in DB`);
257+
}
258+
}
259+
props.handleClose();
260+
toast.success(`Shape ${shapeInformation.name} created successfully.`);
218261
}
219262

220263
return(
@@ -227,7 +270,7 @@ const CreateShape = (props) => {
227270
backdrop="static"
228271
>
229272
<Modal.Header closeButton>
230-
<Modal.Title>Create Shape</Modal.Title>
273+
<Modal.Title>Create a Shape</Modal.Title>
231274
</Modal.Header>
232275
<Modal.Body>
233276
<Container fluid>

‎components/utils/Header.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,7 @@ const Header = ({
233233
<div>Sign In</div>
234234
</Button>
235235
)}
236-
<CreateShape show={showCreateShape} handleClose={closeModal} />
236+
<CreateShape show={showCreateShape} handleClose={closeModal} user={user} />
237237
</AppHeader>
238238
);
239239
};

‎components/utils/ShapeForm.js‎

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,21 @@ const ShapeForm = (props) => {
2525
</Form.Group>
2626

2727
<Form.Group>
28-
<Form.Label>Description</Form.Label>
28+
<Form.Label>Type</Form.Label>
2929
<Form.Control
30-
as="textarea"
31-
name="notes"
32-
rows={3}
33-
value={props.shapeInformation.notes}
34-
onChange={props.handleChange}
35-
/>
30+
as="select"
31+
name="clipPathType"
32+
value={props.shapeInformation.clipPathType}
33+
onChange={props.handleChange}
34+
>
35+
<option value="polygon">Polygon</option>
36+
<option value="circle">Circle</option>
37+
<option value="ellipse">Ellipse</option>
38+
</Form.Control>
3639
</Form.Group>
3740

3841
<Form.Group>
39-
<Form.Label>Color Picker</Form.Label>
42+
<Form.Label>Color</Form.Label>
4043
<ColorPicker
4144
type="color"
4245
name="backgroundColor"
@@ -47,21 +50,27 @@ const ShapeForm = (props) => {
4750
</Form.Group>
4851

4952
<Form.Group>
50-
<Form.Label>Type of Clip-Path</Form.Label>
53+
<Form.Check
54+
name="private"
55+
label="Make it Private"
56+
checked={props.shapeInformation.private}
57+
onChange={(e) => props.handleChange(e)}
58+
/>
59+
</Form.Group>
60+
61+
<Form.Group>
62+
<Form.Label>What's it about?</Form.Label>
5163
<Form.Control
52-
as="select"
53-
name="clipPathType"
54-
value={props.shapeInformation.clipPathType}
55-
onChange={props.handleChange}
56-
>
57-
<option value="polygon">Polygon</option>
58-
<option value="circle">Circle</option>
59-
<option value="ellipse">Ellipse</option>
60-
</Form.Control>
64+
as="textarea"
65+
name="notes"
66+
rows={3}
67+
value={props.shapeInformation.notes}
68+
onChange={props.handleChange}
69+
/>
6170
</Form.Group>
6271

6372
<Form.Group>
64-
<Form.Label>Clip-Path</Form.Label>
73+
<Form.Label>CSS clip-Path</Form.Label>
6574
<Form.Control
6675
type="text"
6776
name="formula"

‎components/utils/ShapePreview.js‎

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -89,40 +89,6 @@ const ShapePreview = (props) => {
8989
onChange={(e) => props.handleChange(e)}
9090
/>
9191
</Form>
92-
93-
<ShapeDetails>
94-
<ShapeDetailsItems>
95-
{props.shapeInformation.name === "" ?
96-
null :
97-
<><strong>Name: </strong> {props.shapeInformation.name}</>
98-
}
99-
</ShapeDetailsItems>
100-
<ShapeDetailsItems>
101-
{props.shapeInformation.notes === "" ?
102-
null :
103-
<>
104-
<strong>Did you know?</strong>
105-
<br />
106-
{props.shapeInformation.notes}
107-
</>
108-
}
109-
</ShapeDetailsItems>
110-
<ShapeDetailsItems>
111-
<span>
112-
<b>Edges:</b> {props.shapeInformation.edges}
113-
</span>
114-
</ShapeDetailsItems>
115-
<ShapeDetailsItems>
116-
<span>
117-
<b>Vertices:</b> {props.shapeInformation.vertices}
118-
</span>
119-
</ShapeDetailsItems>
120-
<ShapeDetailsItems>
121-
<span>
122-
<b>clip-path:</b> <code><b>{props.shapeInformation.formula}</b></code>
123-
</span>
124-
</ShapeDetailsItems>
125-
</ShapeDetails>
12692
</Playground>
12793
</>
12894
);

‎pages/_app.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,6 @@ export default function App({ Component, pageProps }) {
3333
}
3434
});
3535

36-
console.log('pageProps', pageProps);
37-
3836
return (
3937

4038
<>

0 commit comments

Comments
 (0)