refactor update btn

starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-active.tsx

@@ -0,0 +1,51 @@
+import { IGeoLocationModel } from "../../../../interfaces/IGeoLocationModel";
+import localization from "../../../../localization/localization.json";
+import { Language } from "../../../../shared/language";
+import { ILatLong } from "../modal-geo";
+import { UpdateGeoLocation } from "./update-geo-location";
+
+interface IUpdateButtonActiveProps {
+  parentDirectory: string;
+  handleExit: (result: IGeoLocationModel | null) => void;
+  selectedSubPath: string;
+  latitude?: number;
+  longitude?: number;
+  location: ILatLong;
+  language: Language;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  setError: React.Dispatch<React.SetStateAction<boolean>>;
+  propsCollections: boolean | undefined;
+}
+
+export const UpdateButtonActive: React.FunctionComponent<IUpdateButtonActiveProps> = ({
+  handleExit,
+  parentDirectory,
+  latitude,
+  longitude,
+  language,
+  ...props
+}) => {
+  return (
+    <button
+      onClick={async () => {
+        const model = await UpdateGeoLocation(
+          parentDirectory,
+          props.selectedSubPath,
+          props.location,
+          props.setError,
+          props.setIsLoading,
+          props.propsCollections
+        );
+        if (model) {
+          handleExit(model);
+        }
+      }}
+      data-test="update-geo-location"
+      className="btn btn--default"
+    >
+      {!latitude && !longitude
+        ? language.key(localization.MessageAddLocation)
+        : language.key(localization.MessageUpdateLocation)}
+    </button>
+  );
+};

starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-disabled.tsx

@@ -0,0 +1,23 @@
+import localization from "../../../../localization/localization.json";
+import { Language } from "../../../../shared/language";
+
+interface IUpdateButtonActiveProps {
+  latitude?: number;
+  longitude?: number;
+  language: Language;
+}
+
+export const UpdateButtonDisabled: React.FunctionComponent<IUpdateButtonActiveProps> = ({
+  latitude,
+  longitude,
+  language
+}) => {
+  return (
+    <button className="btn btn--default" disabled={true}>
+      {/* disabled */}
+      {!latitude && !longitude
+        ? language.key(localization.MessageAddLocation)
+        : language.key(localization.MessageUpdateLocation)}
+    </button>
+  );
+};

starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button.spec.tsx

@@ -15,8 +15,6 @@ describe("UpdateButton", () => {
   const setIsLoading = jest.fn();
   const propsCollections = true;
   const handleExit = jest.fn();
-  const latitude = 0;
-  const longitude = 0;
   const language = new Language(SupportedLanguages.en);
 
   beforeEach(() => {
@@ -25,15 +23,18 @@ describe("UpdateButton", () => {
 
   it("calls UpdateGeoLocation when clicked and updates location", async () => {
     (UpdateGeoLocation as jest.Mock).mockResolvedValueOnce({} as any);
+
     const { getByTestId } = render(
-      new UpdateButton(
-        parentDirectory,
-        selectedSubPath,
-        location,
-        setError,
-        setIsLoading,
-        propsCollections
-      ).updateButton(true, handleExit, latitude, longitude, language)
+      <UpdateButton
+        handleExit={handleExit}
+        isLocationUpdated={true}
+        parentDirectory={parentDirectory}
+        location={location}
+        selectedSubPath={selectedSubPath}
+        setError={setError}
+        setIsLoading={setIsLoading}
+        propsCollections={propsCollections}
+      />
     );
     const button = getByTestId("update-geo-location");
     fireEvent.click(button);
@@ -43,29 +44,33 @@ describe("UpdateButton", () => {
 
   it("disables button when location is not updated", () => {
     const { getByText } = render(
-      new UpdateButton(
-        parentDirectory,
-        selectedSubPath,
-        location,
-        setError,
-        setIsLoading,
-        propsCollections
-      ).updateButton(false, handleExit, latitude, longitude, language)
+      <UpdateButton
+        handleExit={handleExit}
+        isLocationUpdated={false}
+        parentDirectory={parentDirectory}
+        location={location}
+        selectedSubPath={selectedSubPath}
+        setError={setError}
+        setIsLoading={setIsLoading}
+        propsCollections={propsCollections}
+      />
     );
     const button = getByText(language.key(localization.MessageAddLocation)) as HTMLButtonElement;
     expect(button.disabled).toBe(true);
   });
 
   it("enables button when location is updated", () => {
     const { getByText } = render(
-      new UpdateButton(
-        parentDirectory,
-        selectedSubPath,
-        location,
-        setError,
-        setIsLoading,
-        propsCollections
-      ).updateButton(true, handleExit, latitude, longitude, language)
+      <UpdateButton
+        handleExit={handleExit}
+        isLocationUpdated={true}
+        parentDirectory={parentDirectory}
+        location={location}
+        selectedSubPath={selectedSubPath}
+        setError={setError}
+        setIsLoading={setIsLoading}
+        propsCollections={propsCollections}
+      />
     );
     const button = getByText(language.key(localization.MessageAddLocation)) as HTMLButtonElement;
 

starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button.tsx

@@ -1,68 +1,53 @@
+import React from "react";
+import useGlobalSettings from "../../../../hooks/use-global-settings";
 import { IGeoLocationModel } from "../../../../interfaces/IGeoLocationModel";
-import localization from "../../../../localization/localization.json";
 import { Language } from "../../../../shared/language";
 import { ILatLong } from "../modal-geo";
-import { UpdateGeoLocation } from "./update-geo-location";
+import { UpdateButtonActive } from "./update-button-active";
+import { UpdateButtonDisabled } from "./update-button-disabled";
 
-export class UpdateButton {
+interface UpdateButtonProps {
   parentDirectory: string;
   selectedSubPath: string;
   location: ILatLong;
-  setError: any;
-  setIsLoading: any;
-  propsCollections: boolean | undefined;
-
-  constructor(
-    parentDirectory: string,
-    selectedSubPath: string,
-    location: ILatLong,
-    setError: React.Dispatch<React.SetStateAction<boolean>>,
-    setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
-    propsCollections?: boolean | undefined
-  ) {
-    this.parentDirectory = parentDirectory;
-    this.selectedSubPath = selectedSubPath;
-    this.location = location;
-    this.setError = setError;
-    this.setIsLoading = setIsLoading;
-    this.propsCollections = propsCollections;
-  }
-  updateButton(
-    isLocationUpdated: boolean,
-    handleExit: (result: IGeoLocationModel | null) => void,
-    latitude: number | undefined,
-    longitude: number | undefined,
-    language: Language
-  ): React.JSX.Element {
-    return isLocationUpdated ? (
-      <button
-        onClick={async () => {
-          const model = await UpdateGeoLocation(
-            this.parentDirectory,
-            this.selectedSubPath,
-            this.location,
-            this.setError,
-            this.setIsLoading,
-            this.propsCollections
-          );
-          if (model) {
-            handleExit(model);
-          }
-        }}
-        data-test="update-geo-location"
-        className="btn btn--default"
-      >
-        {!latitude && !longitude
-          ? language.key(localization.MessageAddLocation)
-          : language.key(localization.MessageUpdateLocation)}
-      </button>
-    ) : (
-      <button className="btn btn--default" disabled={true}>
-        {/* disabled */}
-        {!latitude && !longitude
-          ? language.key(localization.MessageAddLocation)
-          : language.key(localization.MessageUpdateLocation)}
-      </button>
-    );
-  }
+  setError: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  propsCollections?: boolean;
+  isLocationUpdated: boolean;
+  handleExit: (result: IGeoLocationModel | null) => void;
 }
+
+export const UpdateButton: React.FC<UpdateButtonProps> = ({
+  parentDirectory,
+  selectedSubPath,
+  location,
+  setError,
+  setIsLoading,
+  propsCollections,
+  isLocationUpdated,
+  handleExit
+}) => {
+  const settings = useGlobalSettings();
+  const language = new Language(settings.language);
+
+  return isLocationUpdated ? (
+    <UpdateButtonActive
+      parentDirectory={parentDirectory}
+      selectedSubPath={selectedSubPath}
+      location={location}
+      handleExit={handleExit}
+      latitude={location.latitude}
+      longitude={location.longitude}
+      language={language}
+      setIsLoading={setIsLoading}
+      setError={setError}
+      propsCollections={propsCollections}
+    />
+  ) : (
+    <UpdateButtonDisabled
+      language={language}
+      latitude={location.latitude}
+      longitude={location.longitude}
+    />
+  );
+};

starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.spec.tsx

@@ -2,14 +2,14 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import L, { LatLng } from "leaflet";
 import * as Modal from "../../atoms/modal/modal";
-import ModalGeo, { ILatLong } from "./modal-geo";
 import { AddDefaultClickSetMarker } from "./internal/add-default-click-set-marker";
 import * as AddDefaultMarker from "./internal/add-default-marker";
 import { GetZoom } from "./internal/get-zoom";
 import { OnDrag } from "./internal/on-drag";
 import { RealtimeMapUpdate } from "./internal/realtime-map-update";
-import { UpdateButton } from "./internal/update-button";
+import * as UpdateButton from "./internal/update-button";
 import * as updateGeoLocation from "./internal/update-geo-location";
+import ModalGeo, { ILatLong } from "./modal-geo";
 
 describe("ModalGeo", () => {
   beforeEach(() => {
@@ -194,7 +194,7 @@ describe("ModalGeo", () => {
 
     it("check if form is disabled it hides the button", async () => {
       const updateButtonSpy = jest
-        .spyOn(UpdateButton.prototype, "updateButton")
+        .spyOn(UpdateButton, "UpdateButton")
         .mockImplementationOnce(() => {
           return <div>test</div>;
         });
@@ -219,7 +219,7 @@ describe("ModalGeo", () => {
 
     it("check if form is enabled it shows the button", () => {
       const updateButtonSpy = jest
-        .spyOn(UpdateButton.prototype, "updateButton")
+        .spyOn(UpdateButton, "UpdateButton")
         .mockImplementationOnce(() => {
           return <div>test</div>;
         });
@@ -239,9 +239,19 @@ describe("ModalGeo", () => {
 
       expect(updateButtonSpy).toHaveBeenCalledTimes(2);
 
-      expect(updateButtonSpy).toHaveBeenLastCalledWith(false, expect.any(Function), 51, 3, {
-        selectedLanguage: "en"
-      });
+      expect(updateButtonSpy).toHaveBeenLastCalledWith(
+        {
+          handleExit: expect.any(Function),
+          isLocationUpdated: false,
+          location: { latitude: 51, longitude: 3 },
+          parentDirectory: "/",
+          propsCollections: undefined,
+          selectedSubPath: "/test.jpg",
+          setError: expect.any(Function),
+          setIsLoading: expect.any(Function)
+        },
+        {}
+      );
 
       modal.unmount();
     });

starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.tsx

@@ -121,16 +121,18 @@ const ModalGeo: React.FunctionComponent<IModalMoveFileProps> = ({
           >
             {language.key(localization.MessageCancel)}
           </button>
-          {isFormEnabled
-            ? new UpdateButton(
-                parentDirectory,
-                selectedSubPath,
-                location,
-                setError,
-                setIsLoading,
-                props.collections
-              ).updateButton(isLocationUpdated, props.handleExit, latitude, longitude, language)
-            : null}
+          {isFormEnabled ? (
+            <UpdateButton
+              handleExit={props.handleExit}
+              isLocationUpdated={isLocationUpdated}
+              parentDirectory={parentDirectory}
+              location={location}
+              selectedSubPath={selectedSubPath}
+              setError={setError}
+              setIsLoading={setIsLoading}
+              propsCollections={props.collections}
+            />
+          ) : null}
           <div className="lat-long">
             <b>Latitude:</b>{" "}
             <FormControl