feat(ui): move moderation header to ui layeur

packages/~/moderations/api/package.json

@@ -28,6 +28,7 @@
     "@~/moncomptepro.lib": "workspace:*",
     "@~/organizations.repository": "workspace:*",
     "@~/organizations.ui": "workspace:*",
+    "@~/users.lib": "workspace:*",
     "@~/zammad.lib": "workspace:*",
     "await-to-js": "3.0.0",
     "drizzle-orm": "0.33.0",

packages/~/moderations/api/src/:id/Actions.tsx

@@ -2,11 +2,11 @@
 
 import { button } from "@~/app.ui/button";
 import { hx_urls } from "@~/app.urls";
+import { MessageInfo } from "@~/moderations.ui/MessageInfo";
+import { usePageRequestContext } from "./context";
 import { Desicison } from "./Desicison";
 import { Member_Invalid } from "./Member_Invalid";
 import { Member_Valid } from "./Member_Valid";
-import { MessageInfo } from "./MessageInfo";
-import { usePageRequestContext } from "./context";
 
 //
 
@@ -27,7 +27,7 @@ export async function Moderation_Actions() {
         Actions de modération <small class="fr-badge fr-badge--new">beta</small>{" "}
       </h2>
 
-      <MessageInfo />
+      <MessageInfo moderation={moderation} />
 
       <hr class="bg-none" />
       {moderation.moderated_at ? (

packages/~/moderations/api/src/:id/email/page/index.tsx

@@ -1,6 +1,6 @@
 //
 
-import Crisp from "@~/moderations.ui/Crisp";
+import { Crisp } from "@~/moderations.ui/Crisp";
 import { FindCorrespondingEmail } from "@~/moderations.ui/FindCorrespondingEmail";
 import { match, P } from "ts-pattern";
 import { usePageRequestContext } from "./context";

packages/~/moderations/api/src/:id/page.tsx

@@ -4,13 +4,13 @@ import { hx_trigger_from_body } from "@~/app.core/htmx";
 import { button } from "@~/app.ui/button";
 import { hx_urls, urls } from "@~/app.urls";
 import { MODERATION_EVENTS } from "@~/moderations.lib/event";
+import { Header } from "@~/moderations.ui/Header";
 import { About as About_Organization } from "@~/organizations.ui/info/About";
 import { Investigation as Investigation_Organization } from "@~/organizations.ui/info/Investigation";
 import { getContext } from "hono/context-storage";
 import { About_User, Investigation_User } from "./About_User";
 import { Moderation_Actions } from "./Actions";
 import { Domain_Organization } from "./Domain_Organization";
-import { Header } from "./Header";
 import { Members_Of_Organization_Table } from "./Members_Of_Organization_Table";
 import { Moderation_Exchanges } from "./Moderation_Exchanges";
 import { Organizations_Of_User_Table } from "./Organizations_Of_User_Table";
@@ -52,7 +52,9 @@ export default async function Moderation_Page() {
 
       <hr class="bg-none pt-6" />
 
-      <Header />
+      <Header.Provier value={{ moderation }}>
+        <Header />
+      </Header.Provier>
 
       <hr class="my-12" />
 

packages/~/moderations/lib/src/moderation_type.mapper.ts

@@ -22,3 +22,18 @@ export function moderation_type_to_title(type: string) {
     .with("organization_join_block", () => "A traiter")
     .otherwise(() => "⁉️ " + type);
 }
+
+export function moderation_type_to_verb_in_sentence(type: string) {
+  return match(type as Moderation_Type)
+    .with("ask_for_sponsorship", () => "demande un sponsorship")
+    .with(
+      "big_organization_join",
+      () => "a rejoint l'organisation de plus de 50 employés",
+    )
+    .with(
+      "non_verified_domain",
+      () => "a rejoint une organisation avec un domain non vérifié  ",
+    )
+    .with("organization_join_block", () => "veut rejoindre l'organisation")
+    .otherwise((type) => `veut effectuer une action inconnue (type ${type})`);
+}

packages/~/moderations/lib/src/usecase/GetModerationHeader.ts

@@ -0,0 +1,60 @@
+//
+
+import { NotFoundError } from "@~/app.core/error";
+import type { MonCompteProDatabaseCradle } from "@~/moncomptepro.database";
+
+export function GetModerationHeader({ pg }: MonCompteProDatabaseCradle) {
+  return async function get_moderation_header(id: number) {
+    const moderation = await pg.query.moderations.findFirst({
+      columns: {
+        comment: true,
+        id: true,
+        moderated_at: true,
+        moderated_by: true,
+        type: true,
+      },
+      where: (table, { eq }) => eq(table.id, id),
+      with: {
+        organization: {
+          columns: {
+            //     cached_activite_principale: true,
+            //     cached_adresse: true,
+            //     cached_code_postal: true,
+            //     cached_est_active: true,
+            //     cached_etat_administratif: true,
+            //     cached_libelle_activite_principale: true,
+            //     cached_libelle_categorie_juridique: true,
+            //     cached_libelle_tranche_effectif: true,
+            cached_libelle: true,
+            //     cached_nom_complet: true,
+            //     cached_tranche_effectifs: true,
+            //     created_at: true,
+            id: true,
+            //     siret: true,
+            //     updated_at: true,
+          },
+        },
+        user: {
+          columns: {
+            // created_at: true,
+            email: true,
+            family_name: true,
+            given_name: true,
+            id: true,
+            // job: true,
+            // last_sign_in_at: true,
+            // phone_number: true,
+            // sign_in_count: true,
+          },
+        },
+      },
+    });
+    if (!moderation) throw new NotFoundError("Moderaion not found.");
+    return moderation;
+  };
+}
+
+export type GetModerationHeaderHandler = ReturnType<typeof GetModerationHeader>;
+export type GetModerationHeaderOutput = Awaited<
+  ReturnType<GetModerationHeaderHandler>
+>;

packages/~/moderations/ui/package.json

@@ -3,15 +3,24 @@
   "version": "1.0.0",
   "private": true,
   "type": "module",
+  "imports": {
+    "#ui/*": {
+      "types": "./src/*/index.ts",
+      "default": "./src/*/index.ts"
+    }
+  },
   "exports": {
     "./*": {
-      "default": "./src/*.tsx"
+      "types": "./src/*/index.ts",
+      "default": "./src/*/index.ts"
     }
   },
   "dependencies": {
     "@~/app.ui": "workspace:*",
     "@~/app.urls": "workspace:*",
     "@~/organizations.lib": "workspace:*",
+    "@~/users.lib": "workspace:*",
+    "@~/moderations.lib": "workspace:*",
     "hono": "4.6.3",
     "tailwind-variants": "0.2.1",
     "ts-pattern": "5.4.0"

packages/~/moderations/ui/src/Crisp.tsx → packages/~/moderations/ui/src/Crisp/Crisp.tsx

@@ -20,7 +20,7 @@ const context = createContext<Values>(null as any);
 
 //
 
-export default async function Crisp() {
+export async function Crisp() {
   const { describedby } = { describedby: "" };
 
   return (

packages/~/moderations/ui/src/Crisp/index.ts

@@ -0,0 +1,3 @@
+//
+
+export * from "./Crisp";

packages/~/moderations/ui/src/FindCorrespondingEmail/index.ts

@@ -0,0 +1,3 @@
+//
+
+export * from "./FindCorrespondingEmail";

packages/~/moderations/ui/src/Header/Header.test.tsx

@@ -0,0 +1,32 @@
+//
+
+import { renderHTML } from "@~/app.ui/testing";
+import { expect, test } from "bun:test";
+import { Header } from "./Header";
+
+test("render header section", async () => {
+  expect(
+    await renderHTML(
+      <Header.Provier
+        value={{
+          moderation: {
+            comment: null,
+            moderated_at: null,
+            moderated_by: null,
+            id: 42,
+            organization: { cached_libelle: "🦄 libelle", id: 43 },
+            type: "organization_join_block",
+            user: {
+              email: "[email protected]",
+              family_name: "Pony",
+              given_name: "Adora",
+              id: 44,
+            },
+          },
+        }}
+      >
+        <Header />
+      </Header.Provier>,
+    ),
+  ).toMatchSnapshot();
+});

packages/~/moderations/api/src/:id/Header.tsx → packages/~/moderations/ui/src/Header/Header.tsx

@@ -1,22 +1,26 @@
 //
 
+import { MessageInfo } from "#ui/MessageInfo";
 import { button } from "@~/app.ui/button";
 import { callout } from "@~/app.ui/callout";
 import { notice } from "@~/app.ui/notice";
 import { LocalTime } from "@~/app.ui/time/LocalTime";
 import { hx_urls } from "@~/app.urls";
 import { moderation_type_to_emoji } from "@~/moderations.lib/moderation_type.mapper";
-import type { Moderation } from "@~/moncomptepro.database";
+import type { GetModerationHeaderOutput } from "@~/moderations.lib/usecase/GetModerationHeader";
 import { raw } from "hono/html";
-import { MessageInfo } from "./MessageInfo";
-import { usePageRequestContext } from "./context";
+import { createContext, useContext } from "hono/jsx";
 
 //
 
+interface Values {
+  moderation: GetModerationHeaderOutput;
+}
+const context = createContext<Values>(null as any);
+
+//
 export async function Header() {
-  const {
-    var: { moderation },
-  } = usePageRequestContext();
+  const { moderation } = useContext(context);
 
   return (
     <header>
@@ -34,7 +38,7 @@ export async function Header() {
 
       <hr class="bg-none" />
 
-      <ModerationCallout moderation={moderation} />
+      <ModerationCallout />
 
       <hr class="bg-none" />
 
@@ -52,8 +56,8 @@ export async function Header() {
             id: moderation.id.toString(),
           },
           query: {
-            organization_id: moderation.organization_id.toString(),
-            user_id: moderation.user_id.toString(),
+            organization_id: moderation.organization.id.toString(),
+            user_id: moderation.user.id.toString(),
           },
         })}
         hx-trigger="load"
@@ -63,32 +67,33 @@ export async function Header() {
     </header>
   );
 }
+Header.Provier = context.Provider;
 
 function State_Badge() {
-  const {
-    var: { moderation },
-  } = usePageRequestContext();
+  const { moderation } = useContext(context);
   const is_treated = moderation.moderated_at !== null;
   if (is_treated) return <p class="fr-badge fr-badge--success">Traité</p>;
   return <p class="fr-badge fr-badge--new">A traiter</p>;
 }
 
 function Info() {
+  const { moderation } = useContext(context);
   const { base, container, body, title } = notice({ type: "info" });
   return (
     <div class={base()}>
       <div class={container()}>
         <div class={body()}>
-          <p class={title()}>
-            <MessageInfo />
-          </p>
+          <div class={title()}>
+            <MessageInfo moderation={moderation} />
+          </div>
         </div>
       </div>
     </div>
   );
 }
 
-async function ModerationCallout({ moderation }: { moderation: Moderation }) {
+async function ModerationCallout() {
+  const { moderation } = useContext(context);
   if (!moderation.moderated_at) return raw``;
 
   const { base, text, title } = callout({ intent: "success" });
@@ -125,11 +130,7 @@ async function ModerationCallout({ moderation }: { moderation: Moderation }) {
 }
 
 function LastComment() {
-  const {
-    var: {
-      moderation: { comment },
-    },
-  } = usePageRequestContext();
+  const { comment } = useContext(context).moderation;
   if (!comment) {
     return raw``;
   }
@@ -139,11 +140,7 @@ function LastComment() {
 }
 
 function Comments() {
-  const {
-    var: {
-      moderation: { comment },
-    },
-  } = usePageRequestContext();
+  const { comment } = useContext(context).moderation;
   const parsed_comment = parse_comment(comment);
   return (
     <details>