Address PR Comments

src/common/constants.ts

@@ -54,7 +54,7 @@ export const FILTER_REGEX = new RegExp(
 
 /** ----- Application Interfaces ----- */
 
-export interface Filters {
+export interface IFiltersMap {
   [key: string]: IFilter;
 } // key is the same id as whats in IFilter
 
@@ -71,12 +71,12 @@ export interface IState {
   isAutoPreAmpOn: boolean;
   isGraphViewOn: boolean;
   preAmp: number;
-  filters: Filters;
+  filters: IFiltersMap;
 }
 
 export interface IPreset {
   preAmp: number;
-  filters: Filters;
+  filters: IFiltersMap;
 }
 
 /** ----- Default Values ----- */
@@ -99,8 +99,8 @@ export const getDefaultFilterWithId = (): IFilter => {
   };
 };
 
-const getDefaultFilters = (): Filters => {
-  const filters: Filters = {};
+const getDefaultFilters = (): IFiltersMap => {
+  const filters: IFiltersMap = {};
   FIXED_FREQUENCIES.forEach((f) => {
     const filter: IFilter = { ...getDefaultFilterWithId(), frequency: f };
     filters[filter.id] = filter;

src/common/utils.ts

@@ -1,5 +1,5 @@
 import {
-  Filters,
+  IFiltersMap,
   IFilter,
   MAX_FREQUENCY,
   MIN_FREQUENCY,
@@ -27,10 +27,10 @@ export const computeAvgFreq = (
 export const isRestrictedPresetName = (newName: string) =>
   RESERVED_FILE_NAMES_SET.has(newName.toUpperCase());
 
-export const cloneFilters = (filters: Filters) => {
-  const filtersClone: Filters = {};
+export const cloneFilters = (filters: IFiltersMap) => {
+  const filtersClone: IFiltersMap = {};
   Object.entries(filters).forEach(([id, filter]) => {
-    filtersClone[id] = filter;
+    filtersClone[id] = { ...filter };
   });
   return filtersClone;
 };

src/main/main.ts

@@ -12,7 +12,6 @@ import { app, BrowserWindow, ipcMain, shell } from 'electron';
 import log from 'electron-log';
 import { autoUpdater } from 'electron-updater';
 import path from 'path';
-import { uid } from 'uid';
 import fs from 'fs';
 import { exec } from 'child_process';
 import {
@@ -34,6 +33,7 @@ import {
   FilterTypeEnum,
   IState,
   IPreset,
+  IFilter,
   MAX_FREQUENCY,
   MAX_GAIN,
   MAX_NUM_FILTERS,
@@ -199,7 +199,7 @@ const handleUpdate = async (
   return handleUpdateHelper<void>(event, channel, undefined);
 };
 
-const checkFilterIdExistence = (
+const doesFilterIdExist = (
   event: Electron.IpcMainEvent,
   channel: ChannelEnum,
   filterId: string
@@ -422,7 +422,7 @@ ipcMain.on(ChannelEnum.GET_FILTER_GAIN, async (event, arg) => {
   const filterId = arg[0];
 
   // Filter id must exist
-  if (!checkFilterIdExistence(event, channel, filterId)) {
+  if (!doesFilterIdExist(event, channel, filterId)) {
     return;
   }
 
@@ -438,7 +438,7 @@ ipcMain.on(ChannelEnum.SET_FILTER_GAIN, async (event, arg) => {
   const gain = parseFloat(arg[1]) || 0;
 
   // Filter id must exist
-  if (!checkFilterIdExistence(event, channel, filterId)) {
+  if (!doesFilterIdExist(event, channel, filterId)) {
     return;
   }
 
@@ -456,7 +456,7 @@ ipcMain.on(ChannelEnum.GET_FILTER_FREQUENCY, async (event, arg) => {
   const filterId = arg[0];
 
   // Filter id must exist
-  if (!checkFilterIdExistence(event, channel, filterId)) {
+  if (!doesFilterIdExist(event, channel, filterId)) {
     return;
   }
 
@@ -472,7 +472,7 @@ ipcMain.on(ChannelEnum.SET_FILTER_FREQUENCY, async (event, arg) => {
   const frequency = parseInt(arg[1], 10) || 0;
 
   // Filter id must exist
-  if (!checkFilterIdExistence(event, channel, filterId)) {
+  if (!doesFilterIdExist(event, channel, filterId)) {
     return;
   }
 
@@ -490,7 +490,7 @@ ipcMain.on(ChannelEnum.GET_FILTER_QUALITY, async (event, arg) => {
   const filterId = arg[0];
 
   // Filter id must exist
-  if (!checkFilterIdExistence(event, channel, filterId)) {
+  if (!doesFilterIdExist(event, channel, filterId)) {
     return;
   }
 
@@ -506,7 +506,7 @@ ipcMain.on(ChannelEnum.SET_FILTER_QUALITY, async (event, arg) => {
   const quality = parseFloat(arg[1]) || 0;
 
   // Filter id must exist
-  if (!checkFilterIdExistence(event, channel, filterId)) {
+  if (!doesFilterIdExist(event, channel, filterId)) {
     return;
   }
 
@@ -524,7 +524,7 @@ ipcMain.on(ChannelEnum.GET_FILTER_TYPE, async (event, arg) => {
   const filterId = arg[0];
 
   // Filter id must exist
-  if (!checkFilterIdExistence(event, channel, filterId)) {
+  if (!doesFilterIdExist(event, channel, filterId)) {
     return;
   }
 
@@ -540,7 +540,7 @@ ipcMain.on(ChannelEnum.SET_FILTER_TYPE, async (event, arg) => {
   const filterType = arg[1];
 
   // Filter id must exist
-  if (!checkFilterIdExistence(event, channel, filterId)) {
+  if (!doesFilterIdExist(event, channel, filterId)) {
     return;
   }
 
@@ -575,13 +575,9 @@ ipcMain.on(ChannelEnum.ADD_FILTER, async (event, arg) => {
     return;
   }
 
-  const filterId = uid(8);
-  state.filters[filterId] = {
-    ...getDefaultFilterWithId(),
-    id: filterId,
-    frequency,
-  };
-  await handleUpdateHelper(event, channel, filterId);
+  const newFilter: IFilter = { ...getDefaultFilterWithId(), frequency };
+  state.filters[newFilter.id] = newFilter;
+  await handleUpdateHelper(event, channel, newFilter.id);
 });
 
 ipcMain.on(ChannelEnum.REMOVE_FILTER, async (event, arg) => {
@@ -595,7 +591,7 @@ ipcMain.on(ChannelEnum.REMOVE_FILTER, async (event, arg) => {
   }
 
   // Filter id must exist
-  if (!checkFilterIdExistence(event, channel, filterId)) {
+  if (!doesFilterIdExist(event, channel, filterId)) {
     return;
   }
 

src/renderer/MainContent.tsx

@@ -6,6 +6,7 @@ import { useAquaContext } from './utils/AquaContext';
 import './styles/MainContent.scss';
 import AddSliderDivider from './components/AddSliderDivider';
 import Spinner from './icons/Spinner';
+import { sortHelper } from './utils/utils';
 
 const MainContent = () => {
   const { filters, isLoading } = useAquaContext();
@@ -21,13 +22,7 @@ const MainContent = () => {
     );
 
     // Obtain a visually sorted list of the filters
-    const visualSort = Object.values(filters).sort(
-      (a, b) =>
-        a.frequency - b.frequency ||
-        a.gain - b.gain ||
-        a.quality - b.quality ||
-        a.type.localeCompare(b.type)
-    );
+    const visualSort = Object.values(filters).sort(sortHelper);
 
     // Compute a mapping from a filter id to its sorted index
     const map: { [key: string]: number } = {};

src/renderer/graph/FrequencyResponseChart.tsx

@@ -1,4 +1,4 @@
-import { Filters, IFilter } from 'common/constants';
+import { IFiltersMap, IFilter } from 'common/constants';
 import {
   useCallback,
   useEffect,
@@ -47,7 +47,7 @@ const FrequencyResponseChart = () => {
     preAmp,
     setPreAmp,
   } = useAquaContext();
-  const prevFilters = useRef<Filters>({});
+  const prevFilters = useRef<IFiltersMap>({});
   const prevFilterLines = useRef<IChartLineDataPointsById>({});
 
   const { chartData, autoPreAmpValue }: IGraphData = useMemo(() => {
@@ -64,7 +64,7 @@ const FrequencyResponseChart = () => {
       };
 
       // New filters have no previous data
-      if (!prevFilters.current[filter.id]) {
+      if (!(filter.id in prevFilters.current)) {
         updatedFilterLines[filter.id] = getFilterLineData(filter);
         return;
       }

src/renderer/utils/AquaContext.tsx

@@ -11,7 +11,7 @@ import {
   FilterTypeEnum,
   getDefaultFilterWithId,
   getDefaultState,
-  Filters,
+  IFiltersMap,
   IState,
 } from '../../common/constants';
 import { ErrorDescription } from '../../common/errors';
@@ -34,7 +34,7 @@ type NumericalFilterAction =
   | FilterActionEnum.QUALITY;
 
 export type FilterAction =
-  | { type: FilterActionEnum.INIT; filters: Filters }
+  | { type: FilterActionEnum.INIT; filters: IFiltersMap }
   | { type: NumericalFilterAction; id: string; newValue: number }
   | { type: FilterActionEnum.TYPE; id: string; newValue: FilterTypeEnum }
   | { type: FilterActionEnum.ADD; id: string; frequency: number }
@@ -56,10 +56,13 @@ export interface IAquaContext extends IState {
 
 const AquaContext = createContext<IAquaContext | undefined>(undefined);
 
-type IFilterReducer = (filters: Filters, action: FilterAction) => Filters;
+type IFilterReducer = (
+  filters: IFiltersMap,
+  action: FilterAction
+) => IFiltersMap;
 
 const filterReducer: IFilterReducer = (
-  filters: Filters,
+  filters: IFiltersMap,
   action: FilterAction
 ) => {
   switch (action.type) {
@@ -72,7 +75,6 @@ const filterReducer: IFilterReducer = (
     }
     case FilterActionEnum.GAIN: {
       const filtersCloned = cloneFilters(filters);
-      console.log(filters);
       filtersCloned[action.id].gain = action.newValue;
       return filtersCloned;
     }

src/renderer/utils/utils.ts

@@ -10,7 +10,11 @@ export const clamp = (num: number, min: number, max: number) => {
   return Math.min(Math.max(num, min), max);
 };
 
-export const sortHelper = (a: IFilter, b: IFilter) => a.frequency - b.frequency;
+export const sortHelper = (a: IFilter, b: IFilter) =>
+  a.frequency - b.frequency ||
+  a.gain - b.gain ||
+  a.quality - b.quality ||
+  a.type.localeCompare(b.type);
 
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#sequence_generator_range
 export const range = (start: number, stop: number, step: number) =>