Rendering update

client/src/components/App.js

@@ -31,9 +31,10 @@ const App = (props) => {
   return (
     <Router>
       <TopBar user={currentUser} />
+      <Route path="/">
+        <h1>Trip</h1>
+      </Route>
       <Switch>
-        <Route exact path="/">
-          <h2>Hello from react</h2>
         <Route exact path="/users/new" component={RegistrationForm} />
         <Route exact path="/user-sessions/new" component={SignInForm} />
         <Route exact path="/attractions" component={AttractionsList} />

client/src/components/AttractionShowPage.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
-
 import ReviewTile from "./ReviewTile.js";
-
+import NewReviewForm from "./NewReviewForm.js";
 import translateServerErrors from "../services/translateServerErrors.js";
 
 const AttractionShowPage = (props) => {
@@ -30,6 +29,10 @@ const AttractionShowPage = (props) => {
     }
   };
 
+  const addNewReview = (review) => {
+    setAttraction({...attraction, reviews: [...attraction.reviews, review]});
+  }
+
   useEffect(() => {
     getAttraction();
   }, []);
@@ -38,11 +41,18 @@ const AttractionShowPage = (props) => {
     return <ReviewTile key={reviewObject.id} {...reviewObject} />;
   });
 
+  const attractionName = attraction.name || "Launch Academy";
+  const attractionDescription = attraction.description || "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
+
   return (
     <div className="callout">
-      <h1>{attraction.name}</h1>
-      <h2>{attraction.description}</h2>
-      <h4>Attraction Reviews:</h4>
+      <h1>{attractionName}</h1>
+      <h2>{attractionDescription}</h2>
+      <div>
+        <h4>Add a Review</h4>
+        <NewReviewForm attractionId={id} addNewReview={addNewReview}/>
+      </div>
+      <h4>{attractionName} Reviews:</h4>
       {reviewTiles}
     </div>
   );

client/src/components/AttractionsList.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import AttractionTile from "./AttractionTile";
+import NewAttractionForm from "./NewAttractionForm";
 
 const AttractionsList = (props) => {
   const [attractions, setAttractions] = useState([]);
@@ -19,6 +20,10 @@ const AttractionsList = (props) => {
     }
   };
 
+  const addNewAttraction = (attraction) => {
+    setAttractions([...attractions, attraction]);
+  }
+
   useEffect(() => {
     getAttractions();
   }, []);
@@ -29,7 +34,12 @@ const AttractionsList = (props) => {
 
   return (
     <div className="callout">
-      Attractions
+
+      <h3>Add a New Attraction:</h3>
+      <div>
+        <NewAttractionForm addNewAttraction={addNewAttraction}/>
+      </div>
+      <h3>Attractions:</h3>
       {attractionTileComponents}
     </div>
   );

client/src/components/NewAttractionForm.js

@@ -8,6 +8,8 @@ const NewAttractionForm = (props) => {
   const [newAttraction, setNewAttraction] = useState({
     name: "",
     description: "",
+    // placeholder while we work on locationId integration
+    locationId: 2,
   });
   const [errors, setErrors] = useState([])
   const [shouldRedirect, setShouldRedirect] = useState(false);
@@ -27,13 +29,16 @@ const NewAttractionForm = (props) => {
         }
         throw new Error(`${response.status} (${response.statusText})`);
       } else {
-        setShouldRedirect(true);
+        //clearForm();
+        props.addNewAttraction(body.attraction);
       }
     } catch (error) {
       console.error(error.message);
     }
   };
 
+
+
   const handleInputChange = (event) => {
     event.preventDefault();
     setNewAttraction({ ...newAttraction, [event.currentTarget.name]: event.currentTarget.value });
@@ -50,7 +55,6 @@ const NewAttractionForm = (props) => {
 
   return (
     <div>
-      <h3>Add a New Attraction</h3>
       <ErrorList errors={errors}/>
       <form className="attraction-form form" onSubmit={handleSubmit}>
         <input type="text" name="name" placeholder="The Colosseum" onChange={handleInputChange}/>

client/src/components/NewReviewForm.js

@@ -1,12 +1,37 @@
 import React, { useState } from "react";
 
-const NewReviewForm = ({ postReview }) => {
+const NewReviewForm = (props) => {
   const [newReview, setNewReview] = useState({
     title: "",
     rating: "",
     content: "",
+    userId: 1,// Placeholder value
   });
 
+  const addNewReview = async () => {
+    const { attractionId } = props;
+    try {
+      const response = await fetch(`/api/v1/attractions/${attractionId}/reviews`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(newReview),
+      });
+      const body = await response.json();
+      if (!response.ok) {
+        if (response.status === 422) {
+          const newErrors = translateServerErrors(body.errors);
+          return setErrors(newErrors);
+        }
+        throw new Error(`${response.status} (${response.statusText})`);
+      } else {
+        clearForm();
+        props.addNewReview(body.review);
+      }
+    } catch (error) {
+      console.error(error.message);
+    }
+  };
+
   const handleInputChange = (event) => {
     event.preventDefault();
     setNewReview({
@@ -17,28 +42,27 @@ const NewReviewForm = ({ postReview }) => {
 
   const handleSubmit = (event) => {
     event.preventDefault();
-    postReview(newReview);
-    clearForm();
+    addNewReview(newReview);
   };
 
   const clearForm = () => {
     setNewReview({
       title: "",
       rating: "",
       content: "",
+      userId: 1
     });
   };
 
   return (
     <div>
-      <h1>Add a Review</h1>
       <form onSubmit={handleSubmit}>
         <label>
           Title:
           <input type="text" name="title" onChange={handleInputChange} value={newReview.title} />
         </label>
         <label>
-          content:
+          Content:
           <textarea
             name="content"
             onChange={handleInputChange}
@@ -54,7 +78,6 @@ const NewReviewForm = ({ postReview }) => {
             value={newReview.rating}
           />
         </label>
-
         <input type="submit" value="Add Review" />
       </form>
     </div>

client/src/components/layout/TopBar.js

@@ -24,9 +24,12 @@ const TopBar = ({ user }) => {
     <div className="top-bar">
       <div className="top-bar-left">
         <ul className="menu">
-          <li className="menu-text">App</li>
+          <li className="icon">
+            <img src="/favicon.ico" alt=""/>
+          </li>
+          <li><Link to="/">Trip</Link></li>
           <li>
-            <Link to="/">Home</Link>
+            <Link to="/attractions">Attractions</Link>
           </li>
         </ul>
       </div>

package.json

@@ -18,6 +18,6 @@
   },
   "engines": {
     "node": "^14.19",
-    "yarn": "^1.22.18"
+    "yarn": "^1.22.17"
   }
 }

server/src/db/Seeder.js

@@ -2,26 +2,17 @@
 import { connection } from "../boot.js"
 import LocationSeeder from "./seeders/LocationSeeder.js";
 import AttractionSeeder from "./seeders/AttractionSeeder.js"
-
-class Seeder {
-  static async seed() {
-    // include individual seed commands here
-    console.log("seeding locations...");
-    await LocationSeeder.seed();
-
-import { connection } from "../boot.js";
-import AttractionSeeder from "./seeders/AttractionSeeder.js";
 import ReviewSeeder from "./seeders/ReviewSeeder.js";
 import UserSeeder from "./seeders/UserSeeder.js";
 
 class Seeder {
   static async seed() {
+    console.log("seeding locations...");
+    await LocationSeeder.seed();
     console.log("seeding attractions...");
     await AttractionSeeder.seed();
     console.log("seeding users...");
     await UserSeeder.seed();
-    console.log("seeding users...");
-    await UserSeeder.seed();
     console.log("seeding reviews...");
     await ReviewSeeder.seed();
     console.log("Done!");

server/src/db/seeders/AttractionSeeder.js

@@ -16,7 +16,7 @@ class AttractionSeeder {
       {
         name: "Launch Academy",
         description: "Coding boot camp",
-        locationId: 3
+        locationId: 2
       },
     ];
     for (const singleAttractionData of attractionsData) {

server/src/db/seeders/LocationSeeder.js

@@ -9,12 +9,6 @@ class LocationSeeder {
         country: "Israel",
         description: "Haifa is the third-largest city in Israel—after Jerusalem and Tel Aviv—with a population of 285,316 in 2019. The city of Haifa forms part of the Haifa metropolitan area, the third-most populous metropolitan area in Israel. It is home to the Baháʼí Faith's Baháʼí World Centre, and is a UNESCO World Heritage Site and a destination for Baháʼí pilgrimage."
       },
-      {
-        city: "Lynn",
-        province: "Massachusetts",
-        country: "USA",
-        description: "Lynn is the 8th largest municipality in Massachusetts and the largest city in Essex County. Situated on the Atlantic Ocean, 3.7 miles (6.0 km) north of the Boston city line at Suffolk Downs, Lynn is part of Greater Boston's urban inner core. Settled by Europeans in 1629, Lynn is the 5th oldest colonial settlement in the Commonwealth. An early industrial center, Lynn was long colloquially referred to as the 'City of Sin', owing to its historical reputation for crime and vice."
-      },
       {
         city: "Boston",
         province: "Massachusetts",

server/src/models/Attraction.js

@@ -17,7 +17,9 @@ class Attraction extends Model {
   }
 
   static get relationMappings() {
+    const { Review } = require("./index.js");
     const { Location } = require("./index.js");
+
     return {
       location: {
         relation: Model.BelongsToOneRelation,
@@ -26,11 +28,7 @@ class Attraction extends Model {
           from: "attractions.locationId",
           to: "locations.id"
         }
-      }
-    }
-    const { Review } = require("./index.js");
-
-    return {
+      },
       reviews: {
         relation: Model.HasManyRelation,
         modelClass: Review,

server/src/models/index.js

@@ -2,11 +2,6 @@
 const Attraction = require("./Attraction.js");
 const Location = require("./Location.js");
 const User = require("./User.js");
-
-module.exports = { Attraction, Location, User };
-
-const User = require("./User.js");
-const Attraction = require("./Attraction.js");
 const Review = require("./Review.js");
 
-module.exports = { Review, Attraction, User };
+module.exports = { Attraction, Location, User, Review };

server/src/routes/api/v1/attractionReviewsRouter.js

@@ -0,0 +1,19 @@
+import express from "express";
+
+import { Review } from "../../../models/index.js";
+
+const attractionReviewsRouter = new express.Router({ mergeParams: true });
+
+attractionReviewsRouter.post("/", async (req, res) => {
+  const { title, content, rating, userId } = req.body;
+  const { attractionId } = req.params;
+
+  try {
+    const newReview = await Review.query().insertAndFetch({ title, content, rating, attractionId, userId });
+    return res.status(201).json({ review: newReview });
+  } catch (error) {
+    return res.status(500).json({ errors: error });
+  }
+});
+
+export default attractionReviewsRouter;

server/src/routes/api/v1/attractionsRouter.js

@@ -1,10 +1,14 @@
 import express from "express";
-import objection from "objection"
+import objection from "objection";
 import { Attraction } from "../../../models/index.js";
 import cleanUserInput from "../../../services/cleanUserInput.js";
 import { ValidationError } from "objection";
+import attractionReviewsRouter from "./attractionReviewsRouter.js";
+
 const attractionsRouter = new express.Router();
 
+attractionsRouter.use("/:attractionId/reviews", attractionReviewsRouter);
+
 attractionsRouter.get("/", async (req, res) => {
   try {
     const attractions = await Attraction.query();
@@ -15,11 +19,12 @@ attractionsRouter.get("/", async (req, res) => {
 });
 
 attractionsRouter.post("/", async (req, res) => {
-  const { name, description } = cleanUserInput(req.body);
+  const { name, description, locationId } = cleanUserInput(req.body);
   try {
-    const newAttraction = await Attraction.query().insertAndFetch({ name, description });
+    const newAttraction = await Attraction.query().insertAndFetch({ name, description, locationId });
     return res.status(201).json({ attraction: newAttraction });
   } catch (error) {
+    console.log(error);
     if (error instanceof ValidationError) {
       return res.status(422).json({ errors: error.data });
     }
@@ -28,15 +33,15 @@ attractionsRouter.post("/", async (req, res) => {
 });
 
 attractionsRouter.get("/:id", async (req, res) => {
-  const id = req.params.id
+  const id = req.params.id;
   try {
-    const attraction = await Attraction.query().findById(id)
-    attraction.reviews = await attraction.$relatedQuery("reviews")
-    return res.status(200).json({ attraction })
+    const attraction = await Attraction.query().findById(id);
+    attraction.reviews = await attraction.$relatedQuery("reviews");
+    return res.status(200).json({ attraction });
   } catch (error) {
-    console.log(error)
-    return res.status(500).json({ errors: error })
+    console.log(error);
+    return res.status(500).json({ errors: error });
   }
-})
+});
 
-export default attractionsRouter; 
+export default attractionsRouter;

server/src/routes/clientRouter.js

@@ -3,7 +3,7 @@ import getClientIndexPath from "../config/getClientIndexPath.js";
 
 const router = new express.Router();
 
-const clientRoutes = ["/", "/locations", "/locations/:id", "/user-sessions/new", "/users/new", "/attractions", "/attractions/new", "/attractions/:id"];
+const clientRoutes = ["/", "/locations", "/locations/:id", "/user-sessions/new", "/users/new", "/attractions", "/attractions/:id"];
 
 router.get(clientRoutes, (req, res) => {
   res.sendFile(getClientIndexPath());