feat(inferencer): Ability to transform/ignore fields in inferencer co…

…mponents (refinedev#3173) * refactor: update component naming convention * refactor(inferencer): log relation fetch attempts * chore(examples): update multi tenancy example * feat(inferencer): add `fieldTransformer` prop to inferencers * chore(inferencer): remove unused param * feat(inferencer): try to fetch relation from basic fields * chore: add changeset * chore: update snapshots
euoia · Dec 9, 2022 · 15402d3 · 15402d3
1 parent cb23844
commit 15402d3
Show file tree

Hide file tree

Showing 21 changed files with 1,052 additions and 448 deletions.
diff --git a/.changeset/tasty-cameras-smell.md b/.changeset/tasty-cameras-smell.md
@@ -0,0 +1,7 @@
+---
+"@pankod/refine-inferencer": minor
+---
+
+- Added `fieldTransformer` prop to inferencer components to let users transform or hide the field to be rendered.
+- Hide networks errors caused by the relation detection process.
+- Added the ability to detect relations from basic types like `"text"` and `"number"`.
diff --git a/examples/multi-tenancy/appwrite/src/authProvider.ts b/examples/multi-tenancy/appwrite/src/authProvider.ts
@@ -1,24 +1,29 @@
+import { AppwriteException } from "@pankod/refine-appwrite";
 import { AuthProvider } from "@pankod/refine-core";
 
-import { appwriteClient } from "utility";
+import { account } from "utility";
 
 export const authProvider: AuthProvider = {
     login: async ({ email, password }) => {
         try {
-            await appwriteClient.account.createSession(email, password);
+            await account.createEmailSession(email, password);
             return Promise.resolve();
         } catch (e) {
-            return Promise.reject();
+            const { type, message, code } = e as AppwriteException;
+            return Promise.reject({
+                message,
+                name: `${code} - ${type}`,
+            });
         }
     },
     logout: async () => {
-        await appwriteClient.account.deleteSession("current");
+        await account.deleteSession("current");
 
         return "/";
     },
     checkError: () => Promise.resolve(),
     checkAuth: async () => {
-        const session = await appwriteClient.account.getSession("current");
+        const session = await account.getSession("current");
 
         if (session) {
             return Promise.resolve();
@@ -28,7 +33,7 @@ export const authProvider: AuthProvider = {
     },
     getPermissions: () => Promise.resolve(),
     getUserIdentity: async () => {
-        const user = await appwriteClient.account.get();
+        const user = await account.get();
 
         if (user) {
             return user;

diff --git a/examples/multi-tenancy/appwrite/src/components/product/create.tsx b/examples/multi-tenancy/appwrite/src/components/product/create.tsx
@@ -11,7 +11,7 @@ import {
     RcFile,
 } from "@pankod/refine-antd";
 
-import { appwriteClient, normalizeFile } from "utility";
+import { appwriteClient, normalizeFile, storage } from "utility";
 import { StoreContext } from "context/store";
 import { useContext } from "react";
 
@@ -90,19 +90,17 @@ export const CreateProduct: React.FC<CreateProductProps> = ({
                                         const rcFile = file as RcFile;
 
                                         const { $id } =
-                                            await appwriteClient.storage.createFile(
+                                            await storage.createFile(
                                                 "default",
                                                 rcFile.name,
                                                 rcFile,
                                                 ["role:all"],
-                                                ["role:all"],
                                             );
 
-                                        const url =
-                                            appwriteClient.storage.getFileView(
-                                                "default",
-                                                $id,
-                                            );
+                                        const url = storage.getFileView(
+                                            "default",
+                                            $id,
+                                        );
 
                                         onSuccess?.(
                                             { url },

diff --git a/examples/multi-tenancy/appwrite/src/components/product/edit.tsx b/examples/multi-tenancy/appwrite/src/components/product/edit.tsx
@@ -8,7 +8,7 @@ import {
     RcFile,
 } from "@pankod/refine-antd";
 
-import { appwriteClient, normalizeFile } from "utility";
+import { normalizeFile, storage } from "utility";
 
 type EditProductProps = {
     modalProps: ModalProps;
@@ -70,20 +70,17 @@ export const EditProduct: React.FC<EditProductProps> = ({
                                 try {
                                     const rcFile = file as RcFile;
 
-                                    const { $id } =
-                                        await appwriteClient.storage.createFile(
-                                            "default",
-                                            rcFile.name,
-                                            rcFile,
-                                            ["role:all"],
-                                            ["role:all"],
-                                        );
+                                    const { $id } = await storage.createFile(
+                                        "default",
+                                        rcFile.name,
+                                        rcFile,
+                                        ["role:all"],
+                                    );
 
-                                    const url =
-                                        appwriteClient.storage.getFileView(
-                                            "default",
-                                            $id,
-                                        );
+                                    const url = storage.getFileView(
+                                        "default",
+                                        $id,
+                                    );
 
                                     onSuccess?.({ url }, new XMLHttpRequest());
                                 } catch (error) {

diff --git a/examples/multi-tenancy/appwrite/src/components/sider/index.tsx b/examples/multi-tenancy/appwrite/src/components/sider/index.tsx
@@ -4,8 +4,11 @@ import {
     ITreeMenu,
     CanAccess,
     useRouterContext,
+    useLogout,
+    useIsExistAuthentication,
+    useMenu,
 } from "@pankod/refine-core";
-import { AntdLayout, Menu, useMenu, Grid, Icons } from "@pankod/refine-antd";
+import { AntdLayout, Menu, Grid, Icons } from "@pankod/refine-antd";
 import { antLayoutSider, antLayoutSiderMobile } from "./styles";
 
 import { StoreSelect } from "components/select";
@@ -17,6 +20,8 @@ export const CustomSider: React.FC = () => {
     const { SubMenu } = Menu;
     const { menuItems, selectedKey } = useMenu();
     const breakpoint = Grid.useBreakpoint();
+    const { mutate: mutateLogout } = useLogout();
+    const isExistAuthentication = useIsExistAuthentication();
 
     const isMobile =
         typeof breakpoint.lg === "undefined" ? false : !breakpoint.lg;
@@ -66,6 +71,16 @@ export const CustomSider: React.FC = () => {
         });
     };
 
+    const logout = isExistAuthentication && (
+        <Menu.Item
+            key="logout"
+            onClick={() => mutateLogout()}
+            icon={<Icons.LogoutOutlined />}
+        >
+            Logout
+        </Menu.Item>
+    );
+
     return (
         <AntdLayout.Sider
             collapsible
@@ -89,6 +104,7 @@ export const CustomSider: React.FC = () => {
                     <StoreSelect />
                 </Menu.Item>
                 {renderTreeView(menuItems, selectedKey)}
+                {logout}
             </Menu>
         </AntdLayout.Sider>
     );

diff --git a/examples/multi-tenancy/appwrite/src/utility/appwriteClient.ts b/examples/multi-tenancy/appwrite/src/utility/appwriteClient.ts
@@ -1,4 +1,4 @@
-import { Appwrite } from "@pankod/refine-appwrite";
+import { Account, Appwrite, Storage } from "@pankod/refine-appwrite";
 
 const APPWRITE_URL = "https://refine.appwrite.org/v1";
 const APPWRITE_PROJECT = "61caf74beffc8";
@@ -7,4 +7,7 @@ const appwriteClient = new Appwrite();
 
 appwriteClient.setEndpoint(APPWRITE_URL).setProject(APPWRITE_PROJECT);
 
-export { appwriteClient };
+const account = new Account(appwriteClient);
+const storage = new Storage(appwriteClient);
+
+export { appwriteClient, account, storage };
diff --git a/packages/inferencer/src/create-inferencer/index.tsx b/packages/inferencer/src/create-inferencer/index.tsx
@@ -3,6 +3,7 @@ import { useResource } from "@pankod/refine-core";
 
 import {
     CreateInferencer,
+    InferencerComponentProps,
     InferencerResultComponent,
     InferField,
 } from "@/types";
@@ -54,9 +55,11 @@ export const createInferencer: CreateInferencer = ({
 
     const Inferencer = ({
         resourceName,
+        fieldTransformer,
         id,
     }: {
         resourceName?: string;
+        fieldTransformer?: InferencerComponentProps["fieldTransformer"];
         id?: string | number;
     }) => {
         const { resource, resources } = useResource({
@@ -83,17 +86,27 @@ export const createInferencer: CreateInferencer = ({
                     })
                     .filter(Boolean);
 
-                return transform(
+                const transformed = transform(
                     inferred as InferField[],
                     resources,
                     resource,
                     record,
                     infer,
                 );
+
+                const customTransformedFields = fieldTransformer
+                    ? transformed.flatMap((field) => {
+                          const result = fieldTransformer(field);
+
+                          return result ? [result] : [];
+                      })
+                    : transformed;
+
+                return customTransformedFields;
             }
 
             return [];
-        }, [record, resources, resource]);
+        }, [record, resources, resource, fieldTransformer]);
 
         const {
             fields: results,
@@ -155,10 +168,12 @@ export const createInferencer: CreateInferencer = ({
     const InferencerComponent: InferencerResultComponent = ({
         name,
         resource,
+        fieldTransformer,
         id,
     }) => {
         return (
             <Inferencer
+                fieldTransformer={fieldTransformer}
                 resourceName={resource ?? name}
                 key={resource ?? name}
                 id={id}

diff --git a/packages/inferencer/src/field-transformers/basic-to-relation.ts b/packages/inferencer/src/field-transformers/basic-to-relation.ts
@@ -0,0 +1,65 @@
+import { FieldTransformer, InferField } from "@/types";
+
+export const basicToRelation: FieldTransformer = (
+    fields,
+    resources,
+    resource,
+    record,
+) => {
+    const mapped: Array<InferField> = fields.map((field) => {
+        if (
+            !field.relation &&
+            (field.type === "text" ||
+                field.type === "richtext" ||
+                field.type === "number") &&
+            !field.canRelation
+        ) {
+            // check if value is a valid id (regex)
+            // if multiple, check value by value
+            // take accessor into account (should be single only)
+            // valid id should be a valid uuid (meaning, lowercase alphanumeric with dashes)
+            const validUUIdRegex = /^[a-z0-9-]+$/;
+
+            const isValidUUID = (value: unknown) => {
+                return validUUIdRegex.test(`${value}`);
+            };
+
+            const isNotSelf = field.key.toLowerCase() !== "id";
+
+            const singleOrNoAccessor =
+                !field.accessor || typeof field.accessor === "string";
+
+            // in case of multiple accessors, we can't infer a relation
+            // or if the field is the id field
+            if (!singleOrNoAccessor || !isNotSelf) {
+                return field;
+            }
+
+            const valuesToCheck = field.multiple
+                ? (record[field.key] as unknown[])
+                : [record[field.key]];
+
+            const allValid = valuesToCheck.every((value) => {
+                return isValidUUID(
+                    field.accessor
+                        ? (value as Record<string, unknown>)[
+                              field.accessor as string
+                          ]
+                        : value,
+                );
+            });
+
+            if (allValid) {
+                return {
+                    ...field,
+                    canRelation: true,
+                };
+            }
+
+            return field;
+        }
+        return field;
+    });
+
+    return mapped;
+};
diff --git a/packages/inferencer/src/field-transformers/index.ts b/packages/inferencer/src/field-transformers/index.ts
@@ -1,3 +1,4 @@
+import { basicToRelation } from "./basic-to-relation";
 import { imageByKey } from "./image-by-key";
 import { relationByResource } from "./relation-by-resource";
 import { relationToFieldable } from "./relation-to-fieldable";
@@ -6,4 +7,5 @@ export const defaultTransformers = [
     imageByKey,
     relationByResource,
     relationToFieldable,
+    basicToRelation,
 ];