Skip to content

Commit

Permalink
split app settings in sperate module
Browse files Browse the repository at this point in the history
  • Loading branch information
@qdraw
qdraw committed Feb 23, 2024
1 parent b8f8330 commit ca37ef2
Show file tree
Hide file tree
Showing 9 changed files with 174 additions and 222 deletions.
12 changes: 12 additions & 0 deletions .../components/organisms/preference-app-settings-desktop/preference-app-settings-desktop.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from "react";

const PreferencesAppSettingsDesktop: React.FunctionComponent = () => {
return (
<>
<p>Desktop</p>
Only used when using Starsky as desktop
</>
);
};

export default PreferencesAppSettingsDesktop;
127 changes: 8 additions & 119 deletions ...ettings/preferences-app-settings.spec.tsx → ...nces-app-settings-storage-folder.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,18 @@
import { act, createEvent, fireEvent, render, screen, waitFor } from "@testing-library/react";
import { act, createEvent, fireEvent, render, screen } from "@testing-library/react";
import * as useFetch from "../../../hooks/use-fetch";
import { IConnectionDefault, newIConnectionDefault } from "../../../interfaces/IConnectionDefault";
import * as FetchPost from "../../../shared/fetch/fetch-post";
import { UrlQuery } from "../../../shared/url-query";
import PreferencesAppSettings, { ChangeSetting } from "./preferences-app-settings";
import PreferencesAppSettingsStorageFolder, {
ChangeSetting
} from "./preferences-app-settings-storage-folder";

describe("PreferencesAppSettings", () => {
it("renders", () => {
render(<PreferencesAppSettings />);
render(<PreferencesAppSettingsStorageFolder />);
});

describe("context", () => {
it("disabled by default", () => {
// usage ==> import * as useFetch from '../../../hooks/use-fetch';
jest
.spyOn(useFetch, "default")
.mockImplementationOnce(() => newIConnectionDefault())
.mockImplementationOnce(() => newIConnectionDefault());

const component = render(<PreferencesAppSettings />);

const switchButtons = screen.queryAllByTestId("switch-button-right");

const verbose = switchButtons.find(
(p) => p.getAttribute("name") === "verbose"
) as HTMLInputElement;

expect(verbose.disabled).toBeTruthy();

component.unmount();
});

it("not disabled when admin", () => {
const connectionDefault = {
statusCode: 200,
data: ["AppSettingsWrite"]
} as IConnectionDefault;
// usage ==> import * as useFetch from '../../../hooks/use-fetch';
jest
.spyOn(useFetch, "default")
.mockImplementationOnce(() => connectionDefault)
.mockImplementationOnce(() => connectionDefault)
.mockImplementationOnce(() => connectionDefault)
.mockImplementationOnce(() => connectionDefault);

const component = render(<PreferencesAppSettings />);

const switchButtons = screen.queryAllByTestId("switch-button-right");

const verbose = switchButtons.find(
(p) => p.getAttribute("name") === "verbose"
) as HTMLInputElement;

expect(verbose.disabled).toBeFalsy();

component.unmount();
});

it("filled right data", () => {
const permissions = {
statusCode: 200,
Expand All @@ -78,7 +34,7 @@ describe("PreferencesAppSettings", () => {
.mockImplementationOnce(() => permissions)
.mockImplementationOnce(() => appSettings);

const component = render(<PreferencesAppSettings />);
const component = render(<PreferencesAppSettingsStorageFolder />);

const formControls = screen.queryAllByTestId("form-control");

Expand Down Expand Up @@ -124,7 +80,7 @@ describe("PreferencesAppSettings", () => {
.spyOn(FetchPost, "default")
.mockImplementationOnce(() => mockIConnectionDefault);

const component = render(<PreferencesAppSettings />);
const component = render(<PreferencesAppSettingsStorageFolder />);

const formControls = screen
.queryAllByTestId("form-control")
Expand Down Expand Up @@ -181,7 +137,7 @@ describe("PreferencesAppSettings", () => {
.spyOn(FetchPost, "default")
.mockImplementationOnce(() => mockIConnectionDefault);

const component = render(<PreferencesAppSettings />);
const component = render(<PreferencesAppSettingsStorageFolder />);

const formControls = screen
.queryAllByTestId("form-control")
Expand Down Expand Up @@ -210,76 +166,9 @@ describe("PreferencesAppSettings", () => {
component.unmount();
});
});

it("toggle verbose", async () => {
const permissions = {
statusCode: 200,
data: ["AppSettingsWrite"]
} as IConnectionDefault;
const appSettings = {
statusCode: 200,
data: {
verbose: true,
storageFolder: "test"
}
} as IConnectionDefault;

// usage ==> import * as useFetch from '../../../hooks/use-fetch';
jest
.spyOn(useFetch, "default")
.mockReset()
.mockImplementationOnce(() => permissions)
.mockImplementationOnce(() => appSettings)
.mockImplementationOnce(() => permissions)
.mockImplementationOnce(() => appSettings)
.mockImplementationOnce(() => permissions)
.mockImplementationOnce(() => appSettings)
.mockImplementationOnce(() => permissions)
.mockImplementationOnce(() => appSettings)
.mockImplementationOnce(() => permissions)
.mockImplementationOnce(() => appSettings);

const component = render(<PreferencesAppSettings />);

const fetchPostSpy = jest
.spyOn(FetchPost, "default")
.mockReset()
.mockImplementationOnce(() => {
return Promise.resolve({
statusCode: 400,
data: null
});
});

const switchButtons = screen.queryAllByTestId("switch-button-right");

const verbose = switchButtons.find(
(p) => p.getAttribute("name") === "verbose"
) as HTMLElement;

verbose.click();

await waitFor(() => expect(fetchPostSpy).toHaveBeenCalled());

component.unmount();
});
});

describe("ChangeSetting", () => {
it("should set value with empty string as name when name is not provided", async () => {
const value = "test value";
const fetchPostSpy = jest.spyOn(FetchPost, "default").mockImplementationOnce(() => {
return Promise.resolve({
statusCode: 200,
data: null
});
});

const statusCode = await ChangeSetting(value);
expect(statusCode).toBe(200);
expect(fetchPostSpy).toHaveBeenCalled();
});

it("should set value with provided name when name is provided", async () => {
const value = "test value";
const name = "test name";
Expand Down
11 changes: 11 additions & 0 deletions ...eferences-app-settings-storage-folder/preferences-app-settings-storage-folder.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import PreferencesAppSettingsStorageFolder from "./preferences-app-settings-storage-folder";

export default {
title: "components/organisms/preferences-app-settings-storage-folder"
};

export const Default = () => {
return <PreferencesAppSettingsStorageFolder />;
};

Default.storyName = "default";
101 changes: 101 additions & 0 deletions ...nisms/preferences-app-settings-storage-folder/preferences-app-settings-storage-folder.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import React, { useEffect, useState } from "react";
import useFetch from "../../../hooks/use-fetch";
import useGlobalSettings from "../../../hooks/use-global-settings";
import { IAppSettings } from "../../../interfaces/IAppSettings";
import localization from "../../../localization/localization.json";
import FetchPost from "../../../shared/fetch/fetch-post";
import { Language } from "../../../shared/language";
import { UrlQuery } from "../../../shared/url-query";
import FormControl from "../../atoms/form-control/form-control";
export async function ChangeSetting(value: string, name?: string): Promise<number> {
const bodyParams = new URLSearchParams();
bodyParams.set(name ?? "", value);
const result = await FetchPost(new UrlQuery().UrlApiAppSettings(), bodyParams.toString());
return result?.statusCode;
}

const PreferencesAppSettingsStorageFolder: React.FunctionComponent = () => {
const settings = useGlobalSettings();
const language = new Language(settings.language);
const MessageAppSettingsEntireAppScope = language.key(
localization.MessageAppSettingsEntireAppScope
);
const MessageChangeNeedReSync = language.key(localization.MessageChangeNeedReSync);
const MessageAppSettingsStorageFolder = language.key(
localization.MessageAppSettingsStorageFolder
);
const MessageAppSettingStorageFolderSaveFail = language.key(
localization.MessageAppSettingStorageFolderSaveFail
);
const MessageAppSettingStorageFolderEnvUsedFail = language.key(
localization.MessageAppSettingStorageFolderEnvUsedFail
);

const permissionsData = useFetch(new UrlQuery().UrlAccountPermissions(), "get");

const [isEnabled, setIsEnabled] = useState(false);

useEffect(() => {
function permissions(): boolean {
if (!permissionsData?.data?.includes || permissionsData?.statusCode !== 200) {
return false;
}
return permissionsData.data.includes("AppSettingsWrite");
}

setIsEnabled(permissions());
}, [permissionsData]);

const [storageFolderNotFound, setStorageFolderNotFound] = useState(false);

const appSettings = useFetch(new UrlQuery().UrlApiAppSettings(), "get")
?.data as IAppSettings | null;

const [storageFolder, setStorageFolder] = useState(appSettings?.storageFolder);

// const [defaultDesktopEditor, setDefaultDesktopEditor] = useState(
// appSettings?.defaultDesktopEditor
// );

useEffect(() => {
setStorageFolder(appSettings?.storageFolder);
}, [appSettings]);

return (
<>
<div className="warning-box warning-box--optional">{MessageAppSettingsEntireAppScope}</div>
<h4>{MessageAppSettingsStorageFolder} </h4>
<FormControl
name="storageFolder"
onBlur={async (e) => {
const resultStatusCode = await ChangeSetting(e.target.innerText, "storageFolder");
setStorageFolder(e.target.innerText);
setStorageFolderNotFound(resultStatusCode === 404);
}}
contentEditable={isEnabled && appSettings?.storageFolderAllowEdit === true}
>
{storageFolder}
</FormControl>

{storageFolderNotFound ? (
<div className="warning-box" data-test="storage-not-found">
{MessageAppSettingStorageFolderSaveFail}
</div>
) : null}

{storageFolder !== appSettings?.storageFolder && !storageFolderNotFound ? (
<div className="warning-box" data-test="storage-changed">
{MessageChangeNeedReSync}
</div>
) : null}

{appSettings?.storageFolderAllowEdit !== true ? (
<div className="warning-box" data-test="storage-env">
{MessageAppSettingStorageFolderEnvUsedFail}
</div>
) : null}
</>
);
};

export default PreferencesAppSettingsStorageFolder;
Loading

0 comments on commit ca37ef2

Please sign in to comment.