nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-18 11:13:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

restructured and clean up

Browse Source
This commit is contained in:
Ren Amamiya 2023-03-05 09:27:16 +07:00
parent 8b86aca23c
commit 13dda65a39
27 changed files with 69 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/components/accountBar/account.tsx → src/components/columns/account/account.tsx
View File

4
src/components/accountBar/index.tsx → src/components/columns/account/index.tsx
View File

@ -1,4 +1,4 @@
import { Account } from '@components/accountBar/account';
import { Account } from '@components/columns/account/account';
import LumeSymbol from '@assets/icons/Lume';
import { PlusIcon } from '@radix-ui/react-icons';
@ -7,7 +7,7 @@ import Link from 'next/link';
import { useCallback, useEffect, useState } from 'react';
import Database from 'tauri-plugin-sql-api';
export default function AccountBar() {
export default function AccountColumn() {
const [users, setUsers] = useState([]);
const [currentUser]: any = useLocalStorage('current-user');

0
src/components/navigatorBar/createPost.tsx → src/components/columns/navigator/createPost.tsx
View File

12
src/components/navigatorBar/index.tsx → src/components/columns/navigator/index.tsx
View File

@ -1,11 +1,11 @@
import ActiveLink from '@components/activeLink';
import CreatePost from '@components/navigatorBar/createPost';
import { ProfileMenu } from '@components/navigatorBar/profileMenu';
import CreatePost from '@components/columns/navigator/createPost';
import { UserDropdownMenu } from '@components/columns/navigator/userDropdownMenu';
import { PlusIcon } from '@radix-ui/react-icons';
import { useLocalStorage } from '@rehooks/local-storage';
export default function NavigatorBar() {
export default function NavigatorColumn() {
const [currentUser]: any = useLocalStorage('current-user');
const profile = JSON.parse(currentUser.metadata);
@ -17,7 +17,7 @@ export default function NavigatorBar() {
<div className="flex flex-col p-2">
<div className="flex items-center justify-between">
<h5 className="font-semibold leading-tight text-zinc-100">{profile.display_name || ''}</h5>
<ProfileMenu pubkey={currentUser.pubkey} />
<UserDropdownMenu pubkey={currentUser.pubkey} />
</div>
<span className="text-sm leading-tight text-zinc-500">@{profile.username || ''}</span>
</div>
@ -38,7 +38,7 @@ export default function NavigatorBar() {
</div>
<div className="flex flex-col gap-1 text-zinc-500">
<ActiveLink
href={`/feed/following`}
href={`/newsfeed/following`}
activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white"
className="flex h-10 items-center gap-1 rounded-lg px-2.5 text-sm font-medium hover:bg-zinc-900"
>
@ -46,7 +46,7 @@ export default function NavigatorBar() {
<span>following</span>
</ActiveLink>
<ActiveLink
href={`/feed/global`}
href={`/newsfeed/global`}
activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white"
className="flex h-10 items-center gap-1 rounded-lg px-2.5 text-sm font-medium hover:bg-zinc-900"
>

2
src/components/navigatorBar/profileMenu.tsx → src/components/columns/navigator/userDropdownMenu.tsx
View File

@ -5,7 +5,7 @@ import { useRouter } from 'next/router';
import { nip19 } from 'nostr-tools';
import { memo } from 'react';
export const ProfileMenu = memo(function ProfileMenu({ pubkey }: { pubkey: string }) {
export const UserDropdownMenu = memo(function ProfileMenu({ pubkey }: { pubkey: string }) {
const router = useRouter();
const viewProfile = () => {

96
src/components/empty.tsx
View File

@ -1,96 +0,0 @@
import { EnvelopeClosedIcon, PlusIcon, UpdateIcon } from '@radix-ui/react-icons';
import Image from 'next/image';
const sampleData = [
{
name: 'Dick Whitman (🌎/21M)',
role: 'dickwhitman@nostrplebs.com',
imageUrl: 'https://pbs.twimg.com/profile_images/1594930968325984256/TjMXaXBE_400x400.jpg',
},
{
name: 'Jack',
role: 'npub1sg6plzptd64u62a878hep2kev88swjh3tw00gjsfl8f237lmu63q0uf63m',
imageUrl: 'https://pbs.twimg.com/profile_images/1115644092329758721/AFjOr-K8_400x400.jpg',
},
{
name: 'Sats Symbol',
role: 'npub1mqngkfwfyv2ckv7hshck9pqucpz08tktde2jukr3hheatup2y2tqnzc32w',
imageUrl: 'https://pbs.twimg.com/profile_images/1563388888860594177/7evrI1uB_400x400.jpg',
},
];
export default function Empty() {
return (
<div className="mx-auto max-w-lg pt-8">
<div>
<div className="text-center">
<svg
className="mx-auto h-12 w-12 text-zinc-300"
fill="none"
stroke="currentColor"
viewBox="0 0 48 48"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M34 40h10v-4a6 6 0 00-10.712-3.714M34 40H14m20 0v-4a9.971 9.971 0 00-.712-3.714M14 40H4v-4a6 6 0 0110.713-3.714M14 40v-4c0-1.313.253-2.566.713-3.714m0 0A10.003 10.003 0 0124 26c4.21 0 7.813 2.602 9.288 6.286M30 14a6 6 0 11-12 0 6 6 0 0112 0zm12 6a4 4 0 11-8 0 4 4 0 018 0zm-28 0a4 4 0 11-8 0 4 4 0 018 0z"
></path>
</svg>
<h2 className="mt-2 text-lg font-medium text-zinc-100">You haven&apos;t followed anyone yet</h2>
<p className="mt-1 text-sm text-zinc-500">
You can send invite via email to your friend and lume will onboard them into nostr or follow some people in
suggested below
</p>
</div>
<form action="#" className="relative mt-6">
<input
type="email"
name="email"
id="email"
className="block h-11 w-full rounded-lg border-none px-4 shadow-md ring-1 ring-white/10 placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-200"
placeholder="Enter an email"
/>
<button className="absolute right-0.5 top-1/2 inline-flex h-10 -translate-y-1/2 transform items-center gap-1 rounded-md border border-zinc-600 bg-zinc-700 px-4 text-sm font-medium text-zinc-200 shadow-md">
<EnvelopeClosedIcon className="h-4 w-4" />
Invite
</button>
</form>
</div>
<div className="mt-10 flex flex-col items-start gap-4">
<div className="flex w-full items-center justify-between">
<h3 className="text-sm font-medium text-zinc-500">Suggestions</h3>
<UpdateIcon className="h-4 w-4 text-zinc-600" />
</div>
<ul className="w-full divide-y divide-zinc-800 border-t border-b border-zinc-800">
{sampleData.map((person, index) => (
<li key={index} className="flex items-center justify-between space-x-3 py-4">
<div className="flex min-w-0 flex-1 items-center space-x-3">
<div className="relative h-10 w-10 flex-shrink-0">
<Image className="rounded-full object-cover" src={person.imageUrl} alt={person.name} fill={true} />
</div>
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium text-zinc-200">{person.name}</p>
<p className="w-56 truncate text-sm font-medium text-zinc-500">{person.role}</p>
</div>
</div>
<div className="flex-shrink-0">
<button
type="button"
className="inline-flex items-center rounded-full border border-zinc-700 bg-zinc-800 px-3 py-1 text-xs font-medium text-zinc-400 shadow-sm hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-fuchsia-600 focus:ring-offset-2"
>
<PlusIcon className="-ml-1 h-5 w-5" />
<span className="text-sm font-medium text-zinc-300">Follow</span>
</button>
</div>
</li>
))}
</ul>
<button className="bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-gray-300 via-fuchsia-600 to-orange-600 bg-clip-text text-sm font-bold text-transparent">
Explore more →
</button>
</div>
</div>
);
}

2
src/components/imageWithFallback.tsx
View File

@ -8,7 +8,7 @@ export const ImageWithFallback = memo(function ImageWithFallback({
fill,
className,
}: {
src: any;
src: string;
alt: string;
fill: boolean;
className: string;

17
src/components/navigatorBar/incomingList.tsx
View File

@ -1,17 +0,0 @@
export function IncomingList({ data }: { data: any }) {
const list: any = Array.from(new Set(data.map((item: any) => item.pubkey)));
if (list.length > 0) {
return (
<>
{list.map((item, index) => (
<div key={index}>
<p>{item}</p>
</div>
))}
</>
);
} else {
return <></>;
}
}

52
src/components/note/modal/index.tsx
View File

@ -1,52 +0,0 @@
import { RelayContext } from '@components/contexts/relay';
import { Content } from '@components/note/content';
import NoteReply from '@components/note/modal/noteReply';
import useLocalStorage from '@rehooks/local-storage';
import { memo, useContext, useState } from 'react';
const Modal = ({ event }: { event: any }) => {
const relayPool: any = useContext(RelayContext);
const [relays]: any = useLocalStorage('relays');
const [events, setEvents] = useState([]);
relayPool.subscribe(
[
{
'#e': [event.id],
since: event.created_at,
kinds: [1],
},
],
relays,
(event: any) => {
setEvents((events) => [event, ...events]);
},
undefined,
(events: any, relayURL: any) => {
console.log(events, relayURL);
}
);
return (
<div className="flex min-h-full items-center justify-center p-4">
<div className="relative h-[90vh] w-full max-w-3xl transform overflow-hidden rounded-lg text-zinc-100 shadow-modal transition-all">
<div className="absolute top-0 left-0 h-full w-full bg-black bg-opacity-20 backdrop-blur-lg"></div>
<div className="relative z-10 h-full p-4">
<div className="relative h-full overflow-auto rounded-lg border-[0.5px] border-white/30 bg-zinc-800 p-4 shadow-inner">
<div className="flex flex-col gap-4">
<Content data={event} />
</div>
<div className="flex flex-col gap-2 divide-y divide-zinc-700">
{events.map((item) => (
<NoteReply key={item.id} event={item} />
))}
</div>
</div>
</div>
</div>
</div>
);
};
export default memo(Modal);

9
src/components/note/modal/noteReply.tsx
View File

@ -1,9 +0,0 @@
import { Content } from '@components/note/content';
export default function NoteReply({ event }: { event: any }) {
return (
<div className="flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-4 hover:bg-zinc-800">
<Content data={event} />
</div>
);
}

0
src/layouts/baseLayout.tsx → src/layouts/base.tsx
View File

2
src/layouts/fullLayout.tsx → src/layouts/fullscreen.tsx
View File

@ -1,4 +1,4 @@
export default function FullLayout({ children }: { children: React.ReactNode }) {
export default function FullscreenLayout({ children }: { children: React.ReactNode }) {
return (
<div className="bg-gradient-radial-page relative h-full overflow-hidden">
{/* dragging area */}

8
src/layouts/newsfeedLayout.tsx → src/layouts/newsfeed.tsx
View File

@ -1,16 +1,16 @@
import AccountBar from '@components/accountBar';
import NavigatorBar from '@components/navigatorBar';
import AccountColumn from '@components/columns/account';
import NavigatorColumn from '@components/columns/navigator';
export default function NewsFeedLayout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-full w-full flex-row">
<div className="relative h-full w-[70px] shrink-0 border-r border-zinc-900">
<div data-tauri-drag-region className="absolute top-0 left-0 h-12 w-full" />
<AccountBar />
<AccountColumn />
</div>
<div className="grid grow grid-cols-4">
<div className="col-span-1">
<NavigatorBar />
<NavigatorColumn />
</div>
<div className="col-span-3 m-3 ml-0 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
<div className="h-full w-full rounded-lg">{children}</div>

0
src/layouts/onboardingLayout.tsx → src/layouts/onboarding.tsx
View File

4
src/layouts/userLayout.tsx → src/layouts/user.tsx
View File

@ -1,5 +1,5 @@
import AccountBar from '@components/accountBar';
import ActiveLink from '@components/activeLink';
import AccountColumn from '@components/columns/account';
import { useLocalStorage } from '@rehooks/local-storage';
@ -10,7 +10,7 @@ export default function UserLayout({ children }: { children: React.ReactNode })
<div className="flex h-full w-full flex-row">
<div className="relative h-full w-[70px] shrink-0 border-r border-zinc-900">
<div data-tauri-drag-region className="absolute top-0 left-0 h-12 w-full" />
<AccountBar />
<AccountColumn />
</div>
<div className="grid grow grid-cols-4">
<div className="col-span-1">

8
src/pages/index.tsx
View File

@ -1,5 +1,5 @@
import BaseLayout from '@layouts/baseLayout';
import FullLayout from '@layouts/fullLayout';
import BaseLayout from '@layouts/base';
import FullscreenLayout from '@layouts/fullscreen';
import LumeSymbol from '@assets/icons/Lume';
import { useLocalStorage } from '@rehooks/local-storage';
@ -22,7 +22,7 @@ export default function Page() {
} else {
setTimeout(() => {
setLoading(false);
router.push('/feed/following');
router.push('/newsfeed/following');
}, 1500);
}
}, [currentUser, router]);
@ -106,7 +106,7 @@ Page.getLayout = function getLayout(
) {
return (
<BaseLayout>
<FullLayout>{page}</FullLayout>
<FullscreenLayout>{page}</FullscreenLayout>
</BaseLayout>
);
};

28
src/pages/newsfeed/circle.tsx Normal file
View File

@ -0,0 +1,28 @@
import BaseLayout from '@layouts/base';
import NewsFeedLayout from '@layouts/newsfeed';
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
export default function Page() {
return (
<div className="h-full w-full">
<p>Global</p>
</div>
);
}
Page.getLayout = function getLayout(
page:
| string
| number
| boolean
| ReactElement<unknown, string | JSXElementConstructor<unknown>>
| ReactFragment
| ReactPortal
) {
return (
<BaseLayout>
<NewsFeedLayout>{page}</NewsFeedLayout>
</BaseLayout>
);
};

4
src/pages/feed/following.tsx → src/pages/newsfeed/following.tsx
View File

@ -1,5 +1,5 @@
import BaseLayout from '@layouts/baseLayout';
import NewsFeedLayout from '@layouts/newsfeedLayout';
import BaseLayout from '@layouts/base';
import NewsFeedLayout from '@layouts/newsfeed';
import { DatabaseContext } from '@components/contexts/database';
import { NoteConnector } from '@components/note/connector';

4
src/pages/feed/global.tsx → src/pages/newsfeed/global.tsx
View File

@ -1,5 +1,5 @@
import BaseLayout from '@layouts/baseLayout';
import NewsFeedLayout from '@layouts/newsfeedLayout';
import BaseLayout from '@layouts/base';
import NewsFeedLayout from '@layouts/newsfeed';
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';

4
src/pages/onboarding/create/index.tsx
View File

@ -1,5 +1,5 @@
import BaseLayout from '@layouts/baseLayout';
import OnboardingLayout from '@layouts/onboardingLayout';
import BaseLayout from '@layouts/base';
import OnboardingLayout from '@layouts/onboarding';
import { DatabaseContext } from '@components/contexts/database';
import { RelayContext } from '@components/contexts/relay';

4
src/pages/onboarding/create/pre-follows.tsx
View File

@ -1,5 +1,5 @@
import BaseLayout from '@layouts/baseLayout';
import OnboardingLayout from '@layouts/onboardingLayout';
import BaseLayout from '@layouts/base';
import OnboardingLayout from '@layouts/onboarding';
import { DatabaseContext } from '@components/contexts/database';

4
src/pages/onboarding/index.tsx
View File

@ -1,5 +1,5 @@
import BaseLayout from '@layouts/baseLayout';
import OnboardingLayout from '@layouts/onboardingLayout';
import BaseLayout from '@layouts/base';
import OnboardingLayout from '@layouts/onboarding';
import { motion } from 'framer-motion';
import Link from 'next/link';

4
src/pages/onboarding/login/fetch.tsx
View File

@ -1,5 +1,5 @@
import BaseLayout from '@layouts/baseLayout';
import OnboardingLayout from '@layouts/onboardingLayout';
import BaseLayout from '@layouts/base';
import OnboardingLayout from '@layouts/onboarding';
import { DatabaseContext } from '@components/contexts/database';
import { RelayContext } from '@components/contexts/relay';

4
src/pages/onboarding/login/index.tsx
View File

@ -1,5 +1,5 @@
import BaseLayout from '@layouts/baseLayout';
import OnboardingLayout from '@layouts/onboardingLayout';
import BaseLayout from '@layouts/base';
import OnboardingLayout from '@layouts/onboarding';
import { motion } from 'framer-motion';
import { useRouter } from 'next/router';

2
src/pages/profile/personal.tsx
View File

@ -1,4 +1,4 @@
import BaseLayout from '@layouts/baseLayout';
import BaseLayout from '@layouts/base';
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';

4
src/pages/profile/update.tsx
View File

@ -1,5 +1,5 @@
import BaseLayout from '@layouts/baseLayout';
import UserLayout from '@layouts/userLayout';
import BaseLayout from '@layouts/base';
import UserLayout from '@layouts/user';
import { RelayContext } from '@components/contexts/relay';

3
src/utils/getDate.tsx
View File

@ -1,3 +1,4 @@
// get X days ago with user provided date
export const daysAgo = (numOfDays, date = new Date()) => {
const daysAgo = new Date(date.getTime());
daysAgo.setDate(date.getDate() - numOfDays);
@ -5,6 +6,7 @@ export const daysAgo = (numOfDays, date = new Date()) => {
return daysAgo;
};
// get X hours ago with user provided date
export const hoursAgo = (numOfHours, date = new Date()) => {
const hoursAgo = new Date(date.getTime());
hoursAgo.setHours(date.getHours() - numOfHours);
@ -12,6 +14,7 @@ export const hoursAgo = (numOfHours, date = new Date()) => {
return hoursAgo;
};
// convert date to unix timestamp
export const dateToUnix = (_date?: Date) => {
const date = _date || new Date();