Faith first

README.md

@@ -40,4 +40,4 @@ Check out our [Next.js deployment documentation](https://nextjs.org/docs/deploym
 - jeong-jaeho
 - sun-ruiheng
 - benluiwj
-
+- boredcoco

components/workshop/DatesFilter.tsx

@@ -0,0 +1,57 @@
+import clsx from "clsx";
+import {
+  Dispatch,
+  SetStateAction,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { DatesContext } from "./Workshop";
+
+export type DateFilterProps = {
+  setFiltered: React.Dispatch<React.SetStateAction<string>>;
+};
+
+export interface DateFilterInterface extends JSX.Element {}
+
+export default function DateFilter({
+  setFiltered,
+}: DateFilterProps): DateFilterInterface {
+  const workshopDates = useContext(DatesContext);
+  const [filteredDate, setFilteredDate] = useState<string>('');
+  useEffect(() => {
+    setFiltered(filteredDate);
+  }, [filteredDate, setFiltered]);
+
+  const ToggleDate = (date: string): void => {
+    setFilteredDate(date);
+  };
+
+  return (
+    <div className="flex h-fit w-full flex-col flex-wrap items-center px-5 md:flex-row">
+      {workshopDates.map((date) => (
+        <button
+          key={date}
+          onClick={() => ToggleDate(date)}
+          className={clsx(
+            "text-md m-2 rounded-full px-5 py-1 font-bold",
+            filteredDate === date
+              ? "bg-gray-600 text-white"
+              : "bg-blue-100"
+          )}
+        >
+          {date}
+        </button>
+      ))}
+      <div className="flex-grow"></div>
+      <button
+        onClick={() => {
+          setFilteredDate('');
+        }}
+        className="m-2 rounded-full bg-red-600 px-5 py-1 text-white"
+      >
+        Clear
+      </button>
+    </div>
+  );
+}

components/workshop/Workshop.tsx

@@ -2,6 +2,7 @@ import clsx from "clsx";
 import { useMemo, useState } from "react";
 import { WorkshopCardInterface } from "./WorkshopCard";
 import TagFilter, { TagFilterInterface } from "./TagFilter";
+import DateFilter, { DateFilterInterface } from "./DatesFilter";
 import React from "react";
 
 export type WorkshopProps = {
@@ -13,6 +14,7 @@ export type WorkshopProps = {
 };
 
 export const TagsContext = React.createContext<string[]>([]);
+export const DatesContext = React.createContext<string[]>([]);
 
 export default function Workshop({
   title,
@@ -22,6 +24,7 @@ export default function Workshop({
   tags,
 }: WorkshopProps): JSX.Element {
   const [filtered, setFiltered] = useState<string[]>([]);
+  const [filteredDate, setFilteredDate] = useState<string>('');
 
   const workshopTags = useMemo(() => {
     if (!children) {
@@ -63,16 +66,34 @@ export default function Workshop({
       return;
     }
     if (filtered.length === 0) {
-      return children;
+      const filteredCards: any[] | undefined = [];
+      if (!children.length) {
+        const child: WorkshopCardInterface =
+          children as unknown as WorkshopCardInterface;
+        if (child.props.date.includes(filteredDate)) { //filter by date
+          return child;
+        };
+        return;
+      } else {
+        children.forEach((card) => {
+          if (card.props.date) {
+            if (card.props.date.includes(filteredDate)) { //filter by date
+              filteredCards.push(card);
+            }
+          }
+        });
+      }
     }
+
     const filteredCards: any[] | undefined = [];
     if (!children.length) {
       const child: WorkshopCardInterface =
         children as unknown as WorkshopCardInterface;
       const cardTags: string[] = child.props.tags
         .split(",")
         .map((text: string) => text.trim());
-      if (filtered.every((tag: string) => cardTags.includes(tag))) {
+      if (filtered.every((tag: string) => cardTags.includes(tag))
+        && child.props.date.includes(filteredDate)) { //filter by date
         return child;
       }
       return;
@@ -82,14 +103,16 @@ export default function Workshop({
           const cardTags: string[] = card.props.tags
             .split(",")
             .map((text: string) => text.trim());
-          if (filtered.every((tag: string) => cardTags.includes(tag))) {
+          if (filtered.every((tag: string) => cardTags.includes(tag))
+            && card.props.date.includes(filteredDate)) { //filter by date
             filteredCards.push(card);
           }
         }
       });
     }
+
     return filteredCards;
-  }, [children, filtered]);
+  }, [children, filtered, filteredDate]);
 
   return (
     <div
@@ -103,9 +126,12 @@ export default function Workshop({
       </h1>
       <TagsContext.Provider value={workshopTags}>
         {showTags && <TagFilter setFiltered={setFiltered} />}
-        <div className="grid w-full grid-cols-1 justify-items-center gap-4 md:grid-cols-2 xl:grid-cols-3">
-          {children && filteredChildren}
-        </div>
+        <DatesContext.Provider value={["2023", "2022", "2021"]}>
+          {<DateFilter setFiltered={setFilteredDate} />}
+          <div className="grid w-full grid-cols-1 justify-items-center gap-4 md:grid-cols-2 xl:grid-cols-3">
+            {children && filteredChildren}
+          </div>
+        </DatesContext.Provider>
       </TagsContext.Provider>
     </div>
   );

package.json

@@ -16,7 +16,7 @@
     "@headlessui/react": "^1.6.6",
     "@heroicons/react": "^1.0.6",
     "@plasmicapp/host": "^1.0.72",
-    "@plasmicapp/loader-nextjs": "^1.0.164",
+    "@plasmicapp/loader-nextjs": "^1.0.247",
     "@plasmicpkgs/react-youtube": "^7.13.75",
     "clsx": "^1.2.1",
     "next": "12.2.3",

yarn.lock

@@ -169,78 +169,107 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@plasmicapp/[email protected]", "@plasmicapp/host@^1.0.72":
+"@plasmicapp/[email protected]":
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@plasmicapp/data-sources-context/-/data-sources-context-0.1.7.tgz#6d592ac8098bfdf3ae09c27817683d5e5af619e3"
+  integrity sha512-CiLLoKEuMD86KXWSqip5n9f/WeC81YRZcGtoD7+Miv8HBwYVsSkTelgbs8fH/osbzkFJ6vi1HcPm/TEDcsQarQ==
+
+"@plasmicapp/[email protected]":
+  version "1.0.117"
+  resolved "https://registry.yarnpkg.com/@plasmicapp/host/-/host-1.0.117.tgz#1481527835e4044f1350916160360a81e69bbcc5"
+  integrity sha512-yWLH0VfaZW3ChUuA8wrSNpPEUc11b5ZVveNx0EYfi8Y+GcgQr/cUHGicLR5O3txYs2OPWMZKYDA8ZLA+llv94g==
+  dependencies:
+    "@plasmicapp/query" "0.1.61"
+    window-or-global "^1.0.1"
+
+"@plasmicapp/host@^1.0.72":
   version "1.0.72"
   resolved "https://registry.yarnpkg.com/@plasmicapp/host/-/host-1.0.72.tgz#10c91b590a4543d28c77e92822e85d2c6b6f057c"
   integrity sha512-KnQK+fNJ7HMVLZ3FN6UqjAnGg3Fi4yDU9DfHtR456O95OpZQiAW9BKAN3jHfAsQAO5n2/ebhdG/LxNKqkPMffw==
   dependencies:
     window-or-global "^1.0.1"
 
-"@plasmicapp/[email protected]":
-  version "1.0.78"
-  resolved "https://registry.yarnpkg.com/@plasmicapp/loader-core/-/loader-core-1.0.78.tgz#5ea86c9effb25a4ed110a5e568fbbbd4a6ed552c"
-  integrity sha512-bXuFGvRJinyz2M7yhLwLag9/yDbB+CzKFsAvsKb34bw9SMzq+D5W5/ox6b7PV/RGXxttyxW8dlafqY6eJDI7nA==
-  dependencies:
-    "@plasmicapp/loader-fetcher" "1.0.8"
-
-"@plasmicapp/[email protected]":
-  version "1.0.14"
-  resolved "https://registry.yarnpkg.com/@plasmicapp/loader-edge/-/loader-edge-1.0.14.tgz#2a51140c67b561a632f81b5d71cc55de96ba1b58"
-  integrity sha512-jkzmuLBcEixNObNPwGQCfHkqXHQRJ+0OPRFxAMqRtUsurE0pUBpWKJJlODdQPYQOh3R4ta60z2ICLcGzw4otoQ==
+"@plasmicapp/isomorphic-unfetch@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@plasmicapp/isomorphic-unfetch/-/isomorphic-unfetch-1.0.1.tgz#e2dfdc8d23d9d1c82f5596986fe8c09013ec8eec"
+  integrity sha512-V1PBEQjypQ47zO0ggI7B46o0WL2I4y5nmv4rdCGVA9oVCAHHPt7kcOxDak9cj/ryQocLEU8YC6Uwqz+hYL5YAw==
   dependencies:
-    "@plasmicapp/loader-fetcher" "1.0.8"
-    "@plasmicapp/loader-splits" "1.0.13"
+    node-fetch "^2.6.1"
+    unfetch "^4.2.0"
 
-"@plasmicapp/[email protected]":
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/@plasmicapp/loader-fetcher/-/loader-fetcher-1.0.8.tgz#9b7042497f9d946ba490cd6d56a2b1817a6e1cfd"
-  integrity sha512-Cm6vcxashrMKRqzWO1ssVGO/EM2RE0b056Q6/9M43eTSC52YOUlmgNv9zUVH/NbkAPmANwx57aFwLsi0bM93FQ==
-  dependencies:
-    isomorphic-unfetch "^3.1.0"
-
-"@plasmicapp/loader-nextjs@^1.0.164":
-  version "1.0.164"
-  resolved "https://registry.yarnpkg.com/@plasmicapp/loader-nextjs/-/loader-nextjs-1.0.164.tgz#5bddbe17e029582acd580cfac65736eba3f3b04e"
-  integrity sha512-0LYMGh7FL0YYNlq0RywN8irxiYiJD2hpcvphmGhwG570SyOKsbgzboDebI/ptmmhecDw2E6pZbJBk3nh/1E5zQ==
-  dependencies:
-    "@plasmicapp/loader-core" "1.0.78"
-    "@plasmicapp/loader-edge" "1.0.14"
-    "@plasmicapp/loader-react" "1.0.159"
-    "@plasmicapp/watcher" "1.0.67"
-
-"@plasmicapp/[email protected]":
-  version "1.0.159"
-  resolved "https://registry.yarnpkg.com/@plasmicapp/loader-react/-/loader-react-1.0.159.tgz#e4d3d20bb8bbc6b3c54d76029ab67a85be301850"
-  integrity sha512-1PxLJGXtS4IEzKuP5swzyLH8FEYWG8HaaD2DP7Kuc0sd6W1mbwrI27T6UhxxSBjWb4h6oRmN2F06sa3MninaGQ==
-  dependencies:
-    "@plasmicapp/host" "1.0.72"
-    "@plasmicapp/loader-core" "1.0.78"
-    "@plasmicapp/loader-splits" "1.0.13"
-    "@plasmicapp/query" "0.1.53"
+"@plasmicapp/[email protected]":
+  version "1.0.97"
+  resolved "https://registry.yarnpkg.com/@plasmicapp/loader-core/-/loader-core-1.0.97.tgz#371926375a284ed6ff7ffb6af4b933ab376834db"
+  integrity sha512-Be4EZDDvpqk25KYNrgU1LbCQoM5e2gH3STo7BeqIIKV3kQ8MoGpzS9bGL/F278gdBAOl6FR78pTgaXY8Ko819g==
+  dependencies:
+    "@plasmicapp/isomorphic-unfetch" "^1.0.1"
+    "@plasmicapp/loader-fetcher" "1.0.21"
+
+"@plasmicapp/[email protected]":
+  version "1.0.27"
+  resolved "https://registry.yarnpkg.com/@plasmicapp/loader-edge/-/loader-edge-1.0.27.tgz#0412d88e23c6b14940d4506e80896449784cbf0e"
+  integrity sha512-LDZc9pZX7o9m04fcgUZijLwuw7yFVrQbALVsqeCsYs8qha13B/AEUvxbDT4/yJ8XzA/QJU7hcmup3Rp/FBI9iA==
+  dependencies:
+    "@plasmicapp/loader-fetcher" "1.0.21"
+    "@plasmicapp/loader-splits" "1.0.26"
+
+"@plasmicapp/[email protected]":
+  version "1.0.21"
+  resolved "https://registry.yarnpkg.com/@plasmicapp/loader-fetcher/-/loader-fetcher-1.0.21.tgz#65e7b4ecbed79e8631a7bef95bb5128d7260721c"
+  integrity sha512-B452XxKa2lNVBDGZQdXsX5zIxiH5wrwVsXMzemZRbDbNZV2mEd0Ir3wME8RF/4kKWu7CDJSixIBFdLZI/SvLgg==
+  dependencies:
+    "@plasmicapp/isomorphic-unfetch" "^1.0.1"
+
+"@plasmicapp/loader-nextjs@^1.0.247":
+  version "1.0.247"
+  resolved "https://registry.yarnpkg.com/@plasmicapp/loader-nextjs/-/loader-nextjs-1.0.247.tgz#8d715a2cf98c14595b24a590cd1981cdb62de629"
+  integrity sha512-GepAp57l9F7LnZSddNuuijhRmDCZc2pT+WMd7ZgIpr0lCTJ3xFenQAV8ZgpU7VlnZ35jJ6Gm2XnrAC3UYIh5vw==
+  dependencies:
+    "@plasmicapp/loader-core" "1.0.97"
+    "@plasmicapp/loader-edge" "1.0.27"
+    "@plasmicapp/loader-react" "1.0.235"
+    "@plasmicapp/watcher" "1.0.70"
+    server-only "0.0.1"
+
+"@plasmicapp/[email protected]":
+  version "1.0.235"
+  resolved "https://registry.yarnpkg.com/@plasmicapp/loader-react/-/loader-react-1.0.235.tgz#bd68cfbbd571e8ced7b39eabe69b7fae9149b754"
+  integrity sha512-Ex5zfjnH6iPf+l3Wu7YI3CrGzaFX6TZMcXXj7rMsvlSexHh3ytLvsOGLjBat37L49L1v9PYOEem5x22uLQZTYg==
+  dependencies:
+    "@plasmicapp/data-sources-context" "0.1.7"
+    "@plasmicapp/host" "1.0.117"
+    "@plasmicapp/loader-core" "1.0.97"
+    "@plasmicapp/loader-splits" "1.0.26"
+    "@plasmicapp/query" "0.1.61"
+    "@plasmicapp/react-ssr-prepass" "2.0.1"
     pascalcase "^1.0.0"
     react-is "^17.0.2"
-    react-ssr-prepass "^1.4.0"
+    server-only "0.0.1"
 
-"@plasmicapp/[email protected].13":
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/@plasmicapp/loader-splits/-/loader-splits-1.0.13.tgz#a203d9839786adf93eea0fb8e330312f94ed95ed"
-  integrity sha512-AZ5xxExBiIlKBGM1skilC+ODLtncB2a4CpqogmdlsPHqQ6yJNsguzcz5UrULXTO1Y4DcER0Mptfjbo0Yz8IEqw==
+"@plasmicapp/[email protected].26":
+  version "1.0.26"
+  resolved "https://registry.yarnpkg.com/@plasmicapp/loader-splits/-/loader-splits-1.0.26.tgz#a85f1927775b5ab6373cb8bf97661914ed9f3078"
+  integrity sha512-ajuNdQRTiq3w2AeTSpDopOnujsHdEqSX2/edTA97EBWgbhdhY2X8/z37uwSH78wMjdSqbXxhRMuylTr4/nzaoA==
   dependencies:
-    "@plasmicapp/loader-fetcher" "1.0.8"
+    "@plasmicapp/loader-fetcher" "1.0.21"
     json-logic-js "^2.0.2"
 
-"@plasmicapp/[email protected].53":
-  version "0.1.53"
-  resolved "https://registry.yarnpkg.com/@plasmicapp/query/-/query-0.1.53.tgz#0e7a1782f117a413738e272c899523f9df63b987"
-  integrity sha512-cdoK2fbZxmCr/vp52mjFfAakmtNeHqbGKNmiNDOCsH47FJi7DiTPT474aeQDUYrFxvaxeyMAQJ8lPC719Zl/pQ==
+"@plasmicapp/[email protected].61":
+  version "0.1.61"
+  resolved "https://registry.yarnpkg.com/@plasmicapp/query/-/query-0.1.61.tgz#48083622db1d3f7eaae9406942c0a507afa6523e"
+  integrity sha512-3+Kn0+J58NoT7wtOb+v4ESCkSlbiDKd2zM4mg0E2aKG5oZi2N7IsbzmX8StCDoRg53UIfwkIqSwsHAf5ysJcNw==
   dependencies:
-    react-ssr-prepass "^1.4.0"
-    swr ">1.0.0"
+    swr "^1.0.0"
 
-"@plasmicapp/[email protected]":
-  version "1.0.67"
-  resolved "https://registry.yarnpkg.com/@plasmicapp/watcher/-/watcher-1.0.67.tgz#e4db773585fbffb64ec1d19446ee9ddd12ab5c89"
-  integrity sha512-Rw7tjYZbYwv1zXVHgwwLdZl9Mo2+hsYpv+e5fdDavwyifUq5zCvYmA1YAXjFtBUKDO3UHfueAMqRmt8Bwb12Ow==
+"@plasmicapp/[email protected]":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@plasmicapp/react-ssr-prepass/-/react-ssr-prepass-2.0.1.tgz#087265d755fc493039bd7a0d2f24166675dedc6c"
+  integrity sha512-imV4VOVz/8TptOCvNfg3bbwLvQMEaJvrvxHSfUzKl4uHJyvC2pAGkuLAOBiDOxhdD+sn73aaZEVMskG/6G5qxw==
+
+"@plasmicapp/[email protected]":
+  version "1.0.70"
+  resolved "https://registry.yarnpkg.com/@plasmicapp/watcher/-/watcher-1.0.70.tgz#ee59f90a78abe798b4ae7b20b7ed3e163d3660e4"
+  integrity sha512-iHKnM5K2EtPus43Hln+0Qz6FTNeDxb/GGhhnXaTWcO1nL7tZFRg8BRNXKIIEmSsV2clkNwQEutvzH25JNWmupw==
   dependencies:
     socket.io-client "^4.1.2"
 
@@ -1538,14 +1567,6 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
-isomorphic-unfetch@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz#87341d5f4f7b63843d468438128cb087b7c3e98f"
-  integrity sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==
-  dependencies:
-    node-fetch "^2.6.1"
-    unfetch "^4.2.0"
-
 "js-tokens@^3.0.0 || ^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -2287,11 +2308,6 @@ react-popper@^2.3.0:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
-react-ssr-prepass@^1.4.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/react-ssr-prepass/-/react-ssr-prepass-1.5.0.tgz#bc4ca7fcb52365e6aea11cc254a3d1bdcbd030c5"
-  integrity sha512-yFNHrlVEReVYKsLI5lF05tZoHveA5pGzjFbFJY/3pOqqjGOmMmqx83N4hIjN2n6E1AOa+eQEUxs3CgRnPmT0RQ==
-
 react-swipeable@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-7.0.0.tgz#7a12570ee435d35ac700511de338384aa78d12cd"
@@ -2450,6 +2466,11 @@ semver@^7.3.7:
   dependencies:
     lru-cache "^6.0.0"
 
+[email protected]:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/server-only/-/server-only-0.0.1.tgz#0f366bb6afb618c37c9255a314535dc412cd1c9e"
+  integrity sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==
+
 shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
@@ -2613,7 +2634,7 @@ svgo@^2.7.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
-swr@>1.0.0:
+swr@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/swr/-/swr-1.3.0.tgz#c6531866a35b4db37b38b72c45a63171faf9f4e8"
   integrity sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==