Calendar v0

.gitignore

@@ -39,4 +39,7 @@ yarn-error.log*
 /public/sitemap.xml
 
 # google sheets secret
-secrets.json
+secrets.json
+
+#react email
+.react-email

components/edit.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+import { AiOutlineEdit } from "react-icons/ai";
+import { usePathname } from "next/navigation";
+import { useUser } from "@supabase/auth-helpers-react";
+
+export default function Edit({ id }: { id?: string }) {
+  const pathname = usePathname();
+  const user = useUser();
+
+  if (id && user)
+    return (
+      <Link
+        className={`absolute ${
+          pathname == "/" ? "mt-[58px] sm:mt-28 " : "mt-4"
+        } right-6 rounded-full border border-black bg-white p-3 shadow-md z-10`}
+        href={`https://app.contentful.com/spaces/${process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID}/entries/${id}`}
+        target="_blank"
+      >
+        <AiOutlineEdit size={20} aria-label="Edit" />
+      </Link>
+    );
+}

components/footer.tsx

@@ -10,11 +10,15 @@ import { Arrow } from "../icons/arrow";
 import Mixcloud from "../icons/mixcloud";
 import Soundcloud from "../icons/soundcloud";
 import Telegram from "../icons/telegram";
+import { useUser } from "@supabase/auth-helpers-react";
+import SignOut from "./signOut";
 
 export default function Footer() {
   const handleGoToTop = () =>
     window?.scroll({ top: 0, left: 0, behavior: "smooth" });
 
+  const user = useUser();
+
   return (
     <footer className="bg-black text-white">
       <div className="px-4 md:px-8 py-10 md:py-20">
@@ -48,17 +52,17 @@ export default function Footer() {
       <div className="px-4 md:px-8 border-t border-white py-4 md:py-6">
         <div className="grid lg:grid-cols-3 gap-8 lg:gap-12 text-small font-medium">
           {/* Spacer */}
-          <div className="hidden lg:block" />
+          {user ? <SignOut /> : <div className="hidden lg:block" />}
 
           <div className="flex justify-center">
             <button
               onClick={handleGoToTop}
               className="focus:outline-none inline-flex items-center space-x-4"
             >
               <span>Go up</span>
-              <span className="mt-1">
+              {/* <span className="mt-1">
                 <Arrow className="-rotate-90" size={24} />
-              </span>
+              </span> */}
             </button>
           </div>
 

components/formFields/extraArtists.tsx

@@ -1,109 +1,78 @@
 import { useState } from "react";
 import ImageUploadField from "./imageUploadField";
 import { Close } from "../../icons/menu";
-// import SingleLineField from "./singleLineField";
-// import TextareaField from "./textareaField";
+import TextareaField from "./textareaField";
+import CheckboxField from "./checkboxField";
+import InputField from "./inputField";
+import { useFormikContext, FieldArray } from "formik";
+import { SubmissionFormValues } from "../../types/shared";
 
-export default function ExtraArtists({
-  setExtraArtistsParent,
-}: {
-  setExtraArtistsParent: (arg: Array<{ name: string; bio: string }>) => void;
-}) {
-  const [artistExists, setArtistExists] = useState<boolean>(true);
-  const [extraArtists, setExtraArtists] = useState([{ name: "", bio: "" }]);
-
-  const handleFormChange = (event, index) => {
-    let data = [...extraArtists];
-    data[index][event.target.name] = event.target.value;
-    setExtraArtists(data);
-    setExtraArtistsParent(data);
-  };
-
-  const addArtistFields = () => {
-    let object = {
-      name: "",
-      bio: "",
-    };
-
-    setExtraArtists([...extraArtists, object]);
-  };
-
-  const removeArtistFields = (index) => {
-    let data = [...extraArtists];
-    data.splice(index, 1);
-    setExtraArtists(data);
-  };
+export default function ExtraArtists() {
+  const { values } = useFormikContext<SubmissionFormValues>();
 
   return (
     <div>
-      <div>
-        <input
-          type="checkbox"
-          id="artistExists"
-          name="artistExists"
-          onChange={(e) => setArtistExists(!e.target.checked)}
-          className="h-6 w-6 rounded-full border-2 border-black text-black focus:ring-black"
-        />
-        <label htmlFor="artistExists" className="checkbox-label">
-          Can&apos;t find artist/guest in the dropdown
-        </label>
-      </div>
+      <CheckboxField
+        name="hasExtraArtists"
+        label="Can't find your artist/guest/collective in the dropdown?"
+        size="small"
+      />
 
-      {!artistExists && (
-        <fieldset className="mt-8 mb-8">
-          <legend className="mb-6">Artist/guest info</legend>
-          {extraArtists.map((form, index) => {
-            return (
-              <div
-                className="mb-8 border border-black p-8 relative"
-                key={index}
-              >
+      {values.hasExtraArtists && (
+        <fieldset className=" mb-8">
+          <legend className="mb-6">Additional artist(s)</legend>
+          <FieldArray
+            name="extraArtists"
+            render={(arrayHelpers) => (
+              <div>
+                {values.extraArtists &&
+                  values.extraArtists.map((extraArtist, index) => (
+                    <div
+                      className="mb-8 border border-black p-8 relative"
+                      key={"extraArtist" + index}
+                    >
+                      {index > 0 && (
+                        <button
+                          className="float-right"
+                          onClick={() => arrayHelpers.remove(index)}
+                          type="button"
+                        >
+                          <Close size={24} />
+                        </button>
+                      )}
+                      <InputField
+                        name={`extraArtists.${index}.name`}
+                        type="text"
+                        label="Name"
+                        required
+                      />
+                      <InputField
+                        name={`extraArtists.${index}.pronouns`}
+                        type="text"
+                        label="Pronouns"
+                      />
+                      <TextareaField
+                        name={`extraArtists.${index}.bio`}
+                        rows={4}
+                        label="Bio"
+                      />
+                      <ImageUploadField
+                        label="Image"
+                        required
+                        name={`extraArtists.${index}.image`}
+                      />
+                    </div>
+                  ))}
                 <button
-                  className="float-right"
-                  onClick={() => removeArtistFields(index)}
+                  className="underline"
+                  onClick={() => arrayHelpers.push("")}
+                  type="button"
                 >
-                  <Close size={24} />
+                  Add another artist/guest
                 </button>
-                <div className="mb-6 mt-6">
-                  <label htmlFor="name">Name</label>
-                  <input
-                    type="text"
-                    name="name"
-                    className="pill-input"
-                    onChange={(event) => handleFormChange(event, index)}
-                    value={form.name}
-                    required
-                  />
-                </div>
-                <div className="mb-6">
-                  <label htmlFor="bio">Bio</label>
-                  <textarea
-                    rows={4}
-                    name="bio"
-                    className="pill-input"
-                    onChange={(event) => handleFormChange(event, index)}
-                    value={form.bio}
-                    required
-                  />
-                </div>
-                <ImageUploadField
-                  label="Guest image"
-                  name="guestImage"
-                  // required={true}
-                />
               </div>
-            );
-          })}
-          <button className="underline" onClick={addArtistFields}>
-            Add another artist/guest
-          </button>
-
-          {/* <SingleLineField
-            label="Instagram @ handle(s)"
-            name="instagram"
-            required={true}
-            type="text"
-          /> */}
+            )}
+          />
         </fieldset>
       )}
     </div>

components/formFields/multiSelectField.tsx

@@ -7,17 +7,19 @@ export default function MultiSelectField({
   description,
   options,
   limit,
+  value,
   ...props
 }: {
   label: string;
   description?: string;
   name: string;
   required?: boolean;
-  options: Array<{ value: string; label: string }>;
+  value?: Array<{ value: string; label: string; email?: [string] }>;
+  options: Array<{ value: string; label: string; email?: [string] }>;
   limit?: number;
 }) {
   const [ariaFocusMessage, setAriaFocusMessage] = useState("");
-  const [selectedOptions, SetSelectedOptions] = useState([]);
+  const [selectedOptions, SetSelectedOptions] = useState(value ? value : []);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [field, meta, helpers] = useField(props);
   const { setFieldValue } = useFormikContext();
@@ -55,7 +57,7 @@ export default function MultiSelectField({
         className="basic-multi-select pill-input mb-2 p-2"
         value={selectedOptions}
         onChange={(o) => onSetSelectedOptions(o)}
-        isOptionDisabled={() => selectedOptions.length >= limit}
+        isOptionDisabled={() => selectedOptions.length >= limit && limit != 1}
         name={props.name}
         id={props.name}
         classNamePrefix="select"

components/layout.tsx

@@ -1,18 +1,22 @@
 import { Fragment } from "react";
 import Alert from "./alert";
+import Edit from "./edit";
 
 export default function Layout({
   className,
   children,
   preview,
+  pageId,
 }: {
   children: React.ReactNode;
   preview?: boolean;
   className?: string;
+  pageId?: string;
 }) {
   return (
     <Fragment>
       {preview && <Alert />}
+      <Edit id={pageId} />
       <main className={className}>{children}</main>
     </Fragment>
   );

components/navigation.tsx

@@ -9,6 +9,8 @@ import { Menu } from "../icons/menu";
 import MessageSquare from "../icons/message-square";
 import Search from "../icons/search";
 import NavigationLink from "./navigationLink";
+import { useUser } from "@supabase/auth-helpers-react";
+import { AiOutlineCalendar } from "react-icons/ai";
 
 export default function Navigation() {
   const [isOpen, isOpenSet] = useState(false);
@@ -21,6 +23,8 @@ export default function Navigation() {
     window.open("/chat", "refugechatwindow", chatOptions);
   }, []);
 
+  const user = useUser();
+
   return (
     <Dialog.Root open={isOpen} onOpenChange={(open) => isOpenSet(open)}>
       <nav className="text-black">
@@ -144,13 +148,19 @@ export default function Navigation() {
                       </a>
                     </li>
                     <li>
-                      <a
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        href={INSTAGRAM_URL}
-                      >
-                        <Instagram />
-                      </a>
+                      {user ? (
+                        <Link href="/admin/calendar">
+                          <AiOutlineCalendar />
+                        </Link>
+                      ) : (
+                        <a
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          href={INSTAGRAM_URL}
+                        >
+                          <Instagram />
+                        </a>
+                      )}
                     </li>
                   </ul>
                 </li>

components/showSubmissionStep1.tsx

@@ -25,38 +25,6 @@ export default function ShowSubmissionStep1() {
             </label>
           </RadioGroup.Item>
         </RadioGroup.Root>
-        {/* <div className="flex">
-          <div className="w-1/2">
-            <Field
-              type="radio"
-              id="live"
-              name="showType"
-              value="live"
-              className="peer hidden"
-            />
-            <label
-              htmlFor="live"
-              className="block cursor-pointer select-none pill-input rounded-tr-none rounded-br-none py-3 text-center peer-checked:bg-orange peer-checked:font-bold"
-            >
-              Live
-            </label>
-          </div>
-          <div className="w-1/2">
-            <Field
-              type="radio"
-              id="preRecord"
-              name="showType"
-              value="preRecord"
-              className="peer hidden"
-            />
-            <label
-              htmlFor="preRecord"
-              className="block cursor-pointer select-none pill-input rounded-tl-none rounded-bl-none py-3 text-center peer-checked:bg-blue peer-checked:font-bold"
-            >
-              Pre-recorded
-            </label>
-          </div>
-        </div> */}
         <ErrorMessage className="text-red" component="span" name="showType" />
       </fieldset>
     </div>

components/signOut.tsx

@@ -0,0 +1,16 @@
+import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
+import { useRouter } from "next/router";
+
+export default function SignOut() {
+  const supabase = createClientComponentClient();
+  const router = useRouter();
+  const handleSignOut = async () => {
+    await supabase.auth.signOut();
+    router.reload();
+  };
+  return (
+    <button className="text-left grow-0" onClick={handleSignOut}>
+      Sign out
+    </button>
+  );
+}