Split components into object-metadata and object-record (#2425)

* Split components into object-metadata and object-record

* Fix seed

front/src/modules/object-metadata/components/ApolloMetadataClientProvider.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable no-console */
+import { useMemo } from 'react';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { useRecoilState } from 'recoil';
+
+import { tokenPairState } from '@/auth/states/tokenPairState';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
+
+import { ApolloMetadataClientContext } from '../context/ApolloClientMetadataContext';
+
+export const ApolloMetadataClientProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [tokenPair] = useRecoilState(tokenPairState);
+
+  const apolloMetadataClient = useMemo(() => {
+    if (tokenPair?.accessToken.token) {
+      return new ApolloClient({
+        uri: `${REACT_APP_SERVER_BASE_URL}/metadata`,
+        cache: new InMemoryCache(),
+        headers: {
+          Authorization: `Bearer ${tokenPair.accessToken.token}`,
+        },
+      });
+    } else {
+      return null;
+    }
+  }, [tokenPair]);
+
+  return (
+    <ApolloMetadataClientContext.Provider value={apolloMetadataClient}>
+      {children}
+    </ApolloMetadataClientContext.Provider>
+  );
+};

front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx

@@ -0,0 +1,42 @@
+import { useNavigate } from 'react-router-dom';
+
+import { Icon123 } from '@/ui/input/constants/icons';
+import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
+import NavItem from '@/ui/navigation/navbar/components/NavItem';
+
+import { useFindManyObjectMetadataItems } from '../hooks/useFindManyObjectMetadataItems';
+
+export const ObjectMetadataNavItems = () => {
+  const { objectMetadataItems } = useFindManyObjectMetadataItems();
+
+  const navigate = useNavigate();
+  const { icons } = useLazyLoadIcons();
+
+  return (
+    <>
+      {objectMetadataItems
+        .filter(
+          (objectMetadataItem) =>
+            objectMetadataItem.isActive &&
+            !objectMetadataItem.namePlural.endsWith('V2'),
+        )
+        .map((objectMetadataItem) => {
+          return (
+            <NavItem
+              key={objectMetadataItem.id}
+              label={objectMetadataItem.labelPlural}
+              to={`/objects/${objectMetadataItem.namePlural}`}
+              Icon={
+                objectMetadataItem.icon
+                  ? icons[objectMetadataItem.icon]
+                  : Icon123
+              }
+              onClick={() => {
+                navigate(`/objects/${objectMetadataItem.namePlural}`);
+              }}
+            />
+          );
+        })}
+    </>
+  );
+};