From 4d082d64012a3974d1737f8e022602eac9b2ec8a Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Sat, 26 Nov 2022 19:27:45 +0000
Subject: [PATCH] fix modeldetail bugs

---
 .../Components/ModelDetail/ModelDetail.tsx    | 27 +++++++------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/CommonUI/src/Components/ModelDetail/ModelDetail.tsx b/CommonUI/src/Components/ModelDetail/ModelDetail.tsx
index 4aef275d72..9c9880a6ae 100644
--- a/CommonUI/src/Components/ModelDetail/ModelDetail.tsx
+++ b/CommonUI/src/Components/ModelDetail/ModelDetail.tsx
@@ -35,21 +35,11 @@ const ModelDetail: Function = <TBaseModel extends BaseModel>(
     const [isLoading, setIsLoading] = useState<boolean>(true);
     const [error, setError] = useState<string>('');
     const [item, setItem] = useState<TBaseModel | null>(null);
-    const [model, setModal] = useState<TBaseModel | null>(null);
-
-    useEffect(() => {
-        if (props.modelType) {
-            setModal(new props.modelType());
-        }
-    },[props.modelType]);
 
     const [onBeforeFetchData, setOnBeforeFetchData] = useState<
         JSONObject | undefined
     >(undefined);
 
-    useEffect(() => {
-        fetchItem();
-    }, [props.refresher]);
 
     const getSelectFields: Function = (): Select<TBaseModel> => {
         const select: Select<TBaseModel> = {};
@@ -74,14 +64,14 @@ const ModelDetail: Function = <TBaseModel extends BaseModel>(
                 ? (Object.keys(field.field)[0] as string)
                 : null;
 
-            if (key && model?.isFileColumn(key)) {
+            if (key && new props.modelType()?.isFileColumn(key)) {
                 (populate as JSONObject)[key] = {
                     file: true,
                     _id: true,
                     type: true,
                     name: true,
                 };
-            } else if (key && model?.isEntityColumn(key)) {
+            } else if (key && new props.modelType()?.isEntityColumn(key)) {
                 (populate as JSONObject)[key] = (field.field as any)[key];
             }
         }
@@ -96,7 +86,7 @@ const ModelDetail: Function = <TBaseModel extends BaseModel>(
             PermissionUtil.getAllPermissions();
 
         const accessControl: Dictionary<ColumnAccessControl> =
-            model?.getColumnAccessControlForAllColumns() || {};
+        new props.modelType()?.getColumnAccessControlForAllColumns() || {};
 
         const fieldsToSet: Array<Field<TBaseModel>> = [];
 
@@ -161,6 +151,7 @@ const ModelDetail: Function = <TBaseModel extends BaseModel>(
     }, [onBeforeFetchData]);
 
     const fetchItem: Function = async (): Promise<void> => {
+
         // get item.
         setIsLoading(true);
         props.onLoadingChange && props.onLoadingChange(true);
@@ -181,9 +172,9 @@ const ModelDetail: Function = <TBaseModel extends BaseModel>(
             if (!item) {
                 setError(
                     `Cannot load ${(
-                        model?.singularName || 'item'
+                        new props.modelType()?.singularName || 'item'
                     ).toLowerCase()}. It could be because you don't have enough permissions to read this ${(
-                        model?.singularName || 'item'
+                        new props.modelType()?.singularName || 'item'
                     ).toLowerCase()}.`
                 );
             }
@@ -210,8 +201,10 @@ const ModelDetail: Function = <TBaseModel extends BaseModel>(
     };
 
     useEffect(() => {
-        fetchItem();
-    }, []);
+        if (props.modelId && props.modelType) {
+            fetchItem();
+        }
+    }, [props.modelId, props.refresher, props.modelType]);
 
     if (isLoading) {
         return (