diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 01fda97..5019140 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -4,10 +4,6 @@ import { useEffect, useRef, useState } from "react"; import { getJSON, itemsOrEmpty, readJSONCache, type Category } from "../../api"; import { CategoryIcon } from "../../components/CategoryIcon"; import { FigmaBanner } from "../../components/FigmaBanner"; -import { - ComingSoonLatestUpdateRow, - LatestUpdateRow, -} from "../../components/LatestUpdateRow"; import { PopularRankList } from "../../components/PopularRankList"; import { RecommendedCard } from "../../components/RecommendedCard"; import { SectionHeader } from "../../components/SectionHeader"; @@ -49,17 +45,14 @@ export function Home() { const { hash } = useLocation(); const [cats, setCats] = useState([]); const [rec, setRec] = useState([]); - const [latest, setLatest] = useState([]); const [latestPosts, setLatestPosts] = useState([]); const [popular, setPopular] = useState([]); const [popularPosts, setPopularPosts] = useState([]); const [err, setErr] = useState(null); const recRowRef = useRef(null); - const latestRowRef = useRef(null); const categoryRowRef = useRef(null); const [activeCategoryPage, setActiveCategoryPage] = useState(0); const [canScrollRec, setCanScrollRec] = useState(false); - const [canScrollLatest, setCanScrollLatest] = useState(false); const [recScroll, setRecScroll] = useState({ ratio: 1, progress: 0 }); useEffect(() => { @@ -88,9 +81,6 @@ export function Home() { ); const latestItems = itemsOrEmpty(l.items); setLatestPosts(latestItems); - setLatest( - latestItems.map((post) => postToResource(post, lang, categoryItems)), - ); const popularItems = itemsOrEmpty(p.items); setPopularPosts(popularItems); setPopular( @@ -139,9 +129,6 @@ export function Home() { }; }, [lang]); - const iconKeyForResource = (r: PostBackedResource) => - cats.find((c) => c.id === r.categoryId)?.iconKey ?? "folder"; - const figmaOrderedCategories = [...cats].sort( (a, b) => figmaCategoryRank(a) - figmaCategoryRank(b), ); @@ -208,31 +195,6 @@ export function Home() { recRowRef.current?.scrollBy({ left: dir * 280, behavior: "smooth" }); }; - useEffect(() => { - const row = latestRowRef.current; - if (!row) { - setCanScrollLatest(false); - return; - } - - const update = () => { - setCanScrollLatest(row.scrollWidth > row.clientWidth + 1); - }; - - update(); - const resizeObserver = new ResizeObserver(update); - resizeObserver.observe(row); - row.addEventListener("scroll", update, { passive: true }); - return () => { - resizeObserver.disconnect(); - row.removeEventListener("scroll", update); - }; - }, [latest.length]); - - const scrollLatest = (dir: 1 | -1) => { - latestRowRef.current?.scrollBy({ left: dir * 360, behavior: "smooth" }); - }; - useEffect(() => { if (!hash) return; const id = hash.slice(1); @@ -243,9 +205,8 @@ export function Home() { }); }); return () => window.cancelAnimationFrame(frame); - }, [hash, cats.length, rec.length, latest.length, popular.length]); + }, [hash, cats.length, rec.length, latestPosts.length, popular.length]); - const latestPlaceholderCount = Math.max(0, 5 - latest.length); const hasPopular = popular.length > 0 || popularPosts.length > 0; const recommendedDotCount = rec.length; const activeRecommendedDot = @@ -446,59 +407,21 @@ export function Home() {
-
- -
-
- {latestPosts.slice(0, 5).map((post) => ( - - ))} -
-
-
- {latest.map((r) => ( -
- -
- ))} - {Array.from({ length: latestPlaceholderCount }).map( - (_, index) => ( -
- -
- ), - )} +
+
+ +
+
+ {latestPosts.slice(0, 5).map((post, index) => ( + + + + ))}
- {canScrollLatest ? ( - <> - - - - ) : null}