way nicer flow and almost ready for fetching and displaying but stay patient

components/Modals/CreateOrUpdateLink.tsx

@@ -1,40 +1,202 @@
+import { Divider, Select, Switch, Tooltip } from "antd";
+const { Option } = Select;
+
 import Modal from "antd/lib/modal/Modal";
 import { useState } from "react";
+import toast from "react-hot-toast";
+import { useAuth } from "../../contexts/authContext";
 import {
   ShowModalType,
   useKeyboardContext,
 } from "../../contexts/keyboardContext";
+import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
+import Link, { LinkType } from "../../models/link";
+import LinkIcon from "../LinkIcon";
 
 export default function CreateOrUpdateLink() {
+  const { currUser } = useAuth();
   const { handleModalType, showModalType } = useKeyboardContext();
+  const { teamUsers, team } = useTeamDashboardContext();
 
   function closeModal() {
     handleModalType(ShowModalType.na);
   }
 
+  function handleSelectRecipients(value) {
+    // passed in array of selections...userIds
+
+    setRecipientsSelected(value);
+
+    console.log(value);
+  }
+
+  function handleSelectRecipientMode(isChecked) {
+    // clear the list of recipients if team selected
+    if (isChecked) {
+      setRecipientsSelected([]);
+      setIsTeamLink(true);
+    } else {
+      setRecipientsSelected([]);
+      setIsTeamLink(false);
+    }
+  }
+
+  function handleSubmitLink() {
+    if (!link || !name) {
+      toast.error("Please add a valid link and name");
+      return;
+    }
+
+    // if it's a team link, make sure recipients is null ... but the model should handle this for us?
+
+    try {
+      const newLink = new Link(
+        name,
+        description,
+        link,
+        team.id,
+        recipientsSelected,
+        currUser.uid
+      );
+
+      console.log(newLink);
+
+      // send to database
+    } catch (error) {
+      toast.error("Something went wrong in sending the link.");
+      console.log(error);
+    }
+  }
+
   const [link, setLink] = useState<string>("");
+  const [name, setName] = useState<string>("");
+  const [description, setDescription] = useState<string>("");
+  const [showMoreDetails, setShowMoreDetails] = useState<boolean>(false);
+  const [isTeamLink, setIsTeamLink] = useState<boolean>(true);
+  const [recipientsSelected, setRecipientsSelected] = useState<string[]>([]);
 
   return (
     <Modal
       title="Link Details"
       visible={showModalType == ShowModalType.createLink}
       onCancel={closeModal}
-      onOk={closeModal}
+      onOk={handleSubmitLink}
     >
-      <div className="flex flex-col">
+      <div className="flex flex-col space-y-5">
         <span className="flex flex-col items-start">
           <span className="text-lg">Link</span>
           <span className="text-gray-300 text-xs mb-2">
             Please make sure this is valid for others to access.
           </span>
+          {/* icon and link input */}
+          <span className="flex flex-row items-center space-x-2 w-full">
+            <LinkIcon className="text-3xl" linkType={Link.getLinkType(link)} />
+
+            <input
+              autoFocus
+              className="flex-1 rounded-lg bg-gray-50 p-3"
+              value={link}
+              placeholder="https://jira.atlassian.com/team/xxx"
+              onChange={(e) => setLink(e.target.value)}
+            />
+          </span>
+        </span>
+
+        <span className="flex flex-col items-start">
+          <span className="text-lg">Name</span>
+          <span className="text-gray-300 text-xs mb-2">
+            Make sure this makes sense to who you are sending it to.
+          </span>
 
           <input
             className="w-full rounded-lg bg-gray-50 p-3"
-            value={link}
-            placeholder="https://drive.google.com/xxx"
-            onChange={(e) => setLink(e.target.value)}
+            value={name}
+            placeholder="ex. User Story - Customer Creating Orders"
+            onChange={(e) => setName(e.target.value)}
           />
         </span>
+
+        <span className="flex flex-col items-start">
+          <span className="text-lg">Recipients</span>
+          <span className="text-gray-300 text-xs mb-2">
+            Choose team or individual recipients
+          </span>
+
+          <span className="mb-2">
+            <Switch
+              defaultChecked
+              onChange={handleSelectRecipientMode}
+              checkedChildren={<span>Team</span>}
+              unCheckedChildren={<span>Members</span>}
+            />
+          </span>
+
+          {/* select team members to send to */}
+          {!isTeamLink ? (
+            <Select
+              mode="multiple"
+              allowClear
+              style={{ width: "100%" }}
+              placeholder="Please select team members"
+              onChange={handleSelectRecipients}
+              value={recipientsSelected}
+              optionLabelProp="label"
+              filterOption={(input, option) =>
+                option.props.label.toLowerCase().indexOf(input.toLowerCase()) >=
+                0
+              }
+            >
+              {teamUsers.map((tu) => {
+                return (
+                  <Option key={tu.id} label={tu.firstName}>
+                    {tu.firstName} {tu.lastName}
+                  </Option>
+                );
+              })}
+            </Select>
+          ) : (
+            <></>
+          )}
+        </span>
+
+        <Tooltip
+          title={"Private mode coming soon, but keep it collaborative for now."}
+          className="flex flex-col"
+        ></Tooltip>
+
+        {showMoreDetails ? (
+          <>
+            <Divider />
+
+            <button
+              className="text-sm text-gray-300 text-left underline decoration-gray-300"
+              onClick={() => setShowMoreDetails(false)}
+            >
+              Hide details...
+            </button>
+
+            <span className="flex flex-col items-start">
+              <span className="text-md">Description</span>
+              <span className="text-gray-300 text-xs mb-2">
+                Optional - Add any pointers about this file.
+              </span>
+
+              <textarea
+                className="w-full rounded-lg bg-gray-50 p-3"
+                value={description}
+                placeholder="ex. Please review this and add feedback asap"
+                onChange={(e) => setDescription(e.target.value)}
+              />
+            </span>
+          </>
+        ) : (
+          <button
+            className="text-sm text-gray-300 text-left underline decoration-gray-300"
+            onClick={() => setShowMoreDetails(true)}
+          >
+            Click to show more details...
+          </button>
+        )}
       </div>
     </Modal>
   );

components/Modals/CreateOrUpdateRoom.tsx

@@ -190,6 +190,7 @@ export default function CreateOrUpdateRoomModal(props: IModalProps) {
           )}
 
           <input
+            autoFocus
             className="w-full rounded-lg bg-gray-50 p-3"
             value={roomLink}
             placeholder="https://meet.google.com/xxx-xxxx"