Send to zulip

www/app/[domain]/transcripts/[transcriptId]/shareModal.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from "react";
+import SelectSearch from "react-select-search";
+
+type ShareModal = {
+  show: boolean;
+  setShow: (show: boolean) => void;
+  title: string;
+  url: string;
+  summary: string;
+};
+
+const ShareModal = (props: ShareModal) => {
+  const [stream, setStream] = useState(null);
+  const [topic, setTopic] = useState(null);
+  const [includeTranscript, setIncludeTranscript] = useState(false);
+  const [includeSummary, setIncludeSummary] = useState(false);
+  const [includeTopics, setIncludeTopics] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [streams, setStreams] = useState({});
+
+  useEffect(() => {
+    fetch("/streams.json")
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.json();
+      })
+      .then((data) => {
+        console.log("Stream data:", data);
+        setStreams(data);
+        setIsLoading(false);
+        // data now contains the JavaScript object decoded from JSON
+      })
+      .catch((error) => {
+        console.error("There was a problem with your fetch operation:", error);
+      });
+  }, []);
+
+  const handleSendToZulip = () => {
+    const message = `### Reflector Recording\n\n**[${props.title}](${props.url})**\n\n${props.summary}`;
+
+    alert("Send to zulip");
+  };
+
+  if (props.show && isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      {props.show && (
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
+          <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+            <div className="mt-3 text-center">
+              {/*
+                            <Select
+                                options={streamOptions}
+                                onChange={setStream}
+                                placeholder="Select Stream"
+                            />
+                            <Select
+                                options={topicOptions}
+                                onChange={setTopic}
+                                placeholder="Select Topic"
+                                className="mt-4"
+            /> */}
+              <div className="flex flex-col mt-4">
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={includeTranscript}
+                    onChange={(e) => setIncludeTranscript(e.target.checked)}
+                  />
+                  Include Transcript
+                </label>
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={includeSummary}
+                    onChange={(e) => setIncludeSummary(e.target.checked)}
+                  />
+                  Include Summary
+                </label>
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={includeTopics}
+                    onChange={(e) => setIncludeTopics(e.target.checked)}
+                  />
+                  Include Topics
+                </label>
+              </div>
+              <button
+                className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mt-4"
+                onClick={handleSendToZulip}
+              >
+                Send to Zulip
+              </button>
+              <button
+                className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mt-4"
+                onClick={() => props.setShow(false)}
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ShareModal;