From b37b7b6af52b87d8e82e54ecbd304e49a773df19 Mon Sep 17 00:00:00 2001
From: Martin Sottnik <msottnik@gmail.com>
Date: Thu, 5 May 2022 12:34:20 +0200
Subject: [PATCH] add diff table to location list (#661)

---
 .../pages/location-list/location-helpers.ts   | 68 +++++++++++++++++++
 .../src/pages/location-list/location-list.tsx | 39 ++++++++++-
 .../pages/location-list/location-table.tsx    |  4 +-
 3 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 packages/frinx-gamma/src/pages/location-list/location-helpers.ts

diff --git a/packages/frinx-gamma/src/pages/location-list/location-helpers.ts b/packages/frinx-gamma/src/pages/location-list/location-helpers.ts
new file mode 100644
index 000000000..cfc5ded0b
--- /dev/null
+++ b/packages/frinx-gamma/src/pages/location-list/location-helpers.ts
@@ -0,0 +1,68 @@
+import { CustomerLocation } from '../../network-types';
+
+export type Status = 'CREATED' | 'UPDATED' | 'DELETED' | 'NO_CHANGE';
+
+export type CustomerLocationWithStatus = CustomerLocation & { status: Status };
+
+export function getChangedLocationsWithStatus(
+  createdLocations: CustomerLocation[] | null,
+  updatedLocations: CustomerLocation[] | null,
+  deletedLocations: CustomerLocation[] | null,
+): CustomerLocationWithStatus[] {
+  const createdDevicesWithStatus: CustomerLocationWithStatus[] =
+    createdLocations?.map((location) => {
+      return {
+        ...location,
+        status: 'CREATED',
+      };
+    }) || [];
+
+  const updatedDevicesWithStatus: CustomerLocationWithStatus[] =
+    updatedLocations?.map((location) => {
+      return {
+        ...location,
+        status: 'UPDATED',
+      };
+    }) || [];
+
+  const deletedDevicesWithStatus: CustomerLocationWithStatus[] =
+    deletedLocations?.map((location) => {
+      return {
+        ...location,
+        status: 'DELETED',
+      };
+    }) || [];
+
+  return [...createdDevicesWithStatus, ...updatedDevicesWithStatus, ...deletedDevicesWithStatus];
+}
+
+export function getSavedLocationsWithStatus(
+  locations: CustomerLocation[] | null,
+  updatedLocations: CustomerLocation[] | null,
+  deletedLocations: CustomerLocation[] | null,
+): CustomerLocationWithStatus[] {
+  return (
+    locations?.map((location) => {
+      const updatedSite = updatedLocations?.filter((i) => i.locationId === location.locationId) || [];
+      if (updatedSite.length) {
+        return {
+          ...updatedSite[0],
+          status: 'UPDATED',
+        };
+      }
+
+      const deletedSite = deletedLocations?.filter((i) => i.locationId === location.locationId) || [];
+      if (deletedSite.length) {
+        return {
+          ...deletedSite[0],
+          status: 'DELETED',
+        };
+      }
+
+      return {
+        ...location,
+        status: 'NO_CHANGE',
+      };
+    }) || []
+  );
+}
diff --git a/packages/frinx-gamma/src/pages/location-list/location-list.tsx b/packages/frinx-gamma/src/pages/location-list/location-list.tsx
index 7620395a7..ce52f189b 100644
--- a/packages/frinx-gamma/src/pages/location-list/location-list.tsx
+++ b/packages/frinx-gamma/src/pages/location-list/location-list.tsx
@@ -1,6 +1,7 @@
 import { Box, Button, Container, Flex, Heading, useDisclosure } from '@chakra-ui/react';
 import React, { useContext, useEffect, useState, VoidFunctionComponent } from 'react';
 import { useParams, Link } from 'react-router-dom';
+import diff from 'diff-arrays-of-objects';
 import callbackUtils from '../../unistore-callback-utils';
 import ConfirmDeleteModal from '../../components/confirm-delete-modal/confirm-delete-modal';
 import {
@@ -15,11 +16,15 @@ import usePagination from '../../hooks/use-pagination';
 import Pagination from '../../components/pagination/pagination';
 import LocationFilter, { LocationFilters } from './location-filter';
 import FilterContext from '../../filter-provider';
+import { getChangedLocationsWithStatus, getSavedLocationsWithStatus } from './location-helpers';
 
 const LocationListPage: VoidFunctionComponent = () => {
   const filterContext = useContext(FilterContext);
   const { location: locationFilters, onLocationFilterChange } = unwrap(filterContext);
   const [site, setSite] = useState<VpnSite | null>(null);
+  const [createdLocations, setCreatedLocations] = useState<CustomerLocation[] | null>(null);
+  const [updatedLocations, setUpdatedLocations] = useState<CustomerLocation[] | null>(null);
+  const [deletedLocations, setDeletedLocations] = useState<CustomerLocation[] | null>(null);
   const [locations, setLocations] = useState<CustomerLocation[] | null>(null);
   const [locationIdToDelete, setLocationIdToDelete] = useState<string | null>(null);
   const deleteModalDisclosure = useDisclosure();
@@ -56,6 +61,15 @@ const LocationListPage: VoidFunctionComponent = () => {
         ...pagination,
         pageCount: Math.ceil(locationsCount / pagination.pageSize),
       });
+      // get data for changes table
+      const allSavedLocations = await callbacks.getLocations(unwrap(siteId), null, null, 'nonconfig');
+      const clientAllSavedLocations = apiLocationsToClientLocations(allSavedLocations);
+      const allUnsavedLocations = await callbacks.getLocations(unwrap(siteId), null, null);
+      const clientAllUnsavedLocations = apiLocationsToClientLocations(allUnsavedLocations);
+      const result = diff(clientAllSavedLocations, clientAllUnsavedLocations, 'locationId');
+      setCreatedLocations(result.added);
+      setUpdatedLocations(result.updated);
+      setDeletedLocations(result.removed);
     };
     fetchData();
   }, [pagination.page, submittedFilters]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -104,6 +118,13 @@ const LocationListPage: VoidFunctionComponent = () => {
     return null;
   }
 
+  const changedLocationsWithStatus = getChangedLocationsWithStatus(
+    createdLocations,
+    updatedLocations,
+    deletedLocations,
+  );
+  const savedLocationsWithStatus = getSavedLocationsWithStatus(locations, updatedLocations, deletedLocations);
+
   return (
     <>
       <ConfirmDeleteModal
@@ -141,10 +162,26 @@ const LocationListPage: VoidFunctionComponent = () => {
               onFilterReset={handleFilterReset}
               onFilterSubmit={handleFilterSubmit}
             />
+            {changedLocationsWithStatus.length ? (
+              <>
+                <Heading size="sm">Changes</Heading>
+                <Box my="2">
+                  <LocationTable
+                    size="sm"
+                    site={site}
+                    detailId={detailId}
+                    locations={changedLocationsWithStatus}
+                    onDeleteLocationButtonClick={handleDeleteButtonClick}
+                    onRowClick={handleRowClick}
+                  />
+                </Box>
+              </>
+            ) : null}
             <LocationTable
+              size="md"
               site={site}
               detailId={detailId}
-              locations={locations || []}
+              locations={savedLocationsWithStatus}
               onDeleteLocationButtonClick={handleDeleteButtonClick}
               onRowClick={handleRowClick}
             />
diff --git a/packages/frinx-gamma/src/pages/location-list/location-table.tsx b/packages/frinx-gamma/src/pages/location-list/location-table.tsx
index 6dfcf9316..686a9bd43 100644
--- a/packages/frinx-gamma/src/pages/location-list/location-table.tsx
+++ b/packages/frinx-gamma/src/pages/location-list/location-table.tsx
@@ -8,6 +8,7 @@ import unwrap from '../../helpers/unwrap';
 import LocationDetail from './location-detail';
 
 type Props = {
+  size: 'sm' | 'md';
   site: VpnSite;
   detailId: string | null;
   locations: CustomerLocation[];
@@ -16,6 +17,7 @@ type Props = {
 };
 
 const LocationTable: VoidFunctionComponent<Props> = ({
+  size,
   site,
   detailId,
   locations,
@@ -23,7 +25,7 @@ const LocationTable: VoidFunctionComponent<Props> = ({
   onRowClick,
 }) => {
   return (
-    <Table background="white" size="lg" marginBottom="12">
+    <Table background="white" size={size} marginBottom="12">
       <Thead>
         <Tr>
           <Th />