Skip to content

Commit

Permalink
Convert brand store snaps to TypeScript
Browse files Browse the repository at this point in the history
  • Loading branch information
@steverydz
steverydz committed Jun 28, 2023
1 parent 1ef6be4 commit 3e46145
Show file tree
Hide file tree
Showing 8 changed files with 203 additions and 153 deletions.
90 changes: 49 additions & 41 deletions .../js/brand-store/components/Snaps/Snaps.js → ...js/brand-store/components/Snaps/Snaps.tsx
View file
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
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

0 comments on commit 3e46145

Please sign in to comment.