Restructure codebase to use src directory

2026-02-16 20:13:49 +00:00 · 2023-04-11 23:32:06 -04:00
parent 90f2cc2c0c
commit 08422fe24e
141 changed files with 6 additions and 4 deletions
--- a/src/pages/beers/[id]/edit.tsx
+++ b/src/pages/beers/[id]/edit.tsx
@@ -0,0 +1,66 @@
+import { NextPage } from 'next';
+import Head from 'next/head';
+import React from 'react';
+
+import Layout from '@/components/ui/Layout';
+import withPageAuthRequired from '@/getServerSideProps/withPageAuthRequired';
+import getBeerPostById from '@/services/BeerPost/getBeerPostById';
+import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
+import EditBeerPostForm from '@/components/EditBeerPostForm';
+import FormPageLayout from '@/components/ui/forms/FormPageLayout';
+import { BiBeer } from 'react-icons/bi';
+import { z } from 'zod';
+
+interface EditPageProps {
+  beerPost: z.infer<typeof beerPostQueryResult>;
+}
+
+const EditPage: NextPage<EditPageProps> = ({ beerPost }) => {
+  const pageTitle = `Edit "${beerPost.name}"`;
+
+  return (
+    <Layout>
+      <Head>
+        <title>{pageTitle}</title>
+        <meta name="description" content={pageTitle} />
+      </Head>
+
+      <FormPageLayout
+        headingText={pageTitle}
+        headingIcon={BiBeer}
+        backLink={`/beers/${beerPost.id}`}
+        backLinkText={`Back to "${beerPost.name}"`}
+      >
+        <EditBeerPostForm
+          previousValues={{
+            name: beerPost.name,
+            abv: beerPost.abv,
+            ibu: beerPost.ibu,
+            description: beerPost.description,
+            id: beerPost.id,
+          }}
+        />
+      </FormPageLayout>
+    </Layout>
+  );
+};
+
+export default EditPage;
+
+export const getServerSideProps = withPageAuthRequired<EditPageProps>(
+  async (context, session) => {
+    const beerPostId = context.params?.id as string;
+    const beerPost = await getBeerPostById(beerPostId);
+    const { id: userId } = session;
+
+    if (!beerPost) {
+      return { notFound: true };
+    }
+
+    const isBeerPostOwner = beerPost.postedBy.id === userId;
+
+    return isBeerPostOwner
+      ? { props: { beerPost: JSON.parse(JSON.stringify(beerPost)) } }
+      : { redirect: { destination: `/beers/${beerPostId}`, permanent: false } };
+  },
+);
--- a/src/pages/beers/[id]/index.tsx
+++ b/src/pages/beers/[id]/index.tsx
@@ -0,0 +1,122 @@
+import { NextPage, GetServerSideProps } from 'next';
+import Head from 'next/head';
+import Image from 'next/image';
+
+import BeerInfoHeader from '@/components/BeerById/BeerInfoHeader';
+import BeerPostCommentsSection from '@/components/BeerById/BeerPostCommentsSection';
+import BeerRecommendations from '@/components/BeerById/BeerRecommendations';
+import Layout from '@/components/ui/Layout';
+
+import getBeerPostById from '@/services/BeerPost/getBeerPostById';
+import getBeerRecommendations from '@/services/BeerPost/getBeerRecommendations';
+
+import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
+import { BeerPost } from '@prisma/client';
+
+import { z } from 'zod';
+
+import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a loader
+import { Carousel } from 'react-responsive-carousel';
+import useMediaQuery from '@/hooks/useMediaQuery';
+import { Tab } from '@headlessui/react';
+
+interface BeerPageProps {
+  beerPost: z.infer<typeof beerPostQueryResult>;
+  beerRecommendations: (BeerPost & {
+    brewery: { id: string; name: string };
+    beerImages: { id: string; alt: string; url: string }[];
+  })[];
+}
+
+const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }) => {
+  const isMd = useMediaQuery('(min-width: 768px)');
+
+  return (
+    <>
+      <Head>
+        <title>{beerPost.name}</title>
+        <meta name="description" content={beerPost.description} />
+      </Head>
+      <Layout>
+        <div>
+          <Carousel
+            className="w-full"
+            useKeyboardArrows
+            autoPlay
+            interval={10000}
+            infiniteLoop
+            showThumbs={false}
+          >
+            {beerPost.beerImages.map((image, index) => (
+              <div key={image.id} id={`image-${index}}`} className="w-full">
+                <Image
+                  alt={image.alt}
+                  src={image.path}
+                  height={1080}
+                  width={1920}
+                  className="h-[42rem] w-full object-cover"
+                />
+              </div>
+            ))}
+          </Carousel>
+
+          <div className="mb-12 mt-10 flex w-full items-center justify-center ">
+            <div className="w-11/12 space-y-3 xl:w-9/12">
+              <BeerInfoHeader beerPost={beerPost} />
+
+              {isMd ? (
+                <div className="mt-4 flex flex-row space-x-3 space-y-0">
+                  <div className="w-[60%]">
+                    <BeerPostCommentsSection beerPost={beerPost} />
+                  </div>
+                  <div className="w-[40%]">
+                    <BeerRecommendations beerRecommendations={beerRecommendations} />
+                  </div>
+                </div>
+              ) : (
+                <Tab.Group>
+                  <Tab.List className="card flex flex-row bg-base-300">
+                    <Tab className="ui-selected:bg-gray w-1/2 p-3 uppercase">
+                      Comments
+                    </Tab>
+                    <Tab className="ui-selected:bg-gray w-1/2 p-3 uppercase">
+                      Recommendations
+                    </Tab>
+                  </Tab.List>
+                  <Tab.Panels className="mt-2">
+                    <Tab.Panel>
+                      <BeerPostCommentsSection beerPost={beerPost} />
+                    </Tab.Panel>
+                    <Tab.Panel>
+                      <BeerRecommendations beerRecommendations={beerRecommendations} />
+                    </Tab.Panel>
+                  </Tab.Panels>
+                </Tab.Group>
+              )}
+            </div>
+          </div>
+        </div>
+      </Layout>
+    </>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps<BeerPageProps> = async (context) => {
+  const beerPost = await getBeerPostById(context.params!.id! as string);
+
+  if (!beerPost) {
+    return { notFound: true };
+  }
+
+  const { type, brewery, id } = beerPost;
+  const beerRecommendations = await getBeerRecommendations({ type, brewery, id });
+
+  const props = {
+    beerPost: JSON.parse(JSON.stringify(beerPost)),
+    beerRecommendations: JSON.parse(JSON.stringify(beerRecommendations)),
+  };
+
+  return { props };
+};
+
+export default BeerByIdPage;