Merge pull request #1774 from qdraw/feature/202410_update_btn_code_sm…

…ell_17

refactor update btn

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

@@ -0,0 +1,63 @@
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import localization from "../../../../localization/localization.json";
+import { Language, SupportedLanguages } from "../../../../shared/language";
+import { ILatLong } from "../modal-geo";
+import { UpdateButtonActive } from "./update-button-active";
+import { UpdateButtonWrapper } from "./update-button-wrapper";
+import { UpdateGeoLocation } from "./update-geo-location";
+
+jest.mock("./update-geo-location");
+
+describe("UpdateButtonActive", () => {
+  const parentDirectory = "parentDirectory";
+  const selectedSubPath = "selectedSubPath";
+  const location: ILatLong = { latitude: 0, longitude: 0 };
+  const setError = jest.fn();
+  const setIsLoading = jest.fn();
+  const propsCollections = true;
+  const handleExit = jest.fn();
+  const language = new Language(SupportedLanguages.en);
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("[UpdateButtonActive] calls UpdateGeoLocation when clicked and updates location", async () => {
+    (UpdateGeoLocation as jest.Mock).mockResolvedValueOnce({} as any);
+
+    const { getByTestId } = render(
+      <UpdateButtonActive
+        handleExit={handleExit}
+        parentDirectory={parentDirectory}
+        location={location}
+        language={language}
+        selectedSubPath={selectedSubPath}
+        setError={setError}
+        setIsLoading={setIsLoading}
+        propsCollections={propsCollections}
+      />
+    );
+    const button = getByTestId("update-geo-location");
+    fireEvent.click(button);
+    await waitFor(() => expect(UpdateGeoLocation).toHaveBeenCalledTimes(1));
+    expect(handleExit).toHaveBeenCalledTimes(1);
+  });
+
+  it("[UpdateButtonActive] enables button when location is updated", () => {
+    const { getByText } = render(
+      <UpdateButtonWrapper
+        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;
+
+    expect(button.disabled).toBe(false);
+  });
+});

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.spec.tsx

@@ -0,0 +1,22 @@
+import { render } from "@testing-library/react";
+import localization from "../../../../localization/localization.json";
+import { Language, SupportedLanguages } from "../../../../shared/language";
+import { ILatLong } from "../modal-geo";
+import { UpdateButtonDisabled } from "./update-button-disabled";
+
+describe("UpdateButtonActive", () => {
+  const location: ILatLong = { latitude: 0, longitude: 0 };
+  const language = new Language(SupportedLanguages.en);
+
+  it("[disabledBtn] disables button when location is not updated", () => {
+    const { getByText } = render(
+      <UpdateButtonDisabled
+        language={language}
+        latitude={location.latitude}
+        longitude={location.longitude}
+      />
+    );
+    const button = getByText(language.key(localization.MessageAddLocation)) as HTMLButtonElement;
+    expect(button.disabled).toBe(true);
+  });
+});

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 → starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-wrapper.spec.tsx

@@ -2,70 +2,75 @@ import { fireEvent, render, waitFor } from "@testing-library/react";
 import localization from "../../../../localization/localization.json";
 import { Language, SupportedLanguages } from "../../../../shared/language";
 import { ILatLong } from "../modal-geo";
-import { UpdateButton } from "./update-button";
+import { UpdateButtonWrapper } from "./update-button-wrapper";
 import { UpdateGeoLocation } from "./update-geo-location";
 
 jest.mock("./update-geo-location");
 
-describe("UpdateButton", () => {
+describe("UpdateButtonWrapper", () => {
   const parentDirectory = "parentDirectory";
   const selectedSubPath = "selectedSubPath";
   const location: ILatLong = { latitude: 0, longitude: 0 };
   const setError = jest.fn();
   const setIsLoading = jest.fn();
   const propsCollections = true;
   const handleExit = jest.fn();
-  const latitude = 0;
-  const longitude = 0;
   const language = new Language(SupportedLanguages.en);
 
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it("calls UpdateGeoLocation when clicked and updates location", async () => {
+  it("[wrapper] 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)
+      <UpdateButtonWrapper
+        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);
     await waitFor(() => expect(UpdateGeoLocation).toHaveBeenCalledTimes(1));
     expect(handleExit).toHaveBeenCalledTimes(1);
   });
 
-  it("disables button when location is not updated", () => {
+  it("[wrapper] disables button when location is not updated", () => {
     const { getByText } = render(
-      new UpdateButton(
-        parentDirectory,
-        selectedSubPath,
-        location,
-        setError,
-        setIsLoading,
-        propsCollections
-      ).updateButton(false, handleExit, latitude, longitude, language)
+      <UpdateButtonWrapper
+        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", () => {
+  it("[wrapper] enables button when location is updated", () => {
     const { getByText } = render(
-      new UpdateButton(
-        parentDirectory,
-        selectedSubPath,
-        location,
-        setError,
-        setIsLoading,
-        propsCollections
-      ).updateButton(true, handleExit, latitude, longitude, language)
+      <UpdateButtonWrapper
+        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-wrapper.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import useGlobalSettings from "../../../../hooks/use-global-settings";
+import { IGeoLocationModel } from "../../../../interfaces/IGeoLocationModel";
+import { Language } from "../../../../shared/language";
+import { ILatLong } from "../modal-geo";
+import { UpdateButtonActive } from "./update-button-active";
+import { UpdateButtonDisabled } from "./update-button-disabled";
+
+interface IUpdateButtonWrapperProps {
+  parentDirectory: string;
+  selectedSubPath: string;
+  location: ILatLong;
+  setError: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  propsCollections?: boolean;
+  isLocationUpdated: boolean;
+  handleExit: (result: IGeoLocationModel | null) => void;
+}
+
+export const UpdateButtonWrapper: React.FC<IUpdateButtonWrapperProps> = ({
+  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}
+    />
+  );
+};