Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Convert brand store snaps to TypeScript #4312

Merged
merged 1 commit into from
Jun 28, 2023
Merged

Convert brand store snaps to TypeScript #4312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 49 additions & 41 deletions .../js/brand-store/components/Snaps/Snaps.js → ...js/brand-store/components/Snaps/Snaps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,24 +27,30 @@ import SnapsSearch from "./SnapsSearch";
import SectionNav from "../SectionNav";
import StoreNotFound from "../StoreNotFound";

import type { BrandStores, Snap, Snaps, Members } from "../../types/shared";

function Snaps() {
const brandStoresList = useSelector(brandStoresListSelector);
const snaps = useSelector(snapsSelector);
const members = useSelector(membersSelector);
const snapsLoading = useSelector((state) => state.snaps.loading);
const storesLoading = useSelector((state) => state.brandStores.loading);
const membersLoading = useSelector((state) => state.members.loading);
const snapsNotFound = useSelector((state) => state.snaps.notFound);
const membersNotFound = useSelector((state) => state.members.notFound);
const snapsLoading = useSelector((state: Snaps) => state.snaps.loading);
const storesLoading = useSelector(
(state: BrandStores) => state.brandStores.loading
);
const membersLoading = useSelector((state: Members) => state.members.loading);
const snapsNotFound = useSelector((state: Snaps) => state.snaps.notFound);
const membersNotFound = useSelector(
(state: Members) => state.members.notFound
);
const dispatch = useDispatch();
const { id } = useParams();
const [snapsInStore, setSnapsInStore] = useState([]);
const [otherStoreIds, setOtherStoreIds] = useState([]);
const [snapsInStore, setSnapsInStore]: any = useState([]);
const [otherStoreIds, setOtherStoreIds]: any = useState([]);
const [otherStores, setOtherStores] = useState([]);
const [selectedSnaps, setSelectedSnaps] = useState([]);
const [sidePanelOpen, setSidePanelOpen] = useState(false);
const [isSaving, setIsSaving] = useState(false);
const [snapsToRemove, setSnapsToRemove] = useState([]);
const [snapsToRemove, setSnapsToRemove]: any = useState([]);
const [showAddSuccessNotification, setShowAddSuccessNotification] = useState(
false
);
Expand All @@ -54,10 +60,10 @@ function Snaps() {
setShowRemoveSuccessNotification,
] = useState(false);
const [removeSnapSaving, setRemoveSnapSaving] = useState(false);
const [nonEssentialSnapIds, setNonEssentialSnapIds] = useState([]);
const [nonEssentialSnapIds, setNonEssentialSnapIds]: any = useState([]);
const [isReloading, setIsReloading] = useState(false);
const [currentMember, setCurrentMember] = useState(null);
const [currentStore, setCurrentStore] = useState(null);
const [currentMember, setCurrentMember]: any = useState(null);
const [currentStore, setCurrentStore]: any = useState(null);
const [isPublisherOnly, setIsPublisherOnly] = useState(false);
const [isReviewerOnly, setIsReviewerOnly] = useState(false);
const [isReviewerAndPublisherOnly, setIsReviewerAndPublisherOnly] = useState(
Expand All @@ -67,10 +73,10 @@ function Snaps() {
showRemoveSnapsConfirmation,
setShowRemoveSnapsConfirmation,
] = useState(false);
const [globalStore, setGlobalStore] = useState(null);
const [globalStore, setGlobalStore]: any = useState(null);
let location = useLocation();

const getStoreName = (storeId) => {
const getStoreName = (storeId: string) => {
const store = brandStoresList.find((item) => item.id === storeId);

if (store) {
Expand All @@ -80,13 +86,11 @@ function Snaps() {
}
};

const addSnaps = (e) => {
e.preventDefault();

const addSnaps = () => {
setIsSaving(true);

const snapsToAdd = {
add: selectedSnaps.map((item) => {
add: selectedSnaps.map((item: Snap) => {
return { name: item.name };
}),
};
Expand All @@ -107,7 +111,7 @@ function Snaps() {
}
})
.then((data) => {
dispatch(fetchSnaps(id));
dispatch(fetchSnaps(id as string) as any);

// Add timeout so that the user has time to notice the save action
// in the event of it happening very fast
Expand Down Expand Up @@ -147,7 +151,7 @@ function Snaps() {
setRemoveSnapSaving(true);

const removingSnaps = {
remove: snapsToRemove.map((item) => {
remove: snapsToRemove.map((item: Snap) => {
return { name: item.name };
}),
};
Expand All @@ -168,7 +172,7 @@ function Snaps() {
}
})
.then(() => {
dispatch(fetchSnaps(id));
dispatch(fetchSnaps(id as string) as any);

// Add timeout so that the user has time to notice the save action
// in the event of it happening very fast
Expand All @@ -191,10 +195,10 @@ function Snaps() {
currentMember?.roles.length === 1 && currentMember?.roles.includes("view");

const getOtherStoreIds = () => {
const storeIds = [];
const storeIds: Array<string> = [];

snaps.forEach((snap) => {
if (snaps["other-stores"] && snap["other-stores"].length) {
if (snap["other-stores"] && snap["other-stores"].length) {
snap["other-stores"].forEach((otherStoreId) => {
if (otherStoreId !== id && !storeIds.includes(otherStoreId)) {
storeIds.push(otherStoreId);
Expand All @@ -211,8 +215,8 @@ function Snaps() {
.map((snap) => snap["included-stores"][0]);

useEffect(() => {
dispatch(fetchMembers(id));
dispatch(fetchSnaps(id));
dispatch(fetchMembers(id as string) as any);
dispatch(fetchSnaps(id as string) as any);
}, [id]);

useEffect(() => {
Expand All @@ -238,7 +242,7 @@ function Snaps() {
});

setOtherStores(
otherStoreIds.map((storeId) => {
otherStoreIds.map((storeId: string) => {
return {
id: storeId,
name: getStoreName(storeId),
Expand Down Expand Up @@ -312,10 +316,10 @@ function Snaps() {
)}
{!isReloading && (
<Row>
<Col size="6">
<Col size={6}>
{isOnlyViewer() && (
<h2 className="p-heading--4">
Snaps in {getStoreName(id)}
Snaps in {getStoreName(id || "")}
</h2>
)}

Expand Down Expand Up @@ -347,15 +351,15 @@ function Snaps() {
</>
)}
</Col>
<Col size="6">
<Col size={6}>
<SnapsFilter
setSnapsInStore={setSnapsInStore}
snapsInStore={snapsInStore}
setOtherStores={setOtherStores}
otherStoreIds={otherStoreIds}
getStoreName={getStoreName}
snaps={snaps}
id={id}
id={id || ""}
/>
</Col>
</Row>
Expand All @@ -366,14 +370,13 @@ function Snaps() {
) : (
<SnapsTable
snaps={snapsInStore}
storeName={getStoreName(id)}
storeName={getStoreName(id || "")}
otherStores={otherStores}
snapsToRemove={snapsToRemove}
setSnapsToRemove={setSnapsToRemove}
nonEssentialSnapIds={nonEssentialSnapIds}
isOnlyViewer={isOnlyViewer}
globalStore={globalStore}
includedStores={includedStores}
/>
)}
</div>
Expand All @@ -382,10 +385,11 @@ function Snaps() {
<h4>Fully included stores</h4>
<p>
In addition to the snaps listed above, all snaps from the
following stores are also included in {getStoreName(id)}.
following stores are also included in{" "}
{getStoreName(id || "")}.
</p>
<ul>
{includedStores.map((store) => (
{includedStores.map((store: any) => (
<li key={store.id}>
{store.userHasAccess ? (
<Link to={`/admin/${store.id}/snaps`}>
Expand Down Expand Up @@ -418,22 +422,23 @@ function Snaps() {
>
<div className="p-panel is-flex-column">
<div className="p-panel__header">
<h4 className="p-panel__title">Add a snap to {getStoreName(id)}</h4>
<h4 className="p-panel__title">
Add a snap to {getStoreName(id || "")}
</h4>
</div>
<div className="p-panel__content u-no-padding--top">
<div className="u-fixed-width">
<SnapsSearch
selectedSnaps={selectedSnaps}
setSelectedSnaps={setSelectedSnaps}
getStoreName={getStoreName}
storeId={id}
storeId={id || ""}
nonEssentialSnapIds={nonEssentialSnapIds}
/>
{selectedSnaps.length ? (
<ul>
{selectedSnaps.map((snap) => {
<li key={snap.id}>{snap.name}</li>;
})}
{selectedSnaps.map((snap: Snap) => (
<li key={snap.id}>{snap.name}</li>
))}
</ul>
) : null}
</div>
Expand All @@ -453,7 +458,10 @@ function Snaps() {
<Button
appearance="positive"
disabled={selectedSnaps.length < 1 || isSaving}
onClick={addSnaps}
onClick={(e) => {
e.preventDefault();
addSnaps();
}}
className={`u-no-margin--bottom u-no-margin--right ${
isSaving ? "has-icon is-dark" : ""
}`}
Expand Down Expand Up @@ -539,7 +547,7 @@ function Snaps() {
>
{snapsToRemove.length > 1 && (
<ul>
{snapsToRemove.map((snapToRemove) => (
{snapsToRemove.map((snapToRemove: Snap) => (
<li key={snapToRemove.id}>
<strong>{snapToRemove.name}</strong>
</li>
Expand Down
33 changes: 19 additions & 14 deletions ...and-store/components/Snaps/SnapsFilter.js → ...nd-store/components/Snaps/SnapsFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
import React from "react";
import PropTypes from "prop-types";
import React, { KeyboardEvent } from "react";

import type { SnapsList } from "../../types/shared";

type Props = {
setSnapsInStore: Function;
snapsInStore: SnapsList;
setOtherStores: Function;
otherStoreIds: Array<string>;
getStoreName: Function;
snaps: SnapsList;
id: string;
};

function SnapsFilter({
setSnapsInStore,
Expand All @@ -9,7 +20,7 @@ function SnapsFilter({
getStoreName,
snaps,
id,
}) {
}: Props) {
return (
<div className="p-search-box">
<input
Expand All @@ -19,7 +30,11 @@ function SnapsFilter({
id="search-snaps"
placeholder="Search snaps"
autoComplete="off"
onKeyUp={(e) => {
onKeyUp={(
e: KeyboardEvent<HTMLInputElement> & {
target: HTMLInputElement;
}
) => {
if (e.target.value) {
setSnapsInStore(
snapsInStore.filter((snap) =>
Expand Down Expand Up @@ -60,14 +75,4 @@ function SnapsFilter({
);
}

SnapsFilter.propTypes = {
setSnapsInStore: PropTypes.func.isRequired,
snapsInStore: PropTypes.array.isRequired,
setOtherStores: PropTypes.func.isRequired,
otherStoreIds: PropTypes.array.isRequired,
getStoreName: PropTypes.func.isRequired,
snaps: PropTypes.array.isRequired,
id: PropTypes.string.isRequired,
};

export default SnapsFilter;
Loading