Adding a checkbox for the custom link

wip

Quick changes

Implement the custom link

Author: amotaouakkil123

client/src/app/core/conversation.tsx

@@ -12,22 +12,22 @@ import { ParticipationSpa } from "../../components/participation/ParticipationSp
 import type { Conversation, ParticipationComment } from "./dashboard";
 
 const ConversationPage = () => {
-  const params = useParams<{ conversationId: string }>();
-
+  const params = useParams<{ conversationId: string;}>();
+  const conversationIdOrName = params.conversationId;
   // This controls max. time (in s) the user need to wait before they can see the new comment(s)
   // TODO: make it configurable (server level? conversation level?)
   const autoRefetchInterval = 15;
 
   const friendlyId = useQuery({
-    queryKey: ["conversation-id", params.conversationId || ""],
-    queryFn: () => getConversationIdByFriendlyName(params.conversationId || ""),
+    queryKey: ["conversation-id-name", conversationIdOrName || ""],
+    queryFn: () => getConversationIdByFriendlyName(conversationIdOrName || ""),
     retry: false,
-    enabled: !!params.conversationId,
+    enabled: !!conversationIdOrName,
   });
 
   const conversationId = useMemo(() => {
-    return friendlyId.data || params.conversationId;
-  }, [friendlyId.data, params.conversationId]);
+    return friendlyId.data || conversationIdOrName;
+  }, [friendlyId.data, conversationIdOrName]);
 
   const conversation = useQuery<Conversation>({
     queryKey: ["current-conversation", conversationId],

client/src/app/core/dashboard.tsx

@@ -11,6 +11,7 @@ export type Conversation = {
   date_created: string;
   is_active: boolean;
   display_unmoderated: boolean;
+  user_friendly_link: string;
   show_charts?: boolean; // placeholder
   allow_votes?: boolean; // placeholder
 };

client/src/components/conversation/ConversationConfig.tsx

@@ -39,13 +39,18 @@ export default function ConversationConfig({
   ); // TODO: placeholder; change to correct value later
   // const [updated, setUpdated] = useState(0);
 
+  const [conversationFriendlyLink, setConversationFriendlyLink] = useState(
+    editItem?.user_friendly_link ?? "",
+  );
+
   async function formSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     const formData = new FormData(event.target as HTMLFormElement);
     const newConversationRequestBody = {
       display_unmoderated: formData.get("display-unmoderated") === "on",
       show_charts: formData.get("show-charts") === "on", // TODO: placeholder; change to correct value later
       allow_votes: formData.get("allow-votes") === "on", // TODO: placeholder; change to correct value later
+      user_friendly_link: formData.get("user-friendly-link"), // TODO: placeholder; change to correct value later
       name: formData.get("name"),
       description: formData.get("description"),
     };
@@ -176,6 +181,18 @@ export default function ConversationConfig({
             ></Input>
             Make Conversation Open
           </label>
+          <label htmlFor="user-friendly-link" className="flex gap-2 p-2">
+            Use Custom Link for Conversation
+            <Input
+              className="border-gray-500 border-2 justify-self-start aspect-square h-6"
+              name="user-friendly-link"
+              id="user-friendly-link"
+              value={conversationFriendlyLink}
+              onChange={(event) =>
+                setConversationFriendlyLink(event.target.value)
+              }
+            ></Input>
+          </label>
         </fieldset>
 
         <button

client/src/components/conversation/ManageConversation.tsx

@@ -29,7 +29,7 @@ export default function ManageConversation({
   };
   return (
     <section className="w-[95%] max-w-4xl mx-auto">
-      <BreadCrumb conversation={editIdItem.id} />
+      <BreadCrumb conversation={editIdItem.name} />
       <div className="title flex justify-between">
         <h1 className="text-4xl font-bold my-4">
           Conversation: {editIdItem.name}

client/src/components/conversation/ManageDistribution.tsx

@@ -0,0 +1,18 @@
+import type { Conversation, ModerationComment } from "../../app/core/dashboard";
+import { useOutletContext } from "react-router";
+
+export default function ManageDistribution({
+}: {
+  }) {
+  const { conversation } = useOutletContext<{ conversation: Conversation }>();
+  return (
+    <div className="[95%] max-w-4xl mx-auto">
+      <p>
+        Friendly Link: {} 
+        <a className="underline" href={window.location.origin + "/conversation/" + conversation.user_friendly_link}>
+          {window.location.origin + "/conversation/" + conversation.user_friendly_link}
+        </a>
+      </p>
+    </div>
+  );
+}

client/src/main.tsx

@@ -10,6 +10,7 @@ import ConversationPage from "./app/core/conversation";
 import DashboardPage from "./app/core/dashboard";
 import { AuthProvider } from "./components/context/AuthProvider";
 import ManageComments from "./components/conversation/ManageComments";
+import ManageDistribution from "./components/conversation/ManageDistribution";
 
 const queryClient = new QueryClient();
 
@@ -45,7 +46,7 @@ const router = createBrowserRouter([
                   },
                   {
                     path: "distribute",
-                    Component: () => <></>,
+                    Component: ManageDistribution,
                   },
                   {
                     path: "moderate",