Revert "Revert "Merge pull request #944 from ssvlabs/INTERFACES-490-o…

…perator-metadata-store-refactor""

This reverts commit ebcd031

src/app/common/stores/BaseStore.ts

@@ -1,12 +1,10 @@
 import { distributionStore } from './applications/Distribution/Distribution.store';
 import { distributionTestnetStore } from './applications/Distribution/DistributionTestnet.store';
-import { operatorMetadataStore } from './applications/SsvWeb/OperatorMetadata.store';
 import { validatorStore } from './applications/SsvWeb/Validator.store';
 
 const _stores = {
   Validator: validatorStore,
   Distribution: distributionStore,
-  OperatorMetadata: operatorMetadataStore,
   DistributionTestnet: distributionTestnetStore
 } as const;
 

src/app/common/stores/applications/SsvWeb/index.ts

@@ -1,2 +1 @@
-export { default as OperatorMetadataStore } from './OperatorMetadata.store';
 export { default as ValidatorStore } from './Validator.store';

src/app/components/applications/SSV/MyAccount/components/EditOperatorDetails/CountriesAutocompleteInput.tsx

@@ -1,24 +1,25 @@
-import { useEffect, useState } from 'react';
+import { SyntheticEvent, useEffect, useState } from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
-import { useStores } from '~app/hooks/useStores';
-import { CountryType } from '~lib/utils/operatorMetadataHelper';
-import OperatorMetadataStore from '~app/common/stores/applications/SsvWeb/OperatorMetadata.store';
+import { CountryType, FIELD_KEYS } from '~lib/utils/operatorMetadataHelper';
 import { useStyles } from '~app/components/applications/SSV/MyAccount/components/EditOperatorDetails/EditOperatorDetails.styles';
+import { useAppDispatch, useAppSelector } from '~app/hooks/redux.hook.ts';
+import { selectLocationsData, selectLocationsList, selectMetadataValueByName, setMetadataValue } from '~app/redux/operatorMetadata.slice.ts';
+import { FilterOptionsState } from '@mui/base/useAutocomplete/useAutocomplete';
 
-const CountriesAutocompleteInput = ({ fieldKey, placeholder }: { fieldKey: string; placeholder: string }) => {
+const CountriesAutocompleteInput = ({ fieldKey, placeholder }: { fieldKey: FIELD_KEYS; placeholder: string }) => {
   const classes = useStyles();
-  const stores = useStores();
-  const metadataStore: OperatorMetadataStore = stores.OperatorMetadata;
-  const [currentCountry, setCurrentCountry] = useState(metadataStore.getMetadataValue(fieldKey));
+  const dispatch = useAppDispatch();
+  const [currentCountry, setCurrentCountry] = useState(useAppSelector((state) => selectMetadataValueByName(state, fieldKey)));
+  const locationsData = useAppSelector(selectLocationsData);
+  const locationsList = useAppSelector(selectLocationsList);
 
-  useEffect(() => setCurrentCountry(countryWithAlpha(currentCountry)), [metadataStore.locationsData.toString()]);
+  const locationDataString = locationsData.toString();
+  useEffect(() => setCurrentCountry(countryWithAlpha(currentCountry)), [locationDataString]);
 
-  const customFilterOptions = (_options: any, state: any) => {
+  const customFilterOptions = (_options: string[], state: FilterOptionsState<string>) => {
     const inputValue = state.inputValue.toLowerCase();
-    return metadataStore.locationsData
-      .filter((d) => d.name.toLowerCase().includes(inputValue) || d['alpha-3'].toLowerCase().includes(inputValue))
-      .map((d) => `${d.name} (${d['alpha-3']})`);
+    return locationsData.filter((d) => d.name.toLowerCase().includes(inputValue) || d['alpha-3'].toLowerCase().includes(inputValue)).map((d) => `${d.name} (${d['alpha-3']})`);
   };
 
   const onFocusHandler = () => {
@@ -29,15 +30,20 @@ const CountriesAutocompleteInput = ({ fieldKey, placeholder }: { fieldKey: strin
     setCurrentCountry(countryWithAlpha(currentCountry));
   };
 
-  const onTagsChange = (event: any, value: any) => {
+  const onTagsChange = (event: SyntheticEvent, value: string) => {
     if (event) {
       setCurrentCountry(value);
-      metadataStore.setMetadataValue(fieldKey, metadataStore.locationsList[value]);
+      dispatch(
+        setMetadataValue({
+          metadataFieldName: fieldKey,
+          value: locationsList[value]
+        })
+      );
     }
   };
 
   const countryWithAlpha = (location: string) => {
-    const country = metadataStore.locationsData.find((c) => c.name === location);
+    const country = locationsData.find((c) => c.name === location);
     return country ? `${location} (${country['alpha-3']})` : location;
   };
 
@@ -48,8 +54,8 @@ const CountriesAutocompleteInput = ({ fieldKey, placeholder }: { fieldKey: strin
       onFocus={onFocusHandler}
       onBlur={onBlurHandler}
       filterOptions={customFilterOptions}
-      onInputChange={(e: any, value: any) => onTagsChange(e, value)}
-      options={metadataStore.locationsData.map((country: CountryType) => country.name)}
+      onInputChange={(e: SyntheticEvent, value: string) => onTagsChange(e, value)}
+      options={locationsData.map((country: CountryType) => country.name)}
       renderInput={(params) => <TextField placeholder={placeholder} className={classes.AutocompleteInner} {...params} />}
     />
   );