F request service

api/controllers/serviceController.js

@@ -0,0 +1,25 @@
+const Services = require("../models/serviceSchema");
+
+exports.findService = async (title) => {
+  try {
+    const serviceRes = await Services.find({ title });
+    return serviceRes;
+  } catch (err) {
+    throw err;
+  }
+};
+
+exports.createService = async ({ serviceType, title, desc, price }) => {
+  try {
+    const newService = new Service({
+      serviceType,
+      title,
+      desc,
+      price,
+    });
+    const service = await newService.save();
+    return service;
+  } catch (err) {
+    console.log(`error: ${err}`);
+  }
+};

api/models/serviceSchema.js

@@ -2,10 +2,28 @@ const mongoose = require("mongoose");
 const { Schema } = mongoose;
 
 //___ servicesSchema
-// service:        String
+// serviceType:         String
+// title:               String
+// description:         [String]
+// price:               Number
 
 const serviceSchema = new Schema({
-  services: String,
+  serviceType: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  desc: {
+    type: [String],
+    required: true,
+  },
+  price: {
+    type: Number,
+    required: true,
+  },
 });
 
-module.exports = serviceSchema;
+module.exports = mongoose.model("Services", serviceSchema);

api/routes/serviceRoutes.js

@@ -0,0 +1,52 @@
+const express = require("express");
+const router = express.Router();
+const Services = require("../models/serviceSchema");
+
+router.route("/").get(async (req, res) => {
+  try {
+    const services = await Services.find();
+    res.json(services);
+  } catch (err) {
+    res.json({ error: err });
+  }
+});
+
+router.route("/create").post(async (req, res) => {
+  const { serviceType, title, desc, price } = req.body;
+  if (!serviceType || serviceType === " ") {
+    res.status(400).json({ message: "service type must be provided" });
+    return;
+  }
+  if (!title || title === " ") {
+    res.status(400).json({ message: "title must be provided" });
+    return;
+  }
+  if (!desc || desc === " ") {
+    res.status(400).json({ message: "description must be provided" });
+    return;
+  }
+  if (!price || price === " ") {
+    res.status(400).json({ message: "price must be provided" });
+    return;
+  }
+  try {
+    const service = await findService(title);
+    if (service) {
+      res
+        .status(400)
+        .json({ message: `a service with this title already exists` });
+    }
+    const newService = await createService({
+      serviceType,
+      title,
+      desc,
+      price,
+    });
+    res.status(200).json({ data: { id: newService._id } });
+  } catch (err) {
+    console.log(err);
+    res.status(500).json({ message: "Internal server error" });
+  }
+});
+
+module.exports = router;

server.js

@@ -26,8 +26,10 @@ app.use(
 // * EXPRESS ROUTER MINI-APP
 const profile = require("./api/routes/profileRoutes");
 const workorder = require("./api/routes/workorderRoutes");
+const services = require("./api/routes/serviceRoutes");
 app.use("/api/profile", profile);
 app.use("/api/workorder", workorder);
+app.use("/api/services", services);
 
 if (process.env.NODE_ENV === "production") {
   app.use(express.static("./build"));
@@ -55,4 +57,3 @@ mongoose
   .catch((err) => {
     console.log({ error: err });
   });
-

src/App.css

@@ -1,4 +1,4 @@
-.App {
+/* .App {
   text-align: center;
 }
 
@@ -35,4 +35,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+} */

src/App.js

@@ -5,30 +5,59 @@ import MainContentSection from "./components/root/MainContentSection";
 import Footer from "./components/root/Footer";
 import { ImpersonatorProvider } from "./backend/authorization/ImpersonatorContext";
 import { UserProvider } from "./backend/authorization/UserContext";
-import { ThemeProvider } from "@material-ui/core";
-import theme from './styles/theme'
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    height: "15vh",
+    // maxWidth: "900px",
+    padding: "2rem",
+    backgroundColor: "#212529",
+  },
+  main: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    // width: "90%",
+    // maxWidth: "1200px",
+    margin: "0 auto",
+    height: "70vh",
+    backgroundColor: "gray",
+  },
+  footer: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "15vh",
+    padding: "2rem",
+    backgroundColor: "#212529",
+  },
+}));
 
 const App = () => {
+  const classes = useStyles();
   const [loginClick, setLoginClick] = useState(false);
 
   return (
-    <ThemeProvider theme={theme}>
-      <ImpersonatorProvider>
-        <UserProvider>
-          <Router>
-            <header className="header__container">
-              <Header loginClick={loginClick} setLoginClick={setLoginClick} />
-            </header>
-            <main>
-              <MainContentSection loginClick={loginClick} />
-            </main>
-            <footer className="main__footer">
-              <Footer />
-            </footer>
-          </Router>
-        </UserProvider>
-      </ImpersonatorProvider>
-    </ThemeProvider>
+    <ImpersonatorProvider>
+      <UserProvider>
+        <Router>
+          <header className={classes.header}>
+            <Header loginClick={loginClick} setLoginClick={setLoginClick} />
+          </header>
+          <main className={classes.main}>
+            <MainContentSection loginClick={loginClick} />
+          </main>
+          <footer className={classes.footer}>
+            <Footer />
+          </footer>
+        </Router>
+      </UserProvider>
+    </ImpersonatorProvider>
   );
 };
 

src/backend/authorization/AuthContainer.js

@@ -13,7 +13,7 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     flexWrap: "wrap",
     justifyContent: "center",
-    flexGrow: 1,
+    // flexGrow: 1,
     "& > *": {
       margin: theme.spacing(1),
     },
@@ -41,6 +41,13 @@ const useStyles = makeStyles((theme) => ({
     flexGrow: "50%",
     flexBasis: "200px",
   },
+  auth__button__container: {
+    display: "flex",
+    flexDirection: "column",
+    "& Button": {
+      marginBottom: "1rem",
+    },
+  },
 }));
 
 const AuthContainer = ({ loadUserProfile }) => {
@@ -123,19 +130,24 @@ const AuthContainer = ({ loadUserProfile }) => {
                 </Paper>
               </Grid>
             </Grid>
-            <Button variant="outlined" color="primary" type="submit">
-              Login
-            </Button>
+            <div className={classes.auth__button__container}>
+              <Button variant="outlined" color="primary" type="submit">
+                Login
+              </Button>
+              <Button
+                component={Link}
+                to={`${link}`}
+                onClick={changeLink}
+                variant="outlined"
+                color="primary"
+              >{`${link}`}</Button>
+            </div>
           </form>
         </Route>
         <Route path="/signup">
           <ProfileCreate changeLink={changeLink} />
         </Route>
       </Switch>
-      {/* prettier-ignore */}
-      <nav>
-        <Button component={Link} to={`${link}`} onClick={changeLink} variant="outlined" color="primary" >{`${link}`}</Button>
-      </nav>
     </Fragment>
   );
 };