0ct0pu5/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #1903 from benphelps/feature-mixed-layout

Browse source 
Enhancement: mixed bookmarks / services layout
This commit is contained in:
shamoon 2023-09-04 20:27:04 -07:00 • committed by GitHub
commit 3a10214a45
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 62 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
src/pages/index.jsx
View file

@ -4,7 +4,7 @@ import Head from "next/head";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import classNames from "classnames"; import classNames from "classnames";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import { useEffect, useContext, useState } from "react"; import { useEffect, useContext, useState, useMemo } from "react";
import { BiError } from "react-icons/bi"; import { BiError } from "react-icons/bi";
import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import { serverSideTranslations } from "next-i18next/serverSideTranslations";
@ -230,6 +230,66 @@ function Home({ initialSettings }) {
} }
}) })
const servicesAndBookmarksGroups = useMemo(() => {
const layoutGroups = settings.layout ? Object.keys(settings.layout).map(
(groupName) => services?.find(g => g.name === groupName) ?? bookmarks?.find(b => b.name === groupName)
).filter(g => g) : [];
const serviceGroups = services?.filter(group => settings.layout?.[group.name] === undefined);
const bookmarkGroups = bookmarks.filter(group => settings.layout?.[group.name] === undefined);
return <>
{layoutGroups.length > 0 && <div key="layoutGroups" className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
{layoutGroups.map((group) => (
group.services ?
(<ServicesGroup
key={group.name}
group={group.name}
services={group}
layout={settings.layout?.[group.name]}
fiveColumns={settings.fiveColumns}
disableCollapse={settings.disableCollapse}
/>) :
(<BookmarksGroup
key={group.name}
bookmarks={group}
layout={settings.layout?.[group.name]}
disableCollapse={settings.disableCollapse}
/>)
)
)}
</div>}
{serviceGroups?.length > 0 && <div key="services" className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
{serviceGroups.map((group) => (
<ServicesGroup
key={group.name}
group={group.name}
services={group}
layout={settings.layout?.[group.name]}
fiveColumns={settings.fiveColumns}
disableCollapse={settings.disableCollapse}
/>
))}
</div>}
{bookmarkGroups?.length > 0 && <div key="bookmarks" className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
{bookmarkGroups.map((group) => (
<BookmarksGroup
key={group.name}
bookmarks={group}
layout={settings.layout?.[group.name]}
disableCollapse={settings.disableCollapse}
/>
))}
</div>}
</>
}, [
services,
bookmarks,
settings.layout,
settings.fiveColumns,
settings.disableCollapse
]);
return ( return (
<> <>
<Head> <Head>
@ -289,33 +349,7 @@ function Home({ initialSettings }) {
)} )}
</div> </div>
{services?.length > 0 && ( {servicesAndBookmarksGroups}
<div key="services" className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
{services.map((group) => (
<ServicesGroup
key={group.name}
group={group.name}
services={group}
layout={settings.layout?.[group.name]}
fiveColumns={settings.fiveColumns}
disableCollapse={settings.disableCollapse}
/>
))}
</div>
)}
{bookmarks?.length > 0 && (
<div key="bookmarks" className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
{bookmarks.map((group) => (
<BookmarksGroup
key={group.name}
bookmarks={group}
layout={settings.layout?.[group.name]}
disableCollapse={settings.disableCollapse}
/>
))}
</div>
)}
<div className="flex flex-col mt-auto p-8 w-full"> <div className="flex flex-col mt-auto p-8 w-full">
<div className="flex w-full justify-end"> <div className="flex w-full justify-end">