Add comment form and use database for comments (#159)

* sk - Add section02.md

* Sk - Add section02.md

* Sk - More edits to section02.md

* created comment form

* Format

* Change comments to reviews, edit review page, use database for reviews

* Add WriteReviewPage test

Co-authored-by: Christopher <51393127+chriscerie@users.noreply.github.com>

client/src/App.tsx

@@ -3,6 +3,7 @@ import './App.scss';
 import HomePage from './pages/HomePage';
 import LocationPage from './pages/LocationPage';
 import LocationEditPage from './pages/LocationEditPage';
+import WriteReviewPage from './pages/WriteReviewPage';
 import ProfilePage from './pages/ProfilePage';
 import Header from './components/Header';
 import Footer from './components/Footer';
@@ -25,6 +26,7 @@ function App() {
         <Switch>
           <Route exact path="/loc/:id" component={LocationPage} />
           <Route exact path="/loc-edit/:id" component={LocationEditPage} />
+          <Route exact path="/write-review/:id" component={WriteReviewPage} />
           <Route exact path="/profile" component={ProfilePage} />
         </Switch>
 

client/src/pages/LocationPage/LeftColumnDetails.tsx

@@ -1,4 +1,5 @@
-import CommentSection from './CommentSection';
+import { Link } from 'react-router-dom';
+import ReviewSection from './ReviewSection';
 import LocationSection from './LocationSection';
 import './LeftColumnDetails.scss';
 import { Button } from '@mui/material';
@@ -8,19 +9,30 @@ import ScreenShareOutlinedIcon from '@mui/icons-material/ScreenShareOutlined';
 import BookmarkBorderOutlinedIcon from '@mui/icons-material/BookmarkBorderOutlined';
 import type { LocationType } from '../../types/LocationType';
 
-function LeftColumnDetais({ locationInfo }: { locationInfo: LocationType }) {
+function LeftColumnDetais({
+  locationInfo,
+  id,
+}: {
+  locationInfo: LocationType;
+  id: string;
+}) {
   return (
     <div id="location-page-left-column">
       <div id="location-page-left-buttons-container">
         <div className="location-page-left-button">
-          <Button
-            variant="contained"
-            disableElevation
-            startIcon={<ChatOutlinedIcon />}
-            sx={{ textTransform: 'none', fontSize: '1em' }}
+          <Link
+            to={`/write-review/${locationInfo.id}`}
+            style={{ textDecoration: 'none' }}
           >
-            Write a comment
-          </Button>
+            <Button
+              variant="contained"
+              disableElevation
+              startIcon={<ChatOutlinedIcon />}
+              sx={{ textTransform: 'none', fontSize: '1em' }}
+            >
+              Write a Review
+            </Button>
+          </Link>
         </div>
         <div className="location-page-left-button">
           <Button
@@ -62,7 +74,7 @@ function LeftColumnDetais({ locationInfo }: { locationInfo: LocationType }) {
 
       <LocationSection title="Comments">
         <div className="align-text-left">
-          <CommentSection />
+          <ReviewSection id={id} />
         </div>
       </LocationSection>
     </div>

client/src/pages/LocationPage/CommentSection/Comment.scss → client/src/pages/LocationPage/ReviewSection/Review.scss

@@ -1,66 +1,66 @@
-.comment-container {
+.review-container {
   margin-bottom: 3em;
 }
 
-.comment-header-container {
+.review-header-container {
   display: table;
   border-spacing: 1.5em 0;
   vertical-align: middle;
   margin: 0 -1.5em 1.5em;
 }
 
-.comment-header-leftside {
+.review-header-leftside {
   display: table-cell;
   box-sizing: border-box;
   vertical-align: top;
   width: 100%;
   border-collapse: collapse;
 }
 
-.comment-header-rightside {
+.review-header-rightside {
   display: table-cell;
   box-sizing: border-box;
   vertical-align: top;
 }
 
-.comment-header-leftside-body {
+.review-header-leftside-body {
   display: table;
   border-collapse: separate;
   border-spacing: 1.5em 0;
   margin: 0 -1.5em;
 }
 
-.comment-profile-image-container {
+.review-profile-image-container {
   display: table-cell;
   border-radius: 50%;
   overflow: hidden;
 }
 
-.comment-profile-image {
+.review-profile-image {
   height: 4em;
   width: 4em;
   aspect-ratio: auto 1;
   vertical-align: middle;
   box-sizing: border-box;
 }
 
-.comment-user-info-container {
+.review-user-info-container {
   display: table-cell;
   vertical-align: middle;
   width: 100%;
 }
 
-.comment-user-info {
+.review-user-info {
   display: block;
   font-size: larger;
   font-weight: 700;
 }
 
-.comment-text-container {
+.review-text-container {
   width: 90%;
 }
 
-.comment-text {
+.review-text {
   margin: 0;
   font-size: smaller;
   line-height: 1.7em;

client/src/pages/LocationPage/ReviewSection/Review.tsx

@@ -0,0 +1,51 @@
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import { IconButton } from '@mui/material';
+import type { UserType } from '../../../types/UserType';
+import './Review.scss';
+
+export type ReviewType = {
+  _id: string;
+  author_id: string;
+  body: string;
+  liked_by: Array<string>;
+  created_at: string;
+  author?: UserType;
+};
+
+const Review = ({ comm }: { comm: ReviewType }) => {
+  console.log(comm);
+  console.log(comm.author);
+  return (
+    <li className="review-container">
+      <div className="review-header-container">
+        <div className="review-header-leftside">
+          <div className="review-header-leftside-body">
+            <div className="review-profile-image-container">
+              <img
+                src={comm.author ? comm.author.profile_picture : ''}
+                alt="profile"
+                className="review-profile-image"
+              />
+            </div>
+            <div className="review-user-info-container">
+              <div className="review-user-info">
+                {comm.author ? comm.author.first_name : 'Unknown'}
+              </div>
+              <div>{comm.created_at}</div>
+            </div>
+          </div>
+        </div>
+        <div className="review-header-rightside">
+          <IconButton>
+            <MoreHorizIcon />
+          </IconButton>
+        </div>
+      </div>
+      <div className="review-text-container">
+        <p className="review-text">{comm.body}</p>
+      </div>
+    </li>
+  );
+};
+
+export default Review;

client/src/pages/LocationPage/ReviewSection/index.scss

@@ -0,0 +1,5 @@
+.review-section-container {
+  margin-top: 40px;
+  padding: 0;
+  margin: 0;
+}