Skip to content

Commit

Permalink
services State and display started
Browse files Browse the repository at this point in the history
  • Loading branch information
@michacurri
michacurri committed Feb 24, 2021
1 parent d6c20a1 commit 22468b2
Show file tree
Hide file tree
Showing 2 changed files with 303 additions and 48 deletions.
198 changes: 150 additions & 48 deletions src/components/admin/Services.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, Fragment } from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Paper from "@material-ui/core/Paper";
Expand Down Expand Up @@ -30,6 +30,13 @@ const useStyles = makeStyles((theme) => ({
padding: "3rem 0",
rounded: false,
},
paperDispServices: {
display: "flex",
width: "30%",
margin: "0 auto",
padding: "3rem 0",
rounded: false,
},
paperText: {
rounded: false,
padding: 1,
Expand All @@ -42,7 +49,7 @@ const useStyles = makeStyles((theme) => ({
export default function Services() {
const classes = useStyles();
const [services, setServices] = useState({
serviceType: null,
type: null,
title: null,
desc: null,
price: null,
Expand All @@ -59,7 +66,11 @@ export default function Services() {
if (!response.ok) {
throw new Error(json.message);
} else {
setServices(json.data);
if (json.data) {
setServices(json.data);
} else {
console.log("no services are available");
}
}
} catch (err) {
console.log(err);
Expand All @@ -74,24 +85,24 @@ export default function Services() {
const {
target: { name, value },
} = e;
if (name === "serviceType") {
setServices.serviceType(value);
if (name === "type") {
setServices({ ...services, type: value });
}
if (name === "title") {
setServices.title(value);
setServices({ ...services, title: value });
}
if (name === "desc") {
setServices.desc(value);
setServices({ ...services, desc: value });
}
if (name === "price") {
setServices.price(value);
setServices({ ...services, price: value });
} else;
};

const addRecord = async (e) => {
e.preventDefault();
const service = {
serviceType: services.serviceType,
type: services.type,
title: services.title,
desc: services.desc,
price: services.price,
Expand All @@ -108,52 +119,143 @@ export default function Services() {
if (!response.ok) {
throw new Error(data.message);
}
setServices.serviceType("");
setServices.type("");
setServices.title("");
setServices.desc("");
setServices.price("");
} catch (err) {
console.log(err);
}
};
console.log(services.serviceType);
// let content;
// if (services) {
// content = services;
// } else

return (
<h3>services</h3>
// <Paper className={classes.paper}>
// <form onSubmit={addRecord} className={classes.root} autoComplete="off">
// <Grid container className={classes.root}>
// <Grid item xs={10} className={classes.grid__items}>
// <Paper className={classes.paperText}>
// <TextField
// id="serviceType"
// name="serviceType"
// label={services.serviceType ? "Service Type" : null}
// value={services.serviceType || ""}
// inputProps={{
// "aria-label": "Input for service type",
// maxLength: 50,
// }}
// onChange={updateFields}
// placeholder="Service Type"
// className={classes.textField}
// style={{ margin: 8 }}
// fullWidth
// margin="normal"
// InputLabelProps={{
// shrink: true,
// }}
// required
// autoFocus
// />
// </Paper>
// </Grid>
// </Grid>
// </form>
// </Paper>
<Fragment>
<Paper className={classes.paper}>
<form onSubmit={addRecord} className={classes.root} autoComplete="off">
<Grid container className={classes.root}>
<Grid item xs={10} className={classes.grid__items}>
<Paper className={classes.paperText}>
<TextField
id="type"
name="type"
label={services.type ? "Service Type" : null}
value={services.type || ""}
inputProps={{
"aria-label": "Input for service type",
maxLength: 50,
}}
onChange={updateFields}
placeholder="Service Type"
className={classes.textField}
style={{ margin: 8 }}
fullWidth
margin="normal"
InputLabelProps={{
shrink: true,
}}
required
autoFocus
/>
</Paper>
</Grid>
<Grid item xs={10} className={classes.grid__items}>
<Paper className={classes.paperText}>
<TextField
id="title"
name="title"
label={services.title ? "Title" : null}
value={services.title || ""}
inputProps={{
"aria-label": "Input for service title",
maxLength: 50,
}}
onChange={updateFields}
placeholder="Title"
className={classes.textField}
style={{ margin: 8 }}
fullWidth
margin="normal"
InputLabelProps={{
shrink: true,
}}
required
autoFocus
/>
</Paper>
</Grid>
<Grid item xs={10} className={classes.grid__items}>
<Paper className={classes.paperText}>
<TextField
id="desc"
name="desc"
label={services.desc ? "Description" : null}
value={services.desc || ""}
inputProps={{
"aria-label": "Input for service description",
maxLength: 50,
}}
onChange={updateFields}
placeholder="Description"
className={classes.textField}
style={{ margin: 8 }}
fullWidth
margin="normal"
InputLabelProps={{
shrink: true,
}}
required
autoFocus
/>
</Paper>
</Grid>
<Grid item xs={10} className={classes.grid__items}>
<Paper className={classes.paperText}>
<TextField
id="price"
name="price"
label={services.price ? "Price" : null}
value={services.price || ""}
inputProps={{
"aria-label": "Input for service price",
maxLength: 50,
}}
onChange={updateFields}
placeholder="Price"
className={classes.textField}
style={{ margin: 8 }}
fullWidth
margin="normal"
InputLabelProps={{
shrink: true,
}}
required
autoFocus
/>
</Paper>
</Grid>
</Grid>
</form>
</Paper>
{services.type ? (
<Fragment>
<Paper className={classes.paperDispServices}>
<Grid xs={4} container className={classes.root}>
<Grid
item
xs={4}
className={classes.grid__items}
key={Object.keys(services)}
>
<Paper className={classes.paperText}>
{Object.values(services)}
</Paper>
</Grid>
</Grid>
</Paper>
</Fragment>
) : (
<h1>NO SERVICES</h1>
)}
</Fragment>
);
// return content;
}
Loading

0 comments on commit 22468b2

Please sign in to comment.