mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-13 21:32:18 +00:00
featured tab conflicts fix
This commit is contained in:
bflatastic committed
1 parent
63f8ef1dd7
commit
8ddd78e238
1 file changed
+161
-130
@@ -1,154 +1,185 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import React, { useRef, useState } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
|
||||
import MediaCards from "components/common/Card/MediaCards";
|
||||
import { Link } from "react-router-dom";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faChevronRight } from "@fortawesome/pro-solid-svg-icons";
|
||||
import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
|
||||
import { useBookmarks, useRatings } from "hooks";
|
||||
import { ListFeaturedMediaFiles } from "@storyteller/components/src/api/media_files/ListFeaturedMediaFiles";
|
||||
import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes";
|
||||
import { Button, TempSelect as Select } from "components/common";
|
||||
import {
|
||||
faArrowDownWideShort,
|
||||
faFilter,
|
||||
} from "@fortawesome/pro-solid-svg-icons";
|
||||
import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContext";
|
||||
import SkeletonCard from "components/common/Card/SkeletonCard";
|
||||
// import { SegmentButtons } from "components/common";
|
||||
import "./FeaturedTab.scss";
|
||||
import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
|
||||
import {
|
||||
useBookmarks,
|
||||
useLazyLists,
|
||||
useLocalize,
|
||||
useOnScreen,
|
||||
useRatings,
|
||||
} from "hooks";
|
||||
import InfiniteScroll from "react-infinite-scroll-component";
|
||||
import prepFilter from "resources/prepFilter";
|
||||
import { ListFeaturedMediaFiles } from "@storyteller/components/src/api/media_files/ListFeaturedMediaFiles";
|
||||
import {
|
||||
EntityInputMode,
|
||||
EntityFilterOptions,
|
||||
} from "components/entities/EntityTypes";
|
||||
|
||||
export default function FeaturedTab() {
|
||||
const { pathname: source } = useLocation();
|
||||
export default function MediaTab() {
|
||||
const { pathname: source, search } = useLocation();
|
||||
const urlQueries = new URLSearchParams(search);
|
||||
const bookmarks = useBookmarks();
|
||||
const ratings = useRatings();
|
||||
const toTopBtnRef = useRef<HTMLDivElement | null>(null);
|
||||
const onScreen = useOnScreen(toTopBtnRef, "0px");
|
||||
const { t } = useLocalize("EntityGeneral");
|
||||
|
||||
const gridContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
const [mediaType, mediaTypeSet] = useState(
|
||||
urlQueries.get("filter_media_type") || "video"
|
||||
);
|
||||
const [showMasonryGrid, setShowMasonryGrid] = useState(true);
|
||||
const [list, listSet] = useState<MediaFile[]>([]);
|
||||
const [
|
||||
listType,
|
||||
// listTypeSet
|
||||
] = useState("media");
|
||||
// const [showMasonryGrid, setShowMasonryGrid] = useState(true);
|
||||
const [status, statusSet] = useState(FetchStatus.ready);
|
||||
const isLoading =
|
||||
status === FetchStatus.ready || status === FetchStatus.in_progress;
|
||||
const media = useLazyLists({
|
||||
addQueries: {
|
||||
page_size: urlQueries.get("page_size") || "24",
|
||||
...prepFilter(mediaType, "filter_media_type"),
|
||||
},
|
||||
addSetters: { mediaTypeSet },
|
||||
fetcher: ListFeaturedMediaFiles,
|
||||
list,
|
||||
listSet,
|
||||
onInputChange: () => setShowMasonryGrid(false),
|
||||
onSuccess: res => {
|
||||
ratings.gather({ res, expand: true, key: "token" }); // expand rather than replace for lazy loading
|
||||
bookmarks.gather({ res, expand: true, key: "token" }); // expand rather than replace for lazy loading
|
||||
setShowMasonryGrid(true);
|
||||
},
|
||||
requestList: true,
|
||||
});
|
||||
|
||||
// const options = [{ label: "Media", value: "media" },{ label: "Weights", value: "weight" }];
|
||||
// const onChange = ({ target }: any) => {
|
||||
// listTypeSet(target.value === "weight" ? target.value : "media");
|
||||
// // clear list
|
||||
// // statusSet(FetchStatus.ready)
|
||||
// };
|
||||
const filterOptions = EntityFilterOptions(EntityInputMode.media, t);
|
||||
|
||||
useEffect(() => {
|
||||
if (status === FetchStatus.ready) {
|
||||
statusSet(FetchStatus.in_progress);
|
||||
if (listType === "media") {
|
||||
ListFeaturedMediaFiles("", {}).then((res: any) => {
|
||||
console.log("🏮", res);
|
||||
statusSet(FetchStatus.success);
|
||||
if (res.results) {
|
||||
listSet(res.results);
|
||||
}
|
||||
});
|
||||
}
|
||||
// else if (listType === "weight") {}
|
||||
}
|
||||
}, [listType, status]);
|
||||
const sortOptions = [
|
||||
{ value: false, label: "Newest" },
|
||||
{ value: true, label: "Oldest" },
|
||||
// { value: "mostliked", label: "Most Liked" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="d-flex flex-column gap-4">
|
||||
<div>
|
||||
<div className="fy-featured-header mb-3">
|
||||
<h3 className="fw-semibold mb-0">Featured</h3>
|
||||
{
|
||||
// <SegmentButtons {...{ onChange, options, value: listType }}/> // switch between media/weights control
|
||||
}
|
||||
<Link to="/explore/media">
|
||||
View media
|
||||
<FontAwesomeIcon icon={faChevronRight} className="ms-2" />
|
||||
</Link>
|
||||
<>
|
||||
<div className="d-flex flex-wrap gap-3 mb-3">
|
||||
<div className="d-flex flex-grow-1 flex-wrap gap-2">
|
||||
<Select
|
||||
{...{
|
||||
icon: faArrowDownWideShort,
|
||||
options: sortOptions,
|
||||
name: "sort",
|
||||
onChange: media.onChange,
|
||||
value: media.sort,
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
{...{
|
||||
icon: faFilter,
|
||||
options: filterOptions,
|
||||
name: "mediaType",
|
||||
onChange: media.onChange,
|
||||
value: mediaType,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isLoading && !list.length ? (
|
||||
{media.urlCursor ? (
|
||||
<div>
|
||||
<Button
|
||||
{...{
|
||||
className: `to-top-button`,
|
||||
buttonRef: toTopBtnRef,
|
||||
label: "Back to top",
|
||||
onClick: () => media.reset(),
|
||||
small: true,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{media.urlCursor && !onScreen ? (
|
||||
<Button
|
||||
{...{
|
||||
className: `to-top-button-off-screen`,
|
||||
label: "Back to top",
|
||||
onClick: () => media.reset(),
|
||||
small: true,
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
<AudioPlayerProvider>
|
||||
{media.isLoading && !media.list.length ? (
|
||||
<div className="row gx-3 gy-3">
|
||||
{Array.from({ length: 12 }).map((_, index) => (
|
||||
<SkeletonCard key={index} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{list.length === 0 && status === 3 ? (
|
||||
<div className="text-center mt-4 opacity-75">
|
||||
No featured media.
|
||||
</div>
|
||||
) : (
|
||||
<MasonryGrid
|
||||
gridRef={gridContainerRef}
|
||||
onLayoutComplete={() => console.log("Layout complete!")}
|
||||
>
|
||||
{list.map((data: any, key: number) => {
|
||||
let props = {
|
||||
bookmarks,
|
||||
data,
|
||||
ratings,
|
||||
showCreator: true,
|
||||
source,
|
||||
type: "media",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
{...{
|
||||
className:
|
||||
"col-12 col-sm-6 col-lg-6 col-xl-4 col-xxl-3 grid-item",
|
||||
key,
|
||||
}}
|
||||
>
|
||||
<MediaCards {...{ type: data.media_type, props }} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</MasonryGrid>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{/* <div>
|
||||
<div className="d-flex align-items-center mb-3">
|
||||
<h3 className="fw-semibold mb-0 flex-grow-1">
|
||||
Featured Image Weights
|
||||
</h3>
|
||||
<Link to="/explore/weights">
|
||||
View all
|
||||
<FontAwesomeIcon icon={faChevronRight} className="ms-2" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="row gx-3 gy-3">
|
||||
{Array.from({ length: 6 }).map((_, index) => (
|
||||
<SkeletonCard key={index} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<MasonryGrid
|
||||
gridRef={gridContainerRef}
|
||||
onLayoutComplete={() => console.log("Layout complete!")}
|
||||
>
|
||||
{data.map((data, index) => {
|
||||
let card = (
|
||||
<ImageCard
|
||||
key={index}
|
||||
data={data}
|
||||
type="weights"
|
||||
showCreator={true}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<div key={index} className="col-12 col-sm-6 col-lg-6 col-xl-4 col-xxl-3 grid-item">
|
||||
{card}
|
||||
<InfiniteScroll
|
||||
dataLength={media.list.length}
|
||||
next={media.getMore}
|
||||
hasMore={!media.list.length || !!media.next}
|
||||
loader={
|
||||
media.list.length !== 0 &&
|
||||
media.isLoading && (
|
||||
<div className="mt-4 d-flex justify-content-center">
|
||||
<div className="spinner-border text-light" role="status">
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</MasonryGrid>
|
||||
)
|
||||
}
|
||||
endMessage={
|
||||
<p className="text-center mt-4 opacity-75">No more results.</p>
|
||||
}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
{showMasonryGrid && (
|
||||
<>
|
||||
{media.list.length === 0 && media.status === 3 ? (
|
||||
<div className="text-center mt-4 opacity-75">
|
||||
No media created yet.
|
||||
</div>
|
||||
) : (
|
||||
<MasonryGrid
|
||||
gridRef={gridContainerRef}
|
||||
onLayoutComplete={() => console.log("Layout complete!")}
|
||||
>
|
||||
{media.list.map((data: any, key: number) => {
|
||||
let props = {
|
||||
bookmarks,
|
||||
data,
|
||||
source,
|
||||
ratings,
|
||||
type: "media",
|
||||
showCreator: true,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
{...{
|
||||
className:
|
||||
"col-12 col-sm-6 col-lg-6 col-xl-4 col-xxl-3 grid-item",
|
||||
key,
|
||||
}}
|
||||
>
|
||||
<MediaCards {...{ type: data.media_type, props }} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</MasonryGrid>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</InfiniteScroll>
|
||||
)}
|
||||
</div> */}
|
||||
</div>
|
||||
</AudioPlayerProvider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user