Components: Connect List DID to backend

src/app/listdids/page.tsx

@@ -1,20 +1,57 @@
 'use client';
 import { ListDID as ListDIDStory } from "@/component-library/components/Pages/ListDID/ListDID";
-import { DIDMeta, DIDType } from "@/lib/core/entity/rucio";
-import { DIDLong } from "@/lib/core/entity/rucio"
-import { DIDName } from '@/lib/infrastructure/data/view-model/create-rule'
+import { DIDType } from "@/lib/core/entity/rucio";
+import { DIDMetaViewModel, DIDViewModel } from "@/lib/infrastructure/data/view-model/did";
 import useComDOM from "@/lib/infrastructure/hooks/useComDOM";
-import { HTTPRequest } from "@/lib/common/http";
+import { HTTPRequest, prepareRequestArgs } from "@/lib/common/http";
 import { useEffect, useState } from "react";
 import { createDIDMeta } from "test/fixtures/table-fixtures";
 
 
 export default function ListDID() {
 
-    const [didMetaQueryResponse, setDIDMetaQueryResponse] = useState<DIDMeta>({} as DIDMeta)
-    const didMetaQuery = (did: DIDName) => { setDIDMetaQueryResponse(createDIDMeta()) }
+    const [didMetaQueryResponse, setDIDMetaQueryResponse] = useState<DIDMetaViewModel>({} as DIDMetaViewModel)
+    const didMetaQuery = async (scope: string, name: string) => {
+        const req: HTTPRequest = {
+            method: "GET",
+            url: new URL('http://localhost:3000/api/didmeta'),
+            params: {
+                "scope": scope,
+                "name": name 
+            },
+            headers: new Headers({
+                'Content-Type': 'application/json',
+            } as HeadersInit)
+        }
+        const {url, requestArgs} = prepareRequestArgs(req)
+        console.log(url)
+        const res = await fetch(url, {
+            method: "GET",
+            headers: new Headers({
+                'Content-Type': 'application/json',
+            } as HeadersInit)            
+        })
+        // console.log(await res.json())
+
+        setDIDMetaQueryResponse({status: 'success', ... await res.json()})
+    }
+
+    const didQuery = async (query: string, type: DIDType) => {
+        const request: HTTPRequest = {
+            url: new URL('http://localhost:3000/api/dids'),
+            method: 'POST',
+            headers: new Headers({
+                'Content-Type': 'application/json',
+            } as HeadersInit),
+            body: {
+                "query": query,
+                "type": type
+            },
+        }
+        await DIDSearchComDOM.setRequest(request)
+    }
 
-    const DIDSearchComDOM = useComDOM<DIDLong>(
+    const DIDSearchComDOM = useComDOM<DIDViewModel>(
         'list-did-query',
         [],
         false,
@@ -23,7 +60,7 @@ export default function ListDID() {
         true
     )
     useEffect(() => {
-        setDIDMetaQueryResponse(createDIDMeta())
+        setDIDMetaQueryResponse({status: 'success', ...createDIDMeta()})
     }, [])
     useEffect(() => {
         const setRequest = async () => {
@@ -45,6 +82,7 @@ export default function ListDID() {
     return (
         <ListDIDStory
             comdom={DIDSearchComDOM}
+            didQuery={didQuery}
             didMetaQuery={didMetaQuery}  // TODO: implement
             didMetaQueryResponse={didMetaQueryResponse}  // TODO: implement
         />

src/component-library/components/Pages/CreateRule/CreateRule.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Button } from '../../Button/Button';
-import { CheckBox } from '../../Checkbox/Checkbox.stories';
+import { Checkbox } from '../../Button/Checkbox';
 import { Timeline } from '../../Timeline/Timeline';
 import { Collapsible } from '../../Helpers/Collapsible';
 import { Tabs } from '../../Tabs/Tabs';
@@ -337,11 +337,11 @@ export const CreateRule = (
                             askApproval={Page1State.askForApproval}
                         />
                         <div>
-                            <CheckBox
+                            <Checkbox
                                 label="Ask for Approval"
                                 type="checkbox"
-                                handleChange={(event: any) => { setPage1State({ ...Page1State, askForApproval: event.target.checked }) }}
-                                isChecked={Page1State.askForApproval}
+                                onChange={(event: any) => { setPage1State({ ...Page1State, askForApproval: event.target.checked }) }}
+                                checked={Page1State.askForApproval}
                             />
                         </div>
                     </div>
@@ -368,11 +368,11 @@ export const CreateRule = (
                                 />
                             </div>
                             <div className="w-full">
-                                <CheckBox
+                                <Checkbox
                                     type="checkbox"
                                     label="Enable Notifications"
-                                    handleChange={(event: any) => { setPage2State({ ...Page2State, enableNotifications: event.target.checked }) }}
-                                    isChecked={Page2State.enableNotifications}
+                                    onChange={(event: any) => { setPage2State({ ...Page2State, enableNotifications: event.target.checked }) }}
+                                    checked={Page2State.enableNotifications}
                                 />
                             </div>
                         </div>
@@ -398,11 +398,11 @@ export const CreateRule = (
                                         />
                                     </div>
                                     <div className="">
-                                        <CheckBox
+                                        <Checkbox
                                             type="checkbox"
                                             label="Asynchronous Mode"
-                                            handleChange={(event: any) => { setPage2State({ ...Page2State, asynchronousMode: event.target.checked }) }}
-                                            isChecked={Page2State.asynchronousMode}
+                                            onChange={(event: any) => { setPage2State({ ...Page2State, asynchronousMode: event.target.checked }) }}
+                                            checked={Page2State.asynchronousMode}
                                         />
                                     </div>
                                     <div className="w-full">

src/component-library/components/Pages/ListDID/DIDMetaView.stories.tsx

@@ -10,6 +10,6 @@ export default {
 const Template: StoryFn<typeof DM> = (args) => <DM {...args} />;
 export const DIDMetaView = Template.bind({});
 DIDMetaView.args = {
-    data: createDIDMeta(),
+    data: {status: "success", ...createDIDMeta()},
     show: true,
 }

src/component-library/components/Pages/ListDID/DIDMetaView.tsx

@@ -1,14 +1,14 @@
-import { DIDMeta } from "@/lib/core/entity/rucio"
 import { DIDTypeTag } from "../../Tags/DIDTypeTag"
 import { BoolTag } from "../../Tags/BoolTag"
 import { twMerge } from "tailwind-merge"
 import { AvailabilityTag } from "../../Tags/AvailabilityTag"
 import { Number } from "../../Text/Content/Number"
+import { DIDMetaViewModel } from "@/lib/infrastructure/data/view-model/did"
 var format = require("date-format")
 
 export const DIDMetaView = (
     props: {
-        data: DIDMeta
+        data: DIDMetaViewModel
         show: boolean
         horizontal?: boolean
     }

src/component-library/components/Pages/ListDID/ListDID.stories.tsx

@@ -1,5 +1,3 @@
-import { DIDName, DIDSearchResponse } from '@/lib/infrastructure/data/view-model/create-rule';
-
 import { StoryFn, Meta } from '@storybook/react';
 import { ListDID as LD } from './ListDID';
 import { createDIDMeta, createDID, mockUseComDOM } from 'test/fixtures/table-fixtures';
@@ -14,6 +12,6 @@ const Template: StoryFn<typeof LD> = (args) => <LD {...args} />;
 export const ListDID = Template.bind({});
 ListDID.args = {
     comdom: mockUseComDOM(Array.from({length: 100}, () => createDID())),
-    didMetaQuery: (did: DIDName) => { },
-    didMetaQueryResponse: createDIDMeta()
+    didMetaQuery: (scope: string, name: string) => { },
+    didMetaQueryResponse: {status: "success", ...createDIDMeta()}
 }