undo

app/containers/Network/index.js

@@ -1,85 +1,219 @@
-import React, { useEffect, useContext } from 'react';
+import React, { useMemo, useContext, useState } from 'react';
-import PropTypes from 'prop-types';
+import { useLocation, Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
-import { useLazyQuery } from '@apollo/react-hooks';
+import { useQuery, useMutation, useLazyQuery } from '@apollo/react-hooks';
-import { Alert } from 'antd';
+import { Alert, notification } from 'antd';
-import { NetworkTable, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import _ from 'lodash';
+import { Network as NetworkPage, PopoverMenu, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 
+import AccessPointDetails from 'containers/Network/containers/AccessPointDetails';
+import AccessPoints from 'containers/Network/containers/AccessPoints';
+import ClientDevices from 'containers/Network/containers/ClientDevices';
+import ClientDeviceDetails from 'containers/Network/containers/ClientDeviceDetails';
 import UserContext from 'contexts/UserContext';
-import { FILTER_CLIENT_SESSIONS } from 'graphql/queries';
+import { GET_ALL_LOCATIONS, GET_LOCATION } from 'graphql/queries';
+import { CREATE_LOCATION, UPDATE_LOCATION, DELETE_LOCATION } from 'graphql/mutations';
 
-const clientDevicesTableColumns = [
+const Network = () => {
-  {
+  const { path } = useRouteMatch();
-    title: '',
-    dataIndex: 'name',
-  },
-  {
-    title: 'MAC',
-    dataIndex: 'macAddress',
-  },
-  { title: 'MANUFACTURER', dataIndex: 'manufacturer' },
-  { title: 'IP', dataIndex: 'ipAddress' },
-  { title: 'HOST NAME', dataIndex: 'hostname' },
-  { title: 'ACCESS POINT', dataIndex: ['equipment', 'name'] },
-  { title: 'SSID', dataIndex: 'ssid' },
-  { title: 'BAND', dataIndex: 'radioType' },
-  { title: 'SIGNAL', dataIndex: 'signal' },
-  { title: 'STATUS', dataIndex: 'status' },
-];
-
-const ClientDevices = ({ checkedLocations }) => {
   const { customerId } = useContext(UserContext);
-  const [filterClientSessions, { loading, error, data, fetchMore }] = useLazyQuery(
+  const location = useLocation();
-    FILTER_CLIENT_SESSIONS
+  const { loading, error, refetch, data } = useQuery(GET_ALL_LOCATIONS, {
-  );
+    variables: { customerId },
-
-  const handleLoadMore = () => {
-    if (!data.filterClientSessions.context.lastPage) {
-      fetchMore({
-        variables: { cursor: data.filterClientSessions.context.cursor },
-        updateQuery: (previousResult, { fetchMoreResult }) => {
-          const previousEntry = previousResult.filterClientSessions;
-          const newItems = fetchMoreResult.filterClientSessions.items;
-
-          return {
-            filterClientSessions: {
-              context: fetchMoreResult.filterClientSessions.context,
-              items: [...previousEntry.items, ...newItems],
-              __typename: previousEntry.__typename,
-            },
-          };
-        },
   });
+
+  const [getLocation, { data: selectedLocation }] = useLazyQuery(GET_LOCATION);
+  const [createLocation] = useMutation(CREATE_LOCATION);
+  const [updateLocation] = useMutation(UPDATE_LOCATION);
+  const [deleteLocation] = useMutation(DELETE_LOCATION);
+  const [checkedLocations, setCheckedLocations] = useState([]);
+  const [deleteModal, setDeleteModal] = useState(false);
+  const [editModal, setEditModal] = useState(false);
+  const [addModal, setAddModal] = useState(false);
+
+  const handleGetSingleLocation = id => {
+    getLocation({
+      variables: { id },
+    });
+  };
+
+  const formatLocationListForTree = (list = []) => {
+    const checkedTreeLocations = [];
+    list.forEach(ele => {
+      checkedTreeLocations.push(ele.id);
+    });
+    setCheckedLocations(checkedTreeLocations);
+
+    function unflatten(array, p, t) {
+      let tree = typeof t !== 'undefined' ? t : [];
+      const parent = typeof p !== 'undefined' ? p : { id: 0 };
+      let children = _.filter(array, child => child.parentId === parent.id);
+      children = children.map(c => ({
+        title: (
+          <PopoverMenu
+            locationType={c.locationType}
+            setAddModal={setAddModal}
+            setEditModal={setEditModal}
+            setDeleteModal={setDeleteModal}
+          >
+            {c.name}
+          </PopoverMenu>
+        ),
+        value: `${c.id}`,
+        key: c.id,
+        ...c,
+      }));
+      if (!_.isEmpty(children)) {
+        if (parent.id === 0) {
+          tree = children;
+        } else {
+          parent.children = children;
         }
+        _.each(children, child => unflatten(array, child));
+      }
+      return tree;
+    }
+    return [
+      {
+        title: (
+          <PopoverMenu locationType="NETWORK" setAddModal={setAddModal}>
+            Network
+          </PopoverMenu>
+        ),
+        id: 0,
+        value: '0',
+        key: 0,
+        children: unflatten(list),
+      },
+    ];
   };
 
-  useEffect(() => {
+  const handleAddLocation = (name, parentId, locationType) => {
-    filterClientSessions({
+    setAddModal(false);
-      variables: { customerId, locationIds: checkedLocations, equipmentType: 'AP' },
+    createLocation({
+      variables: {
+        locationType,
+        customerId,
+        parentId,
+        name,
+      },
+    })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Location successfully added.',
         });
-  }, [checkedLocations]);
+        refetch();
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Location could not be added.',
+        })
+      );
+  };
+
+  const handleEditLocation = (id, parentId, name, locationType, lastModifiedTimestamp) => {
+    setEditModal(false);
+    updateLocation({
+      variables: {
+        customerId,
+        id,
+        parentId,
+        name,
+        locationType,
+        lastModifiedTimestamp,
+      },
+    })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Location successfully edited.',
+        });
+        refetch();
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Location could not be edited.',
+        })
+      );
+  };
+
+  const handleDeleteLocation = id => {
+    setDeleteModal(false);
+    deleteLocation({ variables: { id } })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Location successfully deleted.',
+        });
+        refetch();
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Location could not be deleted.',
+        })
+      );
+  };
+
+  const onSelect = (selectedKeys, info) => {
+    const { id } = info.node;
+    handleGetSingleLocation(id);
+  };
+
+  const onCheck = checkedKeys => {
+    setCheckedLocations(checkedKeys);
+  };
+
+  const locationsTree = useMemo(
+    () => formatLocationListForTree(data && data.getAllLocations)[0].children,
+    [data]
+  );
 
   if (loading) {
     return <Loading />;
   }
 
   if (error) {
-    return (
+    return <Alert message="Error" description="Failed to load locations." type="error" showIcon />;
-      <Alert message="Error" description="Failed to load client devices." type="error" showIcon />
-    );
   }
 
   return (
-    <NetworkTable
+    <NetworkPage
-      tableColumns={clientDevicesTableColumns}
+      onSelect={onSelect}
-      tableData={data && data.filterClientSessions && data.filterClientSessions.items}
+      onCheck={onCheck}
-      onLoadMore={handleLoadMore}
+      checkedLocations={checkedLocations}
-      isLastPage={data && data.filterClientSessions && data.filterClientSessions.context.lastPage}
+      locations={locationsTree}
+      activeTab={location.pathname}
+      selectedLocation={selectedLocation && selectedLocation.getLocation}
+      addModal={addModal}
+      editModal={editModal}
+      deleteModal={deleteModal}
+      setAddModal={setAddModal}
+      setEditModal={setEditModal}
+      setDeleteModal={setDeleteModal}
+      onAddLocation={handleAddLocation}
+      onEditLocation={handleEditLocation}
+      onDeleteLocation={handleDeleteLocation}
+    >
+      <Switch>
+        <Route
+          exact
+          path={`${path}/access-points`}
+          render={props => <AccessPoints checkedLocations={checkedLocations} {...props} />}
         />
+        <Route exact path={`${path}/access-points/:id`} component={AccessPointDetails} />
+        <Route
+          exact
+          path={`${path}/client-devices`}
+          render={props => <ClientDevices checkedLocations={checkedLocations} {...props} />}
+        />
+        <Route exact path={`${path}/client-devices/:id`} component={ClientDeviceDetails} />
+        <Redirect from={path} to={`${path}/access-points`} />
+      </Switch>
+    </NetworkPage>
   );
 };
 
-ClientDevices.propTypes = {
+export default Network;
-  checkedLocations: PropTypes.instanceOf(Array).isRequired,
-};
-
-export default ClientDevices;