From de6624ff7875dc535c801c9a66f280cfdab5a6b2 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Thu, 6 Jul 2023 08:16:49 +0700
Subject: [PATCH] minor fixes

---
 src/app/error.tsx                             |  7 ++++++-
 src/app/space/components/blocks/feed.tsx      |  4 ++--
 src/app/space/components/blocks/following.tsx | 13 +++++++++----
 src/app/space/index.tsx                       |  4 ++--
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/app/error.tsx b/src/app/error.tsx
index a70b40da..cabed006 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -1,7 +1,12 @@
 import { useRouteError } from 'react-router-dom';
 
+interface IRouteError {
+  statusText: string;
+  message: string;
+}
+
 export function ErrorScreen() {
-  const error: any = useRouteError();
+  const error = useRouteError() as IRouteError;
 
   return (
     <div className="flex h-full w-full items-center justify-center">
diff --git a/src/app/space/components/blocks/feed.tsx b/src/app/space/components/blocks/feed.tsx
index c666d4af..873c381f 100644
--- a/src/app/space/components/blocks/feed.tsx
+++ b/src/app/space/components/blocks/feed.tsx
@@ -12,7 +12,7 @@ const ITEM_PER_PAGE = 10;
 
 export function FeedBlock({ params }: { params: any }) {
   const queryClient = useQueryClient();
-  const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage }: any =
+  const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
       queryKey: ['newsfeed', params.content],
       queryFn: async ({ pageParam = 0 }) => {
@@ -60,7 +60,7 @@ export function FeedBlock({ params }: { params: any }) {
     if (!note) return;
     return (
       <div key={index} data-index={index} ref={rowVirtualizer.measureElement}>
-        <Note event={note} block={params.id} />
+        <Note event={note} />
       </div>
     );
   };
diff --git a/src/app/space/components/blocks/following.tsx b/src/app/space/components/blocks/following.tsx
index 0c6270ae..5e2c6d50 100644
--- a/src/app/space/components/blocks/following.tsx
+++ b/src/app/space/components/blocks/following.tsx
@@ -14,15 +14,16 @@ import { useNote } from '@stores/note';
 
 const ITEM_PER_PAGE = 10;
 
-export function FollowingBlock({ block }: { block: number }) {
+export function FollowingBlock() {
   // subscribe for live update
   useNewsfeed();
+  // notify user that new note is arrive
   const [hasNewNote, toggleHasNewNote] = useNote((state) => [
     state.hasNewNote,
     state.toggleHasNewNote,
   ]);
 
-  const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage, refetch }: any =
+  const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage, refetch } =
     useInfiniteQuery({
       queryKey: ['newsfeed-circle'],
       queryFn: async ({ pageParam = 0 }) => {
@@ -68,8 +69,12 @@ export function FollowingBlock({ block }: { block: number }) {
     const note = notes[index];
     if (!note) return;
     return (
-      <div key={index} data-index={index} ref={rowVirtualizer.measureElement}>
-        <Note event={note} block={block} />
+      <div
+        key={note.event_id || note.id}
+        data-index={index}
+        ref={rowVirtualizer.measureElement}
+      >
+        <Note event={note} />
       </div>
     );
   };
diff --git a/src/app/space/index.tsx b/src/app/space/index.tsx
index 519513ca..40908966 100644
--- a/src/app/space/index.tsx
+++ b/src/app/space/index.tsx
@@ -30,7 +30,7 @@ export function SpaceScreen() {
 
   return (
     <div className="scrollbar-hide flex h-full w-full flex-nowrap overflow-x-auto overflow-y-hidden">
-      <FollowingBlock block={1} />
+      <FollowingBlock />
       {status === 'loading' ? (
         <div className="flex w-[350px] shrink-0 flex-col border-r border-zinc-900">
           <div
@@ -43,7 +43,7 @@ export function SpaceScreen() {
           </div>
         </div>
       ) : (
-        blocks.map((block: any) => {
+        blocks.map((block: { kind: number; id: string }) => {
           switch (block.kind) {
             case 0:
               return <ImageBlock key={block.id} params={block} />;