Merge pull request #55 from odeta939/wineInfo

Wine info
odeta939 · Oct 25, 2023 · 6c6d127 · 6c6d127
2 parents b1dbf55 + 2dd46da
commit 6c6d127
Show file tree

Hide file tree

Showing 24 changed files with 265 additions and 196 deletions.
diff --git a/vinoa-web/app/api/review/route.ts b/vinoa-web/app/api/review/route.ts
@@ -1,9 +1,17 @@
-import { createReview } from "@/sanity/sanity-utils/review-utils";
-import { NextResponse } from "next/server";
+import { createReview } from '@/sanity/sanity-utils/review-utils';
+import { getUser } from '@/sanity/sanity-utils/user-utils';
 
-export async function POST(req:Request) {
-  const response : Review = await req.json();
-  await createReview(response);
+import { NextResponse } from 'next/server';
+
+export async function POST(req: Request) {
+  const response: ReviewDTO = await req.json();
+  const user = await getUser(response.userId);
+  const reviewToPost = {
+    rating: response.rating,
+    comment: response.comment,
+    wineId: response.wineId,
+    userId: user._id,
+  };
+  await createReview(reviewToPost);
   return NextResponse.json({ message: 'ok' });
 }
-
diff --git a/vinoa-web/app/api/user/route.ts b/vinoa-web/app/api/user/route.ts
@@ -4,7 +4,6 @@ import { NextResponse } from 'next/server';
 export async function POST(req: Request) {
   const response: User = await req.json();
   let user = await getUser(response.uid as string);
-  console.log('user', user);
   if (!user && response.name != '') {
     user = await createUser(response);
   }

diff --git a/vinoa-web/app/globals.css b/vinoa-web/app/globals.css
@@ -10,6 +10,16 @@ body {
   min-height: 100vh;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply text-2xl;
+  @apply font-["Noto"];
+}
+
 nav li {
   @apply bg-[#F5F5F5];
   @apply rounded-md;

diff --git a/vinoa-web/app/layout.tsx b/vinoa-web/app/layout.tsx
@@ -3,6 +3,8 @@ import './globals.css';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import SessionProviders from '@/components/SessionProviders/SessionProviders';
+import Logo from '@/lib/assets/Logo';
+import Link from 'next/link';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -19,8 +21,13 @@ export default function RootLayout({
     <html lang='en'>
       <body className={`${inter.className}`}>
         <SessionProviders>
+          <div className='md:hidden grid justify-center'>
+            <Link href={'/'}>
+              <Logo color='#800020' />
+            </Link>
+          </div>
           <Navigation></Navigation>
-          {children}
+          <div className='mb-36 md:mb-5'>{children}</div>
         </SessionProviders>
       </body>
     </html>

diff --git a/vinoa-web/app/page.tsx b/vinoa-web/app/page.tsx
@@ -1,5 +1,3 @@
-import WineCarousel from '@/components/WineCarousel';
-import WineButton from '@/components/WineButton';
 import { getThisMonthsWines, getWines } from '@/sanity/sanity-utils/wine-utils';
 import WineTastingCard from '@/components/WineTastingCard';
 import { getCurrentMonthAsRange } from '@/lib/utils/helperFunctions';

diff --git a/vinoa-web/app/wines/[slug]/page.tsx b/vinoa-web/app/wines/[slug]/page.tsx
@@ -1,5 +1,6 @@
 import CommentSection from '@/components/CommentSection';
 import Rating from '@/components/Rating';
+import WineInformationSection from '@/components/WineInformationSection/WineInformationSection';
 import { getAverageRating } from '@/lib/utils/helperFunctions';
 import { getReviewsForWine } from '@/sanity/sanity-utils/review-utils';
 import { getWine } from '@/sanity/sanity-utils/wine-utils';
@@ -11,34 +12,13 @@ interface Props {
 
 const WinePage = async ({ params }: Props) => {
   const slug = params.slug;
-  const wine: Wine = await getWine(slug);
-  const reviews = await getReviewsForWine(slug);
-  const averageRating = getAverageRating(reviews);
+  const wine = await getWine(slug);
 
   return (
-    <div className=' mt-10'>
-      <div className='grid grid-flow-col grid-cols-6 justify-items-end gap-4 '>
-        <div className='col-start-2  '>
-          <Image
-            width={160}
-            height={180}
-            alt='Image of a wine bottle'
-            src={wine.imageUrl}
-          />
-          <Rating
-            label={`Rated ${reviews.length} times`}
-            rating={averageRating}
-          />
-        </div>
+    <div className='px-4 md:px-14'>
+      <WineInformationSection wine={wine} />
 
-        <div className='col-start-3 col-span-3 '>
-          <h1 className='text-2xl font-medium'>{wine.name}</h1>
-          <p>{wine.description}</p>
-        </div>
-      </div>
-      <div className='bg-violet-dark mx-14 mt-8'>
-        <CommentSection wine={wine} />
-      </div>
+      <CommentSection wine={wine} />
     </div>
   );
 };

diff --git a/vinoa-web/components/Avatar/Avatar.tsx b/vinoa-web/components/Avatar/Avatar.tsx
@@ -0,0 +1,20 @@
+import ProfileLogo from '@/lib/assets/ProfileLogo';
+
+interface Props {
+  name: string;
+}
+
+const Avatar = ({ name }: Props) => {
+  return (
+    <div className='flex flex-col items-center pr-4 md:pr-8'>
+      <div className=' rounded-full'>
+        <ProfileLogo />
+      </div>
+      <div className='text-xs'>
+        <p>{name}</p>
+      </div>
+    </div>
+  );
+};
+
+export default Avatar;
diff --git a/vinoa-web/components/Avatar/index.ts b/vinoa-web/components/Avatar/index.ts
@@ -0,0 +1,2 @@
+import Avatar from './Avatar';
+export default Avatar;
diff --git a/vinoa-web/components/CommentSection/CommentSection.tsx b/vinoa-web/components/CommentSection/CommentSection.tsx
@@ -8,7 +8,7 @@ interface Props {
 const CommentSection = ({ wine }: Props) => {
   const { slug = '', _id } = wine;
   return (
-    <div className='p-6'>
+    <div className='mt-10'>
       <ReviewToPost wineId={_id} />
       <PreviousReviews slug={slug} />
     </div>

diff --git a/vinoa-web/components/LoginButton/LoginButton.tsx b/vinoa-web/components/LoginButton/LoginButton.tsx
@@ -2,10 +2,12 @@
 import { signIn, signOut, useSession } from 'next-auth/react';
 import { useUserStore } from '@/store/store';
 import { useEffect } from 'react';
+import { usePathname } from 'next/navigation';
 
 export default function LoginButton() {
   const { data: session } = useSession();
   const setUser = useUserStore((state) => state.setUser);
+  const path = usePathname();
 
   useEffect(() => {
     if (session) {
@@ -17,6 +19,9 @@ export default function LoginButton() {
   if (!session) {
     return (
       <button
+        className={`${path == '/profile' && 'ring-2 ring-black rounded-md'} ${
+          path != '/profile' && 'hover:underline-offset-4 hover:underline'
+        } bg-grey-highlight rounded-md `}
         onClick={() => {
           signIn();
         }}
@@ -28,6 +33,7 @@ export default function LoginButton() {
 
   return (
     <button
+      className={`rounded-md bg-grey-highlight py-2 hover:underline-offset-4 hover:underline`}
       onClick={() => {
         signOut();
         setUser({ name: '', id: '', session: false });

diff --git a/vinoa-web/components/Navigation/Navigation.tsx b/vinoa-web/components/Navigation/Navigation.tsx
@@ -1,16 +1,27 @@
 'use client';
 import Logo from '@/lib/assets/Logo';
+import { useSession } from 'next-auth/react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import { useEffect } from 'react';
+import { useUserStore } from '@/store/store';
+import LoginButton from '../LoginButton';
 
 const Navigation = () => {
   const path = usePathname();
-  return (
+  const { data: session } = useSession();
+  const setUser = useUserStore((state) => state.setUser);
 
-    <nav className='max-w-screen w-full fixed bottom-0 md:static md:top-0 p-4 bg-white'>
+  useEffect(() => {
+    if (session) {
+      const { name, id } = session.user as SessionUser;
+      setUser({ name: name, id: id, session: true });
+    }
+  }, [session]);
+  return (
+    <nav className='max-w-screen w-full z-10 fixed bottom-0 md:static md:top-0 p-4 bg-white'>
       <div className='grid md:grid-cols-2  text-l'>
         <div className='md:block items-center hidden'>
-
           <Link href={'/'}>
             <Logo color='#800020' />
           </Link>
@@ -30,15 +41,19 @@ const Navigation = () => {
           >
             <Link href='/wines'>Wines</Link>
           </li>
-          <li
-            className={`${
-              path == '/profile' && 'ring-2 ring-black rounded-md'
-            } ${
-              path != '/profile' && 'hover:underline-offset-4 hover:underline'
-            } `}
-          >
-            <Link href='/profile'>Profile</Link>
-          </li>
+          {!session ? (
+            <LoginButton />
+          ) : (
+            <li
+              className={`${
+                path == '/profile' && 'ring-2 ring-black rounded-md'
+              } ${
+                path != '/profile' && 'hover:underline-offset-4 hover:underline'
+              } `}
+            >
+              <Link href='/profile'>Profile</Link>
+            </li>
+          )}
         </ul>
       </div>
     </nav>

diff --git a/vinoa-web/components/PreviousRatings/PreviousReviews.tsx b/vinoa-web/components/PreviousRatings/PreviousReviews.tsx
@@ -3,13 +3,17 @@ import { getReviewsForWine } from '@/sanity/sanity-utils/review-utils';
 import Image from 'next/image';
 import Rating from '../Rating';
 import { useEffect, useState } from 'react';
+import Avatar from '../Avatar';
+import { useUserStore } from '@/store/store';
 
 interface Props {
   slug: string;
 }
 
 const PreviousReviews = ({ slug }: Props) => {
   const [reviews, setReviews] = useState<Review[]>([]);
+  const globalUser = useUserStore((state) => state.user);
+
   useEffect(() => {
     const getReviews = async () => {
       const reviews = await getReviewsForWine(slug);
@@ -18,32 +22,21 @@ const PreviousReviews = ({ slug }: Props) => {
     getReviews();
   }, []);
   return (
-    <>
+    <div className=' divide-y-2 mt-10'>
       {reviews.map((review, idx) => {
         return (
-          <div className='chat chat-start' key={idx}>
-            <div className='chat-image avatar'>
-              <div className='w-10 rounded-full'>
-                <Image
-                  height={40}
-                  width={40}
-                  alt='Progile picture'
-                  src='https://images.unsplash.com/photo-1610631787813-9eeb1a2386cc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80'
-                />
+          <div className='pb-4 pt-2' key={idx}>
+            <div className='flex flex-row'>
+              <Avatar name={review.userName} />
+              <div className='flex flex-col justify-between'>
+                <p className='text-violet-darker'>{review.comment}</p>
+                <Rating rating={review.rating} />
               </div>
             </div>
-            <div className='chat-header'>Anakin</div>
-
-            <div className='chat-bubble bg-grey-highlight'>
-              <p className='text-violet-darker'>{review.comment}</p>
-            </div>
-            <div className='chat-footer'>
-              <Rating rating={review.rating} />
-            </div>
           </div>
         );
       })}
-    </>
+    </div>
   );
 };
 

diff --git a/vinoa-web/components/Rating/Rating.tsx b/vinoa-web/components/Rating/Rating.tsx
@@ -10,27 +10,29 @@ interface RatingProps {
 }
 const Rating = ({ label, rating, maxRating = 5, setRating }: RatingProps) => {
   return (
-    <div className='mt-4 rating'>
+    <div className='mt-4 flex flex-col z-0'>
       {label && <p>{label}</p>}
-      {Array.from({ length: maxRating }, (_, i) => {
-        const isFilled = i < rating;
-        const StarIcon = isFilled ? AiFillStar : AiOutlineStar;
-        const handleOnClick = () => {
-          if (setRating) {
-            setRating(i + 1);
-          }
-        };
-        return (
-          <StarIcon
-            onClick={handleOnClick}
-            key={i}
-            className={
-              'text-gold-highlight text-xl' +
-              (setRating ? ' cursor-pointer' : '')
+      <div className='flex flex-row'>
+        {Array.from({ length: maxRating }, (_, i) => {
+          const isFilled = i < rating;
+          const StarIcon = isFilled ? AiFillStar : AiOutlineStar;
+          const handleOnClick = () => {
+            if (setRating) {
+              setRating(i + 1);
             }
-          />
-        );
-      })}
+          };
+          return (
+            <StarIcon
+              onClick={handleOnClick}
+              key={i}
+              className={
+                'text-wine-red z-0 text-xl' +
+                (setRating ? ' cursor-pointer' : '')
+              }
+            />
+          );
+        })}
+      </div>
     </div>
   );
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import Avatar from './Avatar';
		export default Avatar;