clean up & small fixes

2023-08-26 14:52:02 +07:00
parent 0f212828a7
commit fe28cd95bd
15 changed files with 247 additions and 264 deletions
--- a/src/app/auth/components/user.tsx
+++ b/src/app/auth/components/user.tsx
@@ -28,7 +28,7 @@ export function User({ pubkey, fallback }: { pubkey: string; fallback?: string }
        />
      </div>
      <div className="flex w-full flex-1 flex-col items-start text-start">
-        <p className="truncate font-medium leading-tight text-white">
+        <p className="max-w-[15rem] truncate font-medium leading-tight text-white">
          {user?.name || user?.display_name || user?.nip05}
        </p>
        <span className="max-w-[15rem] truncate text-base leading-tight text-white/50">
--- a/src/app/space/components/forms/feed.tsx
+++ b/src/app/space/components/forms/feed.tsx
@@ -28,6 +28,10 @@ export function FeedWidgetForm({ params }: { params: Widget }) {
    setGroups(arr);
  };

+  const cancel = () => {
+    removeWidget(db, params.id);
+  };
+
  const submit = async () => {
    setWidget(db, {
      kind: WidgetKinds.feed,
@@ -39,7 +43,7 @@ export function FeedWidgetForm({ params }: { params: Widget }) {
  };

  return (
-    <div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center">
+    <div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10">
      <div className="w-full px-5">
        <h3 className="mb-4 text-center text-lg font-semibold">
          Choose account you want to add to group feeds
@@ -70,7 +74,7 @@ export function FeedWidgetForm({ params }: { params: Widget }) {
              </button>
            ))}
          </div>
-          <div className="flex items-center justify-center">
+          <div className="flex flex-col items-center justify-center gap-2">
            <button
              type="submit"
              disabled={groups.length < 1}
@@ -81,6 +85,13 @@ export function FeedWidgetForm({ params }: { params: Widget }) {
              <span>Add {groups.length} account to group feed</span>
              <ArrowRightCircleIcon className="h-5 w-5" />
            </button>
+            <button
+              type="button"
+              onClick={cancel}
+              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white hover:bg-white/20 focus:outline-none disabled:opacity-50"
+            >
+              Cancel
+            </button>
          </div>
        </div>
      </div>
--- a/src/app/space/components/forms/hashtag.tsx
+++ b/src/app/space/components/forms/hashtag.tsx
@@ -40,6 +40,10 @@ export function HashTagWidgetForm({ params }: { params: Widget }) {
    formState: { errors, isDirty, isValid },
  } = useForm<FormValues>({ resolver });

+  const cancel = () => {
+    removeWidget(db, params.id);
+  };
+
  const onSubmit = async (data: FormValues) => {
    try {
      setWidget(db, {
@@ -58,7 +62,7 @@ export function HashTagWidgetForm({ params }: { params: Widget }) {
  };

  return (
-    <div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center">
+    <div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10">
      <div className="w-full px-5">
        <h3 className="mb-4 text-center text-lg font-semibold">
          Enter hashtag you want to follow
@@ -74,7 +78,7 @@ export function HashTagWidgetForm({ params }: { params: Widget }) {
              {errors.hashtag && <p>{errors.hashtag.message}</p>}
            </span>
          </div>
-          <div className="flex items-center justify-center">
+          <div className="flex flex-col items-center justify-center gap-2">
            <button
              type="submit"
              disabled={!isDirty || !isValid}
@@ -84,6 +88,13 @@ export function HashTagWidgetForm({ params }: { params: Widget }) {
              <span>Create</span>
              <ArrowRightCircleIcon className="h-5 w-5" />
            </button>
+            <button
+              type="button"
+              onClick={cancel}
+              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white hover:bg-white/20 focus:outline-none disabled:opacity-50"
+            >
+              Cancel
+            </button>
          </div>
        </form>
      </div>
--- a/src/app/space/components/userProfile.tsx
+++ b/src/app/space/components/userProfile.tsx
@@ -1,10 +1,12 @@
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';

-import { FollowIcon, LoaderIcon, UnfollowIcon } from '@shared/icons';
+import { useStorage } from '@libs/storage/provider';
+
+import { FollowIcon, UnfollowIcon } from '@shared/icons';
 import { Image } from '@shared/image';

-import { useSocial } from '@utils/hooks/useSocial';
+import { useNostr } from '@utils/hooks/useNostr';
 import { compactNumber } from '@utils/number';
 import { shortenKey } from '@utils/shortenKey';

@@ -14,7 +16,8 @@ export interface Profile {
 }

 export function UserProfile({ data }: { data: Profile }) {
-  const { status: socialStatus, userFollows, follow, unfollow } = useSocial();
+  const { db } = useStorage();
+  const { addContact, removeContact } = useNostr();
  const { status, data: userStats } = useQuery(
    ['user-stats', data.pubkey],
    async () => {
@@ -36,7 +39,7 @@ export function UserProfile({ data }: { data: Profile }) {

  const followUser = (pubkey: string) => {
    try {
-      follow(pubkey);
+      addContact(pubkey);
      // update state
      setFollowed(true);
    } catch (error) {
@@ -46,7 +49,7 @@ export function UserProfile({ data }: { data: Profile }) {

  const unfollowUser = (pubkey: string) => {
    try {
-      unfollow(pubkey);
+      removeContact(pubkey);
      // update state
      setFollowed(false);
    } catch (error) {
@@ -55,12 +58,10 @@ export function UserProfile({ data }: { data: Profile }) {
  };

  useEffect(() => {
-    if (status === 'success' && userFollows) {
-      if (userFollows.includes(data.pubkey)) {
-        setFollowed(true);
-      }
+    if (db.account.follows.includes(data.pubkey)) {
+      setFollowed(true);
    }
-  }, [status]);
+  }, []);

  if (!profile) {
    return (
@@ -88,14 +89,7 @@ export function UserProfile({ data }: { data: Profile }) {
          </div>
        </div>
        <div className="inline-flex items-center gap-2">
-          {socialStatus === 'loading' ? (
-            <button
-              type="button"
-              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 hover:bg-fuchsia-500"
-            >
-              <LoaderIcon className="h-4 w-4 animate-spin text-white" />
-            </button>
-          ) : followed ? (
+          {followed ? (
            <button
              type="button"
              onClick={() => unfollowUser(data.pubkey)}
--- a/src/app/users/components/profile.tsx
+++ b/src/app/users/components/profile.tsx
@@ -8,21 +8,20 @@ import { useStorage } from '@libs/storage/provider';
 import { EditProfileModal } from '@shared/editProfileModal';
 import { Image } from '@shared/image';

+import { useNostr } from '@utils/hooks/useNostr';
 import { useProfile } from '@utils/hooks/useProfile';
-import { useSocial } from '@utils/hooks/useSocial';
 import { shortenKey } from '@utils/shortenKey';

 export function UserProfile({ pubkey }: { pubkey: string }) {
  const { db } = useStorage();
  const { user } = useProfile(pubkey);
-  const { status, userFollows, follow, unfollow } = useSocial();
+  const { addContact, removeContact } = useNostr();

  const [followed, setFollowed] = useState(false);

  const followUser = (pubkey: string) => {
    try {
-      follow(pubkey);
-
+      addContact(pubkey);
      // update state
      setFollowed(true);
    } catch (error) {
@@ -32,8 +31,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {

  const unfollowUser = (pubkey: string) => {
    try {
-      unfollow(pubkey);
-
+      removeContact(pubkey);
      // update state
      setFollowed(false);
    } catch (error) {
@@ -42,12 +40,10 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
  };

  useEffect(() => {
-    if (status === 'success' && userFollows) {
-      if (userFollows.includes(pubkey)) {
-        setFollowed(true);
-      }
+    if (db.account.follows.includes(pubkey)) {
+      setFollowed(true);
    }
-  }, [status]);
+  }, []);

  if (!user) return <p>Loading...</p>;

@@ -92,14 +88,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
            </div>
          </div>
          <div className="inline-flex items-center justify-center gap-2">
-            {status === 'loading' ? (
-              <button
-                type="button"
-                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
-              >
-                Loading...
-              </button>
-            ) : followed ? (
+            {followed ? (
              <button
                type="button"
                onClick={() => unfollowUser(pubkey)}
--- a/src/app/users/components/stats.tsx
+++ b/src/app/users/components/stats.tsx
@@ -26,7 +26,7 @@ export function UserStats({ pubkey }: { pubkey: string }) {
  }

  return (
-    <div className="flex w-full items-center gap-10">
+    <div className="flex w-full items-center justify-center gap-10">
      <div className="inline-flex flex-col items-center gap-1">
        <span className="font-semibold leading-none text-white">
          {compactNumber.format(data.stats[pubkey].followers_pubkey_count) ?? 0}
--- a/src/app/users/index.tsx
+++ b/src/app/users/index.tsx
@@ -37,7 +37,7 @@ export function UserScreen() {
    count: data ? data.length : 0,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 650,
-    overscan: 2,
+    overscan: 4,
  });
  const items = virtualizer.getVirtualItems();