fix(component): Ensure table doesnt attempt to load page one again

ref:

Author: jon-nfc

src/components/Table.jsx

@@ -29,15 +29,14 @@ const Table = ({
 
     const API_SPLIT = String('api/v2')
 
-    const [loaded, setPageLoaded] = useState(false)
 
-    const [metadata, setMetaData] = useState(null);
+    const [metadata, setMetaData] = useState(loader_metadata);
 
     const [page_number_value, setPageNumberValue] = useState(1);
 
     const [page, setPage] = useState(0);
 
-    const [table_data, setTableData] = useState(null);
+    const [table_data, setTableData] = useState(loader_data);
 
     let collapsable_fields = []
 
@@ -54,7 +53,6 @@ const Table = ({
 
     useEffect(() => {
 
-        setPageLoaded(false)
         setMetaData(loader_metadata)
         setTableData(loader_data)
         setPageNumberValue(1)
@@ -84,7 +82,6 @@ const Table = ({
             }
         }
 
-        setPageLoaded(true)
 
     }, [
         // loader_metadata,
@@ -94,75 +91,65 @@ const Table = ({
 
     useEffect(() =>{
 
-        setPageLoaded(false)
-
         let url = null
 
-        if( page !== 0 ) {
+        if( page !== 0 ) { // Only run when not initial page
 
             url = data_url_path + '?page%5Bnumber%5D=' + String( page );
 
-        }else{
-
-            url = data_url_path;
-
-        }
-
-        apiFetch( url )
-            .then((result) => {
+            apiFetch( url )
+                .then((result) => {
 
 
-                if( result.status == 200 ) {
+                    if( result.status == 200 ) {
 
-                    if( result.api_metadata !== null ) {
+                        if( result.api_metadata !== null ) {
 
-                        setMetaData(result.api_metadata)
-    
-                    }
-    
-                    setTableData(result.api_page_data)
+                            setMetaData(result.api_metadata)
+        
+                        }
+        
+                        setTableData(result.api_page_data)
 
-                    if( Array(result.api_metadata.table_fields).length < 2 ) {
+                        if( Array(result.api_metadata.table_fields).length < 2 ) {
 
-                        console.error("Missing Table Fields")
+                            console.error("Missing Table Fields")
 
-                    }
+                        }
 
-                    if( SetContentHeaderIcon ) {
+                        if( SetContentHeaderIcon ) {
 
-                        SetContentHeaderIcon(
-                            <>
-                                {result.api_metadata['documentation'] &&
-                                    <Link to={result.api_metadata['documentation']} target="_new">
-                                        <IconLoader
-                                            name='help'
-                                        />
-                                    </Link>
-                                }
-                            </>
-                        )
-                    }
+                            SetContentHeaderIcon(
+                                <>
+                                    {result.api_metadata['documentation'] &&
+                                        <Link to={result.api_metadata['documentation']} target="_new">
+                                            <IconLoader
+                                                name='help'
+                                            />
+                                        </Link>
+                                    }
+                                </>
+                            )
+                        }
 
-                    if( callback ) {
+                        if( callback ) {
 
-                        callback(result.api_metadata.name)
+                            callback(result.api_metadata.name)
 
-                    }
+                        }
 
-                    if( page !== 0 ) {
-                        
-                        setPageNumberValue(page)
+                        if( page !== 0 ) {
+                            
+                            setPageNumberValue(page)
 
+                        }
                     }
-
-                    setPageLoaded(true)
-
-                }
-
-            })
+                })
+        }
 
     }, [
         page,
+        loader_data,
     ]);
 
 
@@ -199,9 +186,7 @@ const Table = ({
 
     return (
         <>
-        { loaded &&
-        <>
-        { metadata &&
+        { (metadata && table_data) &&
             <div>
                 { metadata.allowed_methods.includes('POST') && (<Link to={String(metadata.urls.self).split(API_SPLIT)[1] + "/add"}><button className="common-field form">Add</button></Link>)}
                     <table>
@@ -502,8 +487,6 @@ const Table = ({
             </div>
         }
         </>
-        }
-        </>
     );
 }
 

src/layout/List.jsx

@@ -21,7 +21,7 @@ const List = () => {
             content_heading={content_heading}
             content_header_icon={content_header_icon}
         />
-        { metadata &&
+        { metadata && page_data &&
         <section>
             <div className="content">
                 <Table