Temp commit to merge main into this branch

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

@@ -1,5 +1,17 @@
 import React, { useState, useEffect } from "react";
 import SelectSearch from "react-select-search";
+import {
+  getZulipMessage,
+  sendZulipMessage,
+  ZULIP_MSG_MAX_LENGTH,
+} from "../../../lib/zulip";
+import { Transcript } from "../webSocketTypes";
+import {
+  GetTranscript,
+  GetTranscriptSegmentTopic,
+  GetTranscriptTopic,
+} from "../../../api";
+import "react-select-search/style.css";
 
 type ShareModal = {
   show: boolean;
@@ -7,16 +19,28 @@ type ShareModal = {
   title: string;
   url: string;
   summary: string;
+  date: string;
+  transcript: GetTranscript | null;
+  topics: GetTranscriptTopic[] | null;
 };
 
+interface Stream {
+  id: number;
+  name: string;
+  topics: string[];
+}
+
+interface SelectSearchOption {
+  name: string;
+  value: 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 [stream, setStream] = useState<string | undefined>(undefined);
+  const [topic, setTopic] = useState<string | undefined>(undefined);
   const [includeTopics, setIncludeTopics] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
-  const [streams, setStreams] = useState({});
+  const [streams, setStreams] = useState<Stream[]>([]);
 
   useEffect(() => {
     fetch("/streams.json")
@@ -27,6 +51,9 @@ const ShareModal = (props: ShareModal) => {
         return response.json();
       })
       .then((data) => {
+        data = data.sort((a: Stream, b: Stream) =>
+          a.name.localeCompare(b.name),
+        );
         console.log("Stream data:", data);
         setStreams(data);
         setIsLoading(false);
@@ -38,67 +65,99 @@ const ShareModal = (props: ShareModal) => {
   }, []);
 
   const handleSendToZulip = () => {
-    const message = `### Reflector Recording\n\n**[${props.title}](${props.url})**\n\n${props.summary}`;
+    if (!props.transcript) return;
 
-    alert("Send to zulip");
+    const msg = getZulipMessage(props.transcript, props.topics, includeTopics);
+
+    if (stream && topic) sendZulipMessage(stream, topic, msg);
   };
 
   if (props.show && isLoading) {
     return <div>Loading...</div>;
   }
 
+  console.log(stream);
+
+  let streamOptions: SelectSearchOption[] = [];
+  if (streams) {
+    streams.forEach((stream) => {
+      const value = stream.name;
+      streamOptions.push({ name: value, value: value });
+    });
+  }
+
   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="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+          <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white border-black border-1">
             <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>
+              <h3 className="font-bold text-xl">Send to Zulip</h3>
+
+              {/* Checkbox for 'Include Topics' */}
+              <div className="mt-4 text-left ml-5">
+                <label className="flex items-center">
                   <input
                     type="checkbox"
+                    className="form-checkbox rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                     checked={includeTopics}
                     onChange={(e) => setIncludeTopics(e.target.checked)}
                   />
-                  Include Topics
+                  <span className="ml-2">Include topics</span>
                 </label>
               </div>
+
+              <div className="flex items-center mt-4">
+                <span className="mr-2">#</span>
+                <SelectSearch
+                  search={true}
+                  options={streamOptions}
+                  value={stream}
+                  onChange={(val) => {
+                    setTopic(undefined);
+                    setStream(val.toString());
+                  }}
+                  placeholder="Pick a stream"
+                />
+              </div>
+
+              {stream && (
+                <>
+                  <div className="flex items-center mt-4">
+                    <span className="mr-2 invisible">#</span>
+                    <SelectSearch
+                      search={true}
+                      options={
+                        streams
+                          .find((s) => s.name == stream)
+                          ?.topics.sort((a: string, b: string) =>
+                            a.localeCompare(b),
+                          )
+                          .map((t) => ({ name: t, value: t })) || []
+                      }
+                      value={topic}
+                      onChange={(val) => setTopic(val.toString())}
+                      placeholder="Pick a topic"
+                    />
+                  </div>
+                </>
+              )}
+
               <button
-                className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mt-4"
-                onClick={handleSendToZulip}
+                className={`bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded py-2 px-4 mr-3 ${
+                  !stream || !topic ? "opacity-50 cursor-not-allowed" : ""
+                }`}
+                disabled={!stream || !topic}
+                onClick={() => {
+                  handleSendToZulip();
+                  props.setShow(false);
+                }}
               >
                 Send to Zulip
               </button>
+
               <button
-                className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mt-4"
+                className="bg-red-500 hover:bg-red-700 focus-visible:bg-red-700 text-white rounded py-2 px-4 mt-4"
                 onClick={() => props.setShow(false)}
               >
                 Close