Skip to content

Commit

Permalink
Merge pull request #1310 from qdraw/feature/202312_code_smells_14
Browse files Browse the repository at this point in the history 
code style && change to button and menuOption/menuOptionModal
  • Loading branch information
@qdraw
qdraw authored Dec 14, 2023
2 parents 33fac70 + 05f9360 commit 2c9a77a
Show file tree
Hide file tree
Showing 12 changed files with 245 additions and 130 deletions.
4 changes: 2 additions & 2 deletions starsky/starsky/clientapp/.storybook/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const config: StorybookConfig = {
autodocs: "tag"
},
core: {
disableTelemetry: true, // 👈 Disables telemetry
},
disableTelemetry: true // 👈 Disables telemetry
}
};
export default config;
22 changes: 0 additions & 22 deletions starsky/starsky/clientapp/src/components/molecules/item-list-view/item-list-view.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
import React, { memo, useEffect } from "react";
import useGlobalSettings from "../../../hooks/use-global-settings";
import useLocation from "../../../hooks/use-location/use-location";
import { PageType } from "../../../interfaces/IDetailView";
import { IFileIndexItem } from "../../../interfaces/IFileIndexItem";
import { INavigateState } from "../../../interfaces/INavigateState";
import localization from "../../../localization/localization.json";
import { Language } from "../../../shared/language";
import { URLPath } from "../../../shared/url-path";
import { UrlQuery } from "../../../shared/url-query";
import FlatListItem from "../../atoms/flat-list-item/flat-list-item";
import ListImageChildItem from "../../atoms/list-image-child-item/list-image-child-item";
import ListImageViewSelectContainer from "../list-image-view-select-container/list-image-view-select-container";
Expand All @@ -29,16 +25,6 @@ const ItemListView: React.FunctionComponent<ItemListProps> = memo((props) => {
const history = useLocation();
const folderRef = React.useRef<HTMLDivElement>(null);

// Content
const settings = useGlobalSettings();
const language = new Language(settings.language);
const MessageNoPhotosInFolder = language.key(
localization.MessageNoPhotosInFolder
);
const MessageNewUserNoPhotosInFolder = language.key(
localization.MessageNewUserNoPhotosInFolder
);

useEffect(() => {
const navigationState = history.location.state as INavigateState;

Expand Down Expand Up @@ -82,14 +68,6 @@ const ItemListView: React.FunctionComponent<ItemListProps> = memo((props) => {
colorClassUsage={props.colorClassUsage}
/>

{props.pageType !== PageType.Loading &&
items.length === 0 &&
props.subPath === "/" ? (
<a className="warning-box" href={new UrlQuery().UrlPreferencesPage()}>
{MessageNewUserNoPhotosInFolder} {MessageNoPhotosInFolder}
</a>
) : null}

{items.map((item) => (
<ListImageViewSelectContainer
item={item}
Expand Down
24 changes: 23 additions & 1 deletion ...clientapp/src/components/molecules/item-list-view/shared/warning-box-no-photos-filter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { memo } from "react";
import React, { memo } from "react";
import useGlobalSettings from "../../../../hooks/use-global-settings";
import { PageType } from "../../../../interfaces/IDetailView";
import { IFileIndexItem } from "../../../../interfaces/IFileIndexItem";
import localization from "../../../../localization/localization.json";
import { Language } from "../../../../shared/language";
import { UrlQuery } from "../../../../shared/url-query.ts";

interface IWarningBoxNoPhotosFilterProps {
pageType: PageType | undefined;
Expand All @@ -24,6 +25,10 @@ export const WarningBoxNoPhotosFilter: React.FunctionComponent<IWarningBoxNoPhot
localization.MessageItemsOutsideFilter
);

const MessageNewUserNoPhotosInFolder = language.key(
localization.MessageNewUserNoPhotosInFolder
);

let warningBox = null;

if (
Expand Down Expand Up @@ -52,5 +57,22 @@ export const WarningBoxNoPhotosFilter: React.FunctionComponent<IWarningBoxNoPhot
}
}

// only on the home page there is a link to the preferences page
if (
pageType !== PageType.Loading &&
subPath === "/" &&
items.length === 0
) {
warningBox = (
<a
className="warning-box"
href={new UrlQuery().UrlPreferencesPage()}
data-test="list-view-no-photos-in-folder"
>
{MessageNewUserNoPhotosInFolder} {MessageNoPhotosInFolder}
</a>
);
}

return <>{warningBox}</>;
});
4 changes: 2 additions & 2 deletions starsky/starsky/clientapp/src/components/organisms/menu-search/menu-search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export const MenuSearch: React.FunctionComponent<IMenuSearchProps> = ({

{/* the select button with checkbox*/}
{!select ? (
<div
<button
className={
state.fileIndexItems.length >= 1
? "item item--select"
Expand All @@ -135,7 +135,7 @@ export const MenuSearch: React.FunctionComponent<IMenuSearchProps> = ({
}}
>
{MessageSelectAction}
</div>
</button>
) : null}

{/* when selected */}
Expand Down
51 changes: 19 additions & 32 deletions starsky/starsky/clientapp/src/components/organisms/menu-trash/menu-trash.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ import { MenuOptionSelectionUndo } from "../../molecules/menu-option-selection-u
import { MenuSelectCount } from "../../molecules/menu-select-count/menu-select-count";
import ModalForceDelete from "../modal-force-delete/modal-force-delete";
import NavContainer from "../nav-container/nav-container";
import MenuOption from "../../atoms/menu-option/menu-option.tsx";
import localization from "../../../localization/localization.json";
import MenuOptionModal from "../../atoms/menu-option-modal/menu-option-modal.tsx";

export interface IMenuTrashProps {
state: IArchiveProps;
Expand All @@ -35,14 +38,6 @@ const MenuTrash: React.FunctionComponent<IMenuTrashProps> = ({

// Content
const MessageSelectAction = language.text("Selecteer", "Select");
const MessageRestoreFromTrash = language.text(
"Zet terug uit prullenmand",
"Restore from Trash"
);
const MessageDeleteImmediately = language.text(
"Verwijder onmiddellijk",
"Delete immediately"
);

const [hamburgerMenu, setHamburgerMenu] = React.useState(false);
const [isLoading, setIsLoading] = React.useState(false);
Expand Down Expand Up @@ -139,7 +134,7 @@ const MenuTrash: React.FunctionComponent<IMenuTrashProps> = ({
/>

{!select && state.fileIndexItems.length >= 1 ? (
<div
<button
data-test="menu-trash-item-select"
className="item item--select"
onClick={() => {
Expand All @@ -150,7 +145,7 @@ const MenuTrash: React.FunctionComponent<IMenuTrashProps> = ({
}}
>
{MessageSelectAction}
</div>
</button>
) : null}

{/* there are no items in the trash */}
Expand Down Expand Up @@ -200,28 +195,20 @@ const MenuTrash: React.FunctionComponent<IMenuTrashProps> = ({
allSelection={allSelection}
/>

<li
className="menu-option"
data-test="restore-from-trash"
onClick={() => undoTrash()}
tabIndex={0}
onKeyDown={(event) => {
event.key === "Enter" && undoTrash();
}}
>
{MessageRestoreFromTrash}
</li>
<li
className="menu-option"
data-test="delete"
onClick={() => setIsModalDeleteOpen(true)}
tabIndex={0}
onKeyDown={(event) => {
event.key === "Enter" && setIsModalDeleteOpen(true);
}}
>
{MessageDeleteImmediately}
</li>
<MenuOption
isReadOnly={false}
testName="restore-from-trash"
onClickKeydown={() => undoTrash()}
localization={localization.MessageRestoreFromTrash}
/>

<MenuOptionModal
isReadOnly={false}
testName="delete"
set={setIsModalDeleteOpen}
isSet={isModalDeleteOpen}
localization={localization.MessageDeleteImmediately}
/>
</MoreMenu>
) : null}

Expand Down
Loading

1 comment on commit 2c9a77a

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://starskyapp.netlify.app as production
🚀 Deployed on https://657b6471eb6d7d1d02cc5840--starskyapp.netlify.app

Please sign in to comment.