reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrated to nextjs 13 app dir

Browse Source
This commit is contained in:
Ren Amamiya
2023-04-15 09:06:29 +07:00
parent da38ced72c
commit d59cc041d5
56 changed files with 617 additions and 807 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/newsfeed/[id].tsx
-24
View File
@@ -1,24 +0,0 @@
import BaseLayout from '@layouts/base';
import WithSidebarLayout from '@layouts/withSidebar';
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
export default function Page() {
return <div className="scrollbar-hide flex h-full flex-col gap-2 overflow-y-auto py-3"></div>;
}
Page.getLayout = function getLayout(
page:
| string
| number
| boolean
| ReactElement<unknown, string | JSXElementConstructor<unknown>>
| ReactFragment
| ReactPortal
) {
return (
<BaseLayout>
<WithSidebarLayout>{page}</WithSidebarLayout>
</BaseLayout>
);
};
src/pages/newsfeed/circle.tsx
-28
View File
@@ -1,28 +0,0 @@
import BaseLayout from '@layouts/base';
import WithSidebarLayout from '@layouts/withSidebar';
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
export default function Page() {
return (
<div className="flex h-full w-full items-center justify-center">
<p className="text-sm text-zinc-400">Sorry, this feature under development, it will come in the next version</p>
</div>
);
}
Page.getLayout = function getLayout(
page:
| string
| number
| boolean
| ReactElement<unknown, string | JSXElementConstructor<unknown>>
| ReactFragment
| ReactPortal
) {
return (
<BaseLayout>
<WithSidebarLayout>{page}</WithSidebarLayout>
</BaseLayout>
);
};
src/pages/newsfeed/following.tsx
-139
View File
@@ -1,139 +0,0 @@
import BaseLayout from '@layouts/base';
import WithSidebarLayout from '@layouts/withSidebar';
import FormBase from '@components/form/base';
import { NoteBase } from '@components/note/base';
import { Placeholder } from '@components/note/placeholder';
import { hasNewerNoteAtom } from '@stores/note';
import { dateToUnix } from '@utils/getDate';
import { filterDuplicateParentID } from '@utils/transform';
import { ArrowUp } from 'iconoir-react';
import { useAtom } from 'jotai';
import {
JSXElementConstructor,
ReactElement,
ReactFragment,
ReactPortal,
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import { Virtuoso } from 'react-virtuoso';
export default function Page() {
const [data, setData] = useState([]);
const [hasNewerNote, setHasNewerNote] = useAtom(hasNewerNoteAtom);
const virtuosoRef = useRef(null);
const now = useRef(new Date());
const limit = useRef(20);
const offset = useRef(0);
const itemContent: any = useCallback(
(index: string | number) => {
return <NoteBase event={data[index]} />;
},
[data]
);
const computeItemKey = useCallback(
(index: string | number) => {
return data[index].eventId;
},
[data]
);
const initialData = useCallback(async () => {
const { getNotes } = await import('@utils/bindings');
const result: any = await getNotes({
date: dateToUnix(now.current),
limit: limit.current,
offset: offset.current,
});
setData((data) => [...data, ...result]);
}, []);
const loadMore = useCallback(async () => {
const { getNotes } = await import('@utils/bindings');
offset.current += limit.current;
// next query
const result: any = await getNotes({
date: dateToUnix(now.current),
limit: limit.current,
offset: offset.current,
});
setData((data) => [...data, ...result]);
}, []);
const loadLatest = useCallback(async () => {
const { getLatestNotes } = await import('@utils/bindings');
// next query
const result: any = await getLatestNotes({ date: dateToUnix(now.current) });
// update data
if (result.length > 0) {
setData((data) => [...data, ...result]);
} else {
setData((data) => [...data, result]);
}
// hide newer trigger
setHasNewerNote(false);
// scroll to top
virtuosoRef.current.scrollToIndex({ index: 0 });
}, [setHasNewerNote]);
useEffect(() => {
initialData().catch(console.error);
}, [initialData]);
return (
<div className="relative h-full w-full">
{hasNewerNote && (
<div className="absolute left-1/2 top-2 z-50 -translate-x-1/2 transform">
<button
onClick={() => loadLatest()}
className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-fuchsia-500 pl-3 pr-3.5 text-sm shadow-md shadow-fuchsia-800/20 active:translate-y-1"
>
<ArrowUp width={14} height={14} />
Load latest
</button>
</div>
)}
<Virtuoso
ref={virtuosoRef}
data={filterDuplicateParentID(data)}
itemContent={itemContent}
computeItemKey={computeItemKey}
components={COMPONENTS}
overscan={200}
endReached={loadMore}
className="scrollbar-hide h-full w-full overflow-y-auto"
/>
</div>
);
}
const COMPONENTS = {
Header: () => <FormBase />,
EmptyPlaceholder: () => <Placeholder />,
ScrollSeekPlaceholder: () => <Placeholder />,
};
Page.getLayout = function getLayout(
page:
| string
| number
| boolean
| ReactElement<unknown, string | JSXElementConstructor<unknown>>
| ReactFragment
| ReactPortal
) {
return (
<BaseLayout>
<WithSidebarLayout>{page}</WithSidebarLayout>
</BaseLayout>
);
};