feat(@leav/ui): init an api call to get data

libs/ui/codegen.ts

@@ -12,7 +12,7 @@ const config: CodegenConfig = {
             [`${apiUrl}/graphql?key=${apiKey}`]: {}
         }
     ],
-    documents: ['src/(_queries|gqlFragments)/**/*.ts'],
+    documents: ['src/(_queries|gqlFragments)/**/*.ts', 'src/**/*.graphql'],
     generates: {
         'src/_gqlTypes/index.ts': {
             plugins: [

libs/ui/src/_gqlTypes/index.ts

@@ -1324,6 +1324,13 @@ export type AddViewMutationVariables = Exact<{
 
 export type AddViewMutation = { saveView: { id: string, shared: boolean, label: any, description?: any | null, color?: string | null, display: { size: ViewSizes, type: ViewTypes }, created_by: { id: string, whoAmI: { id: string, label?: string | null, library: { id: string } } }, filters?: Array<{ field?: string | null, value?: string | null, condition?: RecordFilterCondition | null, operator?: RecordFilterOperator | null, tree?: { id: string, label?: any | null } | null }> | null, sort?: { field: string, order: SortOrder } | null, valuesVersions?: Array<{ treeId: string, treeNode: { id: string, record: { id: string, whoAmI: { id: string, label?: string | null, subLabel?: string | null, color?: string | null, preview?: IPreviewScalar | null, library: { id: string, label?: any | null } } } } }> | null, settings?: Array<{ name: string, value?: any | null }> | null } };
 
+export type ExplorerQueryVariables = Exact<{
+  libraryId: Scalars['ID'];
+}>;
+
+
+export type ExplorerQuery = { records: { list: Array<{ id: string, whoAmI: { label?: string | null, subLabel?: string | null, preview?: IPreviewScalar | null, id: string, color?: string | null, library: { id: string } } }> } };
+
 export const RecordIdentityFragmentDoc = gql`
     fragment RecordIdentity on Record {
   id
@@ -3861,4 +3868,51 @@ export function useAddViewMutation(baseOptions?: Apollo.MutationHookOptions<AddV
       }
 export type AddViewMutationHookResult = ReturnType<typeof useAddViewMutation>;
 export type AddViewMutationResult = Apollo.MutationResult<AddViewMutation>;
-export type AddViewMutationOptions = Apollo.BaseMutationOptions<AddViewMutation, AddViewMutationVariables>;
+export type AddViewMutationOptions = Apollo.BaseMutationOptions<AddViewMutation, AddViewMutationVariables>;
+export const ExplorerDocument = gql`
+    query Explorer($libraryId: ID!) {
+  records(library: $libraryId) {
+    list {
+      id
+      whoAmI {
+        label
+        subLabel
+        preview
+        id
+        color
+        library {
+          id
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useExplorerQuery__
+ *
+ * To run a query within a React component, call `useExplorerQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useExplorerQuery({
+ *   variables: {
+ *      libraryId: // value for 'libraryId'
+ *   },
+ * });
+ */
+export function useExplorerQuery(baseOptions: Apollo.QueryHookOptions<ExplorerQuery, ExplorerQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerQuery, ExplorerQueryVariables>(ExplorerDocument, options);
+      }
+export function useExplorerLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerQuery, ExplorerQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerQuery, ExplorerQueryVariables>(ExplorerDocument, options);
+        }
+export type ExplorerQueryHookResult = ReturnType<typeof useExplorerQuery>;
+export type ExplorerLazyQueryHookResult = ReturnType<typeof useExplorerLazyQuery>;
+export type ExplorerQueryResult = Apollo.QueryResult<ExplorerQuery, ExplorerQueryVariables>;

libs/ui/src/components/Explorer/DataView.tsx

@@ -2,8 +2,22 @@
 // This file is released under LGPL V3
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
 import {FunctionComponent} from 'react';
-import {IDataGroupedFilteredSorted} from '_ui/components/Explorer/types';
+import {KitIdCard, KitTag} from 'aristid-ds';
+import {IDataGroupedFilteredSorted} from './types';
 
-export const DataView: FunctionComponent<{data: IDataGroupedFilteredSorted[]}> = ({data}) => (
-    <div>Display data as list</div>
+export const DataView: FunctionComponent<{dataGroupedFilteredSorted: IDataGroupedFilteredSorted<'whoAmI'>}> = ({
+    dataGroupedFilteredSorted
+}) => (
+    <ul>
+        {dataGroupedFilteredSorted.map(({itemId, value}) => (
+            <li key={itemId} style={{display: 'flex', gap: '16px', alignItems: 'center', marginBottom: '8px'}}>
+                <KitTag idCardProps={{description: itemId}} /> |
+                <KitIdCard
+                    avatarProps={{label: value.label ?? '-'}}
+                    title={value.label ?? '-'}
+                    description={value.subLabel ?? '-'}
+                />
+            </li>
+        ))}
+    </ul>
 );

libs/ui/src/components/Explorer/Explorer.tsx

@@ -1,18 +1,12 @@
 // Copyright LEAV Solutions 2017
 // This file is released under LGPL V3
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {FunctionComponent, useState} from 'react';
-import {IDataGroupedFilteredSorted} from '_ui/components/Explorer/types';
+import {FunctionComponent} from 'react';
 import {DataView} from './DataView';
+import {useExplorerData} from './useExplorerData';
 
 export const Explorer: FunctionComponent<{library: string}> = ({library}) => {
-    // TODO: make API call
-    const [data, setData] = useState<IDataGroupedFilteredSorted[] | null>(null);
+    const {data, loading} = useExplorerData(library);
 
-    return (
-        <div>
-            This is the Explorer! on library {library}
-            {data === null ? 'Loading...' : <DataView data={data} />}
-        </div>
-    );
+    return <div>{loading ? 'Loading...' : <DataView dataGroupedFilteredSorted={data ?? []} />}</div>;
 };

libs/ui/src/components/Explorer/explorerQuery.graphql

@@ -0,0 +1,17 @@
+query Explorer($libraryId: ID!) {
+    records(library: $libraryId) {
+        list {
+            id
+            whoAmI {
+                label
+                subLabel
+                preview
+                id
+                color
+                library {
+                    id
+                }
+            }
+        }
+    }
+}

libs/ui/src/components/Explorer/tsconfig.json

@@ -0,0 +1,6 @@
+{
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "strictNullChecks": true,
+    }
+}

libs/ui/src/components/Explorer/types.ts

@@ -1,8 +1,10 @@
 // Copyright LEAV Solutions 2017
 // This file is released under LGPL V3
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-export interface IDataGroupedFilteredSorted {
+import {ExplorerQuery} from '_ui/_gqlTypes';
+
+export type IDataGroupedFilteredSorted<Field extends keyof ExplorerQuery['records']['list'][number]> = Array<{
     libraryId: string;
     itemId: string;
-    value: Record<string, unknown>;
-}
+    value: Required<ExplorerQuery['records']['list'][number][Field]>;
+}>;

libs/ui/src/components/Explorer/useExplorerData.ts

@@ -0,0 +1,27 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import {IDataGroupedFilteredSorted} from './types';
+import {ExplorerQuery, useExplorerQuery} from '_ui/_gqlTypes';
+
+const _mapping = (data: ExplorerQuery, libraryId: string): IDataGroupedFilteredSorted<'whoAmI'> =>
+    data.records.list.map(({id, whoAmI}) => ({
+        libraryId,
+        itemId: id,
+        value: {
+            label: null,
+            subLabel: null,
+            color: null,
+            preview: null,
+            ...whoAmI
+        }
+    }));
+
+export const useExplorerData = (libraryId: string) => {
+    const {data, loading} = useExplorerQuery({variables: {libraryId}});
+
+    return {
+        data: data !== undefined ? _mapping(data, libraryId) : null,
+        loading
+    };
+};