Add a cool filter thing

bradystroud · Apr 19, 2024 · 65441cd · 65441cd
1 parent 7a4839d
commit 65441cd
Show file tree

Hide file tree

Showing 10 changed files with 270 additions and 299 deletions.
diff --git a/components/blocks-renderer.tsx b/components/blocks-renderer.tsx
@@ -3,54 +3,44 @@ import type { Page } from "../tina/__generated__/types";
 import { Content } from "./blocks/content";
 import { Features } from "./blocks/features";
 import { Hero } from "./blocks/hero";
-import { Testimonial } from "./blocks/testimonial";
 
 export const Blocks = (props: Omit<Page, "id" | "_sys" | "_values">) => {
   return (
     <>
       {props.blocks
         ? props.blocks.map(function (block, i) {
-          switch (block.__typename) {
-            case "PageBlocksContent":
-              return (
-                <div
-                  data-tinafield={`blocks.${i}`}
-                  key={i + block.__typename}
-                >
-                  <Content data={block} parentField={`blocks.${i}`} />
-                </div>
-              );
-            case "PageBlocksHero":
-              return (
-                <div
-                  data-tinafield={`blocks.${i}`}
-                  key={i + block.__typename}
-                >
-                  <Hero data={block} parentField={`blocks.${i}`} />
-                </div>
-              );
-            case "PageBlocksFeatures":
-              return (
-                <div
-                  data-tinafield={`blocks.${i}`}
-                  key={i + block.__typename}
-                >
-                  <Features data={block} parentField={`blocks.${i}`} />
-                </div>
-              );
-            case "PageBlocksTestimonial":
-              return (
-                <div
-                  data-tinafield={`blocks.${i}`}
-                  key={i + block.__typename}
-                >
-                  <Testimonial data={block} parentField={`blocks.${i}`} />
-                </div>
-              );
-            default:
-              return null;
-          }
-        })
+            switch (block.__typename) {
+              case "PageBlocksContent":
+                return (
+                  <div
+                    data-tinafield={`blocks.${i}`}
+                    key={i + block.__typename}
+                  >
+                    <Content data={block} parentField={`blocks.${i}`} />
+                  </div>
+                );
+              case "PageBlocksHero":
+                return (
+                  <div
+                    data-tinafield={`blocks.${i}`}
+                    key={i + block.__typename}
+                  >
+                    <Hero data={block} parentField={`blocks.${i}`} />
+                  </div>
+                );
+              case "PageBlocksFeatures":
+                return (
+                  <div
+                    data-tinafield={`blocks.${i}`}
+                    key={i + block.__typename}
+                  >
+                    <Features data={block} parentField={`blocks.${i}`} />
+                  </div>
+                );
+              default:
+                return null;
+            }
+          })
         : null}
     </>
   );

diff --git a/components/blocks/testimonial.tsx b/components/blocks/testimonial.tsx
diff --git a/components/posts/reviews.tsx b/components/posts/reviews.tsx
@@ -1,11 +1,31 @@
 import React from "react";
 import Link from "next/link";
 import { BsArrowRight } from "react-icons/bs";
+import { SortType } from "../types";
+
+export const Reviews = ({
+  data,
+  sortOption,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data: any[];
+  sortOption: SortType;
+}) => {
+  const reviewList = data.sort((a, b) => {
+    if (sortOption === "Top") {
+      return b.node.score - a.node.score;
+    } else if (sortOption === "Low") {
+      return a.node.score - b.node.score;
+    } else if (sortOption === "Recent") {
+      return new Date(b.node.date).getTime() - new Date(a.node.date).getTime();
+    } else {
+      return 0;
+    }
+  });
 
-export const Reviews = ({ data }) => {
   return (
     <>
-      {data.map((reviewData) => {
+      {reviewList.map((reviewData) => {
         const post = reviewData.node;
         const date = new Date(post.date);
         let formattedDate = "";
@@ -28,15 +48,15 @@ export const Reviews = ({ data }) => {
               key={post.id}
               className="group block px-6 sm:px-8 md:px-10 py-10 mb-8 last:mb-0 bg-gray-50 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-1000 rounded-md shadow-sm transition-all duration-150 ease-out hover:shadow-md hover:to-gray-50 dark:hover:to-gray-800 hover:cursor-pointer"
             >
-              <h3
-                className={`text-gray-700 dark:text-white text-3xl lg:text-4xl title-font mb-5 transition-all duration-150 ease-out group-hover:text-blue-600 dark:group-hover:text-blue-300`}
+              <h2
+                className={`text-gray-700 dark:text-white text-3xl title-font mb-5 transition-all duration-150 ease-out group-hover:text-blue-600 dark:group-hover:text-blue-300`}
               >
                 <span className="font-semibold">{post.score}</span> -{" "}
                 {post.restaurant.name}{" "}
                 <span className="inline-block opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out">
                   <BsArrowRight className="inline-block h-8 -mt-1 ml-1 w-auto opacity-70" />
                 </span>
-              </h3>
+              </h2>
               <div className="flex items-center">
                 <div className="flex-shrink-0 mr-2">
                   <img

diff --git a/components/types.ts b/components/types.ts
@@ -0,0 +1,8 @@
+export const sortOptions = {
+    Top: "Top",
+    Low: "Low",
+    Recent: "Recent",
+    // "": "",
+} as const;
+
+export type SortType = keyof typeof sortOptions;
diff --git a/package.json b/package.json
@@ -14,29 +14,29 @@
     "@tinacms/cli": "^1.5.29",
     "@types/js-cookie": "^3.0.3",
     "@types/node": "^20.4.10",
-    "@types/react": "^18.2.78",
+    "@types/react": "^18.2.79",
     "@types/styled-components": "^5.1.15",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.57.0",
+    "next-sitemap": "^4.2.3",
     "postcss": "^8.4.24",
     "postcss-import": "^16.1.0",
-    "next-sitemap": "^4.2.3",
     "postcss-nesting": "^12.0.1"
   },
   "dependencies": {
-    "@headlessui/react": "1.7.18",
+    "@headlessui/react": "1.7.19",
     "@tailwindcss/typography": "^0.5.8",
-    "next": "^14.2.1",
+    "next": "^14.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^5.0.1",
+    "react-icons": "^5.1.0",
     "tailwindcss": "^3.2.4",
     "tinacms": "^1.5.28",
     "typescript": "^5.1.6"
   },
   "resolutions": {
     "final-form": "4.20.1"
   }
-}
+}
diff --git a/pages/reviews/[filename].tsx b/pages/reviews/[filename].tsx
@@ -79,7 +79,10 @@ export default function ReviewPage(
             </h1>
             <div className="relative w-300 h-400 m-auto">
               {data?.review?.parmiImg ? (
-                <img src={data.review?.parmiImg} />
+                <img
+                  src={data.review?.parmiImg}
+                  alt={`Chicken parmi from ${data.review.restaurant.name}`}
+                />
               ) : (
                 "No image 🫢"
               )}

diff --git a/pages/reviews/index.tsx b/pages/reviews/index.tsx
@@ -5,16 +5,28 @@ import { Layout } from "../../components/layout";
 import { Reviews } from "../../components/posts/reviews";
 import { InferGetStaticPropsType } from "next";
 import Head from "next/head";
+import { useState } from "react";
+import { SortType, sortOptions } from "../../components/types";
 
 export default function ReviewPage(
   props: InferGetStaticPropsType<typeof getStaticProps>
 ) {
   const reviews = props.data.reviewConnection.edges;
+  const pageTitle = "ParmiPicks | Reviews";
+
+  const [selectedSort, setSelectedSort] = useState<SortType | "Low">("Low");
+
+  const handleChange = (event) => {
+    setSelectedSort(event.target.value);
+  };
+
+  const sortOptionsArray: SortType[] = Object.keys(sortOptions) as SortType[];
 
   return (
     <Layout>
       <Head>
-        <title>ParmiPicks | Reviews</title>
+        <title>{pageTitle}</title>
+        <meta property="og:title" content={pageTitle} />
         <link
           rel="canonical"
           href="https://parmipicks.com/reviews"
@@ -23,7 +35,23 @@ export default function ReviewPage(
       </Head>
       <Section className="flex-1">
         <Container size="large" width="small">
-          <Reviews data={reviews} />
+          <div className="flex justify-between items-center">
+            <h1 className="text-4xl title-font mb-4">Parmi Reviews</h1>
+            <select
+              className="max-h-10 text-md"
+              name="sort"
+              id="sort"
+              onChange={handleChange}
+              value={selectedSort}
+            >
+              {sortOptionsArray.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </div>
+          <Reviews data={reviews.sort()} sortOption={selectedSort} />
         </Container>
       </Section>
     </Layout>

diff --git a/tina/config.tsx b/tina/config.tsx
@@ -3,7 +3,6 @@ import { defineConfig } from "tinacms";
 import { contentBlockSchema } from "../components/blocks/content";
 import { featureBlockSchema } from "../components/blocks/features";
 import { heroBlockSchema } from "../components/blocks/hero";
-import { testimonialBlockSchema } from "../components/blocks/testimonial";
 
 const config = defineConfig({
   clientId: process.env.NEXT_PUBLIC_TINA_CLIENT_ID!,
@@ -13,12 +12,6 @@ const config = defineConfig({
     process.env.HEAD!, // Netlify branch env
   token: process.env.TINA_TOKEN!,
   media: {
-    // If you wanted cloudinary do this
-    // loadCustomStore: async () => {
-    //   const pack = await import("next-tinacms-cloudinary");
-    //   return pack.TinaCloudCloudinaryMediaStore;
-    // },
-    // this is the config for the tina cloud media store
     tina: {
       publicFolder: "public",
       mediaRoot: "uploads",
@@ -105,15 +98,6 @@ const config = defineConfig({
                 label: "Name",
                 name: "name",
               },
-              {
-                type: "string",
-                label: "Color",
-                name: "color",
-                options: [
-                  { label: "Default", value: "default" },
-                  { label: "Primary", value: "primary" },
-                ],
-              },
               {
                 type: "object",
                 label: "Nav Links",
@@ -293,7 +277,6 @@ const config = defineConfig({
               // @ts-ignore
               featureBlockSchema,
               contentBlockSchema,
-              testimonialBlockSchema,
             ],
           },
         ],