From 39f80846713dad9033b1a54e922493506ed3002b Mon Sep 17 00:00:00 2001
From: avvvvvv <hi@jackmurraybrown.com>
Date: Tue, 19 Nov 2024 15:45:25 +0100
Subject: [PATCH] Feature/calendar updates (#151)

* add copy handles button to insta text popup

* add back button to daily schedule generator
---
 pages/admin/daily-schedule-generator.tsx | 86 +++++++++++-------------
 views/admin/calendarInsta.tsx            | 49 ++++++++++----
 2 files changed, 77 insertions(+), 58 deletions(-)

diff --git a/pages/admin/daily-schedule-generator.tsx b/pages/admin/daily-schedule-generator.tsx
index 49b9c40..f114610 100644
--- a/pages/admin/daily-schedule-generator.tsx
+++ b/pages/admin/daily-schedule-generator.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { NextPage } from "next";
 import { TfiReload, TfiDownload } from "react-icons/tfi";
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
-
+import BackButton from "../../components/backButton";
 const ScheduleArtworkPage: NextPage & {
   getLayout?: (page: React.ReactNode) => React.ReactNode;
 } = () => {
@@ -34,51 +34,28 @@ const ScheduleArtworkPage: NextPage & {
   }, []);
 
   return (
-    <div
-      style={{
-        backgroundColor: "black",
-        height: "100vh",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <div className="h-[80vh] flex items-center align-middle">
-        {imageUrl ? (
-          <img
-            className="border border-white"
-            src={imageUrl}
-            alt="Schedule Artwork"
-            style={{ maxWidth: "100%", maxHeight: "80vh" }}
-          />
-        ) : (
-          <p className="text-white animate-pulse">Loading...</p>
-        )}
-        <div />
+    <div className="relative bg-black">
+      <div className="absolute left-4 sm:left-8 top-3 sm:top-4 z-20">
+        <BackButton backPath="/admin/calendar" />
       </div>
-      <div className="flex gap-4">
-        <button
-          className="bg-white border-white p-4 border mt-4 rounded text-large flex items-center gap-4"
-          onClick={fetchImage}
-          style={{
-            marginTop: "20px",
-            padding: "10px 20px",
-            fontSize: "16px",
-            cursor: "pointer",
-          }}
-        >
-          <span>Regenerate</span>
-          {loading ? (
-            <AiOutlineLoading3Quarters size={20} className="animate-spin" />
+      <div className="relative min-h-screen flex flex-col items-center pt-20 md:pt-8">
+        <div className="h-[75vh] flex items-center align-middle">
+          {imageUrl ? (
+            <img
+              className="border border-white"
+              src={imageUrl}
+              alt="Schedule Artwork"
+              style={{ maxWidth: "100%", maxHeight: "100%" }}
+            />
           ) : (
-            <TfiReload size={20} />
-          )}{" "}
-        </button>
-        {imageUrl && (
+            <p className="text-white animate-pulse">Loading...</p>
+          )}
+          <div />
+        </div>
+        <div className="flex gap-4">
           <button
-            className="bg-white border-white p-4 border mt-4 rounded text-large gap-4"
-            onClick={downloadImage}
+            className="bg-white border-white p-4 border mt-4 rounded text-large flex items-center gap-4"
+            onClick={fetchImage}
             style={{
               marginTop: "20px",
               padding: "10px 20px",
@@ -86,9 +63,28 @@ const ScheduleArtworkPage: NextPage & {
               cursor: "pointer",
             }}
           >
-            Download
+            <span>Regenerate</span>
+            {loading ? (
+              <AiOutlineLoading3Quarters size={20} className="animate-spin" />
+            ) : (
+              <TfiReload size={20} />
+            )}{" "}
           </button>
-        )}
+          {imageUrl && (
+            <button
+              className="bg-white border-white p-4 border mt-4 rounded text-large gap-4"
+              onClick={downloadImage}
+              style={{
+                marginTop: "20px",
+                padding: "10px 20px",
+                fontSize: "16px",
+                cursor: "pointer",
+              }}
+            >
+              Download
+            </button>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/views/admin/calendarInsta.tsx b/views/admin/calendarInsta.tsx
index cd5237e..a132718 100644
--- a/views/admin/calendarInsta.tsx
+++ b/views/admin/calendarInsta.tsx
@@ -8,6 +8,7 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
 import { useRef } from "react";
+import toast from "react-hot-toast";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -17,6 +18,7 @@ export default function CalendarInsta() {
   const [data, setData] = useState(null);
   const [isLoading, setLoading] = useState(true);
   const instaText = useRef<HTMLParagraphElement>(null);
+  const instaHandles = useRef<HTMLDivElement>(null);
   const [copied, setCopied] = useState<boolean>(false);
 
   useEffect(() => {
@@ -32,10 +34,21 @@ export default function CalendarInsta() {
     navigator.clipboard
       .writeText(instaText.current?.innerText)
       .then(() => {
-        setCopied(true);
+        toast.success("Copied to your clipboard");
       })
       .catch(() => {
-        alert("something went wrong");
+        toast.error("Uh oh, something went wrong :/");
+      });
+  };
+
+  const copyHandles = () => {
+    navigator.clipboard
+      .writeText(instaHandles.current?.innerText)
+      .then(() => {
+        toast.success("Copied to your clipboard");
+      })
+      .catch(() => {
+        toast.error("Uh oh, something went wrong :/");
       });
   };
 
@@ -100,18 +113,28 @@ export default function CalendarInsta() {
                 <br />
                 🎙Roll call:
                 <br />
-                {data.map((show) => (
-                  <>
-                    {show.instagramHandles} <br />
-                  </>
-                ))}
+                <div ref={instaHandles}>
+                  {data.map((show) => (
+                    <>
+                      {show.instagramHandles} <br />
+                    </>
+                  ))}
+                </div>
               </p>
-              <button
-                className="fixed top-2 right-2 z-10 hover:bg-black/10 px-2 py-1 rounded-lg border"
-                onClick={() => copyText()}
-              >
-                {copied ? <span>Copied :)</span> : <span>Copy text</span>}
-              </button>
+              <div className="flex gap-2 fixed top-2 right-2 z-10">
+                <button
+                  className="hover:bg-black/10 px-2 py-1 rounded-lg border"
+                  onClick={() => copyHandles()}
+                >
+                  <span>Copy handles</span>
+                </button>
+                <button
+                  className="hover:bg-black/10 px-2 py-1 rounded-lg border"
+                  onClick={() => copyText()}
+                >
+                  <span>Copy it all</span>
+                </button>
+              </div>
             </div>
           )}
         </Dialog.Content>