Change how args are passed from Django->Astro

Author: marcoacierno

backend/custom_admin/src/components/invitation-letter-document-builder/local-state.tsx

@@ -4,7 +4,7 @@ import { useInvitationLetterDocumentSuspenseQuery } from "./invitation-letter-do
 import { useUpdateInvitationLetterDocumentMutation } from "./update-invitation-letter-document.generated";
 
 import { createContext } from "react";
-import { getArg } from "../shared/get-arg";
+import { useArgs } from "../shared/args";
 
 type State = {
   header: string;
@@ -173,7 +173,7 @@ const removeTypenames = (obj) => {
 };
 
 const useLoadRemoteData = (dispatch) => {
-  const documentId = getArg("document_id");
+  const { documentId } = useArgs();
 
   const { data } = useInvitationLetterDocumentSuspenseQuery({
     variables: {
@@ -199,13 +199,14 @@ const useLoadRemoteData = (dispatch) => {
 const useSaveRemoteData = (): [(newData) => void, boolean, boolean] => {
   const [updateInvitationLetter, { loading: savingChanges, error }] =
     useUpdateInvitationLetterDocumentMutation();
+  const { documentId } = useArgs();
 
   return [
     (newData) => {
       updateInvitationLetter({
         variables: {
           input: {
-            id: getArg("document_id"),
+            id: documentId,
             dynamicDocument: newData,
           },
         },

backend/custom_admin/src/components/invitation-letter-document-builder/root.tsx

@@ -5,9 +5,17 @@ import { DjangoAdminLayout } from "../shared/django-admin-layout";
 import { InvitationLetterBuilder } from "./builder";
 import { LocalStateProvider } from "./local-state";
 
-export const InvitationLetterDocumentBuilderRoot = () => {
+export const InvitationLetterDocumentBuilderRoot = ({
+  documentId,
+  breadcrumbs,
+}) => {
   return (
-    <Base>
+    <Base
+      args={{
+        documentId,
+        breadcrumbs,
+      }}
+    >
       <DjangoAdminLayout>
         <Suspense
           fallback={

backend/custom_admin/src/components/schedule-builder/root.tsx

@@ -6,9 +6,19 @@ import { Calendar } from "./calendar";
 import { PendingItemsBasket } from "./pending-items-basket";
 import { useConferenceScheduleQuery } from "./schedule.generated";
 
-export const ScheduleBuilderRoot = () => {
+export const ScheduleBuilderRoot = ({
+  conferenceId,
+  conferenceCode,
+  breadcrumbs,
+}) => {
   return (
-    <Base>
+    <Base
+      args={{
+        conferenceId,
+        conferenceCode,
+        breadcrumbs,
+      }}
+    >
       <AddItemModalProvider>
         <ScheduleBuilder />
       </AddItemModalProvider>

backend/custom_admin/src/components/shared/args.tsx

@@ -0,0 +1,24 @@
+import { createContext, useContext, useMemo } from "react";
+
+const ArgsContext = createContext<Record<string, any>>({});
+
+export const useArgs = () => {
+  return useContext(ArgsContext);
+};
+
+export const ArgsProvider = ({ children, args }) => {
+  const resolvedArgs = useMemo(() => {
+    return Object.entries(args).reduce((acc, [key, value]) => {
+      try {
+        acc[key] = JSON.parse(value as string);
+      } catch (e) {
+        acc[key] = value;
+      }
+      return acc;
+    }, {});
+  }, [args]);
+
+  return (
+    <ArgsContext.Provider value={resolvedArgs}>{children}</ArgsContext.Provider>
+  );
+};

backend/custom_admin/src/components/shared/base.tsx

@@ -5,30 +5,34 @@ import { HTML5Backend } from "react-dnd-html5-backend";
 
 import "../shared/styles.css";
 import clsx from "clsx";
+import { ArgsProvider } from "./args";
 import { DjangoAdminEditorProvider } from "./django-admin-editor-modal";
 
 type Props = {
   children: React.ReactNode;
   widget?: boolean;
+  args?: Record<string, any>;
 };
 
 const client = new ApolloClient({
   uri: "/admin/graphql",
   cache: new InMemoryCache(),
 });
 
-export const Base = ({ children, widget = false }: Props) => {
+export const Base = ({ children, args = {}, widget = false }: Props) => {
   return (
     <Theme
       className={clsx({
         "is-widget-theme": widget,
       })}
     >
-      <ApolloProvider client={client}>
-        <DjangoAdminEditorProvider>
-          <DndProvider backend={HTML5Backend}>{children}</DndProvider>
-        </DjangoAdminEditorProvider>
-      </ApolloProvider>
+      <ArgsProvider args={args}>
+        <ApolloProvider client={client}>
+          <DjangoAdminEditorProvider>
+            <DndProvider backend={HTML5Backend}>{children}</DndProvider>
+          </DjangoAdminEditorProvider>
+        </ApolloProvider>
+      </ArgsProvider>
     </Theme>
   );
 };

backend/custom_admin/src/components/shared/django-admin-layout.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { getArg } from "./get-arg";
+import { useArgs } from "./args";
 
 type Breadcrumb = {
   title: string;
@@ -11,7 +11,8 @@ type Props = {
 };
 
 export const DjangoAdminLayout = ({ children }: Props) => {
-  const breadcrumbs: Breadcrumb[] = getArg("breadcrumbs");
+  const { breadcrumbs } = useArgs();
+  console.log("breadcrumbs", breadcrumbs);
   return (
     <div>
       <Header />

backend/custom_admin/src/components/shared/get-arg.ts

@@ -1,11 +1,12 @@
-import { getArg } from "../shared/get-arg";
+import { useArgs } from "../shared/args";
 
 export const useCurrentConference = (): {
   conferenceCode: string;
   conferenceId: string;
 } => {
+  const { conferenceId, conferenceCode } = useArgs();
   return {
-    conferenceId: getArg("conference_id"),
-    conferenceCode: getArg("conference_code"),
+    conferenceId,
+    conferenceCode,
   };
 };

backend/custom_admin/src/components/utils/conference.tsx

@@ -1,15 +1,18 @@
+import { useState } from "react";
 import { RichEditor } from "../../components/shared/rich-editor";
 import { Base } from "../shared/base";
 
-export const RichEditorWidget = () => {
+export const RichEditorWidget = ({ name, value }) => {
+  const [updatedValue, setUpdatedValue] = useState(value);
+
   return (
     <Base widget>
-      <div>
-        <RichEditor
-          content="<p>Initial content</p>"
-          onUpdate={(content) => console.log(content)}
-        />
-      </div>
+      <RichEditor
+        content={value}
+        onUpdate={(content) => setUpdatedValue(content)}
+      />
+
+      <input type="hidden" name={name} value={updatedValue} />
     </Base>
   );
 };

backend/custom_admin/src/components/widgets/rich-editor.tsx

@@ -9,12 +9,9 @@ import { InvitationLetterDocumentBuilderRoot } from "../components/invitation-le
     </head>
 
     <body class="text-sm">
-        <InvitationLetterDocumentBuilderRoot client:only />
-
-        <Fragment set:html={`
-{{ document_id|json_script:"arg-document_id" }}
-{{ breadcrumbs|json_script:"arg-breadcrumbs" }}
-`} />
-
+        <InvitationLetterDocumentBuilderRoot
+            documentId="{{ document_id }}"
+            breadcrumbs="{{ breadcrumbs | to_json_for_prop }}"
+            client:only />
     </body>
 </html>