refactor

app/components/table-page.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import Stack from 'react-bootstrap/Stack';
 import Button from 'react-bootstrap/Button';
 import PropTypes from 'prop-types';

app/components/table-switch.js

@@ -6,6 +6,11 @@ import TableHeadSwitch from './table-head-switch';
 import TableEntrySwitch from './table-entry-switch';
 import config from '../config';
 import {filterData} from '../utils/filter-data';
+
+
+
+
+
 /*the simplest way to define a component is to write a JavaScript function*/
 /*destructure props object*/
 function TableSwitch ({name, isFetched, oset, limit, filter}) {
@@ -23,9 +28,15 @@ function TableSwitch ({name, isFetched, oset, limit, filter}) {
             if (name.length>0 && name.indexOf(' ') === -1) {
                 const address = `${config.API}${name}-oset-limit?oset=${oset}&limit=${limit}`;
                 const res = await axios.get(address);
-		setAry((ary) => res.data);
-		let data=filterData(res.data,name,filter);
-		setAryFiltered((aryFiltered) => data);
+
+		if(res.data){
+
+		    setAry((ary) => res.data);
+		    let data=filterData(res.data,name,filter);
+		    setAryFiltered((aryFiltered) => data);
+		}else{
+                    console.error('fetch() res NOT available');
+		}
             } else {
 		console.error(`name ${name} not valid`);
 		setAry((ary) => []);
@@ -33,8 +44,28 @@ function TableSwitch ({name, isFetched, oset, limit, filter}) {
         } catch (err) {
             console.error('err.message: ' + err.message);
 	    setAry((ary) => []);
+	    setAryFiltered((aryFiltered) => []);
         }
     };
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
     useEffect(()=>{
 	setAryFiltered((aryFiltered)=>{
 	    let filtered=filterData(ary,name,filter);