feat: feed chat on post pages (#2683)

* feat: show chat on post page * fix: home position
zer0-os · Feb 21, 2025 · a9c954e · a9c954e
1 parent 63e4fbd
commit a9c954e
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 62 deletions.
diff --git a/src/apps/feed/components/feed/index.tsx b/src/apps/feed/components/feed/index.tsx
@@ -5,7 +5,6 @@ import { Post } from '../post';
 import { PostInput } from '../post-input-hook';
 import { Waypoint } from 'react-waypoint';
 import { Panel, PanelBody, PanelHeader, PanelTitle } from '../../../../components/layout/panel';
-import { FeedChat } from '../feed-chat/container';
 
 import styles from './styles.module.scss';
 
@@ -32,54 +31,50 @@ export const Feed = ({ zid, hideZidAction }: FeedProps) => {
   } = useFeed(zid);
 
   return (
-    <div className={styles.FeedContainer}>
-      <Panel className={styles.Feed}>
-        <PanelHeader>
-          <PanelTitle>{headerText}</PanelTitle>
-        </PanelHeader>
-        <PanelBody className={styles.Panel}>
-          {channelZid && <PostInput className={styles.Input} channelZid={channelZid} />}
-          {isLoading && <Message>Loading posts...</Message>}
-          {isEmpty && <Message>This feed is empty</Message>}
-          {hasLoadedMessages && (
-            <ol>
-              {posts?.pages.map((page) =>
-                page.map((reply) => (
-                  <li key={reply.id}>
-                    <Post
-                      className={styles.Post}
-                      arweaveId={reply.arweaveId}
-                      avatarUrl={reply.sender?.avatarUrl}
-                      author={reply.sender?.displaySubHandle}
-                      channelZid={reply.channelZid}
-                      currentUserId={userId}
-                      loadAttachmentDetails={() => {}}
-                      meowPost={meowPostFeed}
-                      messageId={reply.id.toString()}
-                      nickname={reply.sender?.firstName}
-                      numberOfReplies={reply.numberOfReplies}
-                      ownerUserId={reply.sender?.userId}
-                      reactions={reply.reactions}
-                      text={reply.message}
-                      timestamp={reply.createdAt}
-                      userMeowBalance={userMeowBalance}
-                      variant='default'
-                      hideZidAction={hideZidAction}
-                    />
-                  </li>
-                ))
-              )}
-            </ol>
-          )}
-          {isError && <Message>Failed to load posts</Message>}
-          {isFetchingNextPage && <Message>Loading more posts</Message>}
-          {hasNextPage && !isFetchingNextPage && !isError && (
-            <Waypoint onEnter={() => fetchNextPage()} bottomOffset={'-90%'} />
-          )}
-        </PanelBody>
-      </Panel>
-
-      <FeedChat />
-    </div>
+    <Panel className={styles.Feed}>
+      <PanelHeader>
+        <PanelTitle>{headerText}</PanelTitle>
+      </PanelHeader>
+      <PanelBody className={styles.Panel}>
+        {channelZid && <PostInput className={styles.Input} channelZid={channelZid} />}
+        {isLoading && <Message>Loading posts...</Message>}
+        {isEmpty && <Message>This feed is empty</Message>}
+        {hasLoadedMessages && (
+          <ol>
+            {posts?.pages.map((page) =>
+              page.map((reply) => (
+                <li key={reply.id}>
+                  <Post
+                    className={styles.Post}
+                    arweaveId={reply.arweaveId}
+                    avatarUrl={reply.sender?.avatarUrl}
+                    author={reply.sender?.displaySubHandle}
+                    channelZid={reply.channelZid}
+                    currentUserId={userId}
+                    loadAttachmentDetails={() => {}}
+                    meowPost={meowPostFeed}
+                    messageId={reply.id.toString()}
+                    nickname={reply.sender?.firstName}
+                    numberOfReplies={reply.numberOfReplies}
+                    ownerUserId={reply.sender?.userId}
+                    reactions={reply.reactions}
+                    text={reply.message}
+                    timestamp={reply.createdAt}
+                    userMeowBalance={userMeowBalance}
+                    variant='default'
+                    hideZidAction={hideZidAction}
+                  />
+                </li>
+              ))
+            )}
+          </ol>
+        )}
+        {isError && <Message>Failed to load posts</Message>}
+        {isFetchingNextPage && <Message>Loading more posts</Message>}
+        {hasNextPage && !isFetchingNextPage && !isError && (
+          <Waypoint onEnter={() => fetchNextPage()} bottomOffset={'-90%'} />
+        )}
+      </PanelBody>
+    </Panel>
   );
 };
diff --git a/src/apps/feed/components/post-view-container/styles.module.scss b/src/apps/feed/components/post-view-container/styles.module.scss
@@ -1,9 +1,7 @@
 @use '../../../../variables' as variables;
 
 .Wrapper {
-  margin: 24px auto 24px auto;
   max-width: 600px;
-
   pointer-events: all;
 }
 

diff --git a/src/apps/feed/index.tsx b/src/apps/feed/index.tsx
@@ -8,21 +8,25 @@ import { Sidekick } from './components/sidekick';
 import { PostView } from './components/post-view-container';
 import { PanelBody } from '../../components/layout/panel';
 import { IconSlashes } from '@zero-tech/zui/icons';
+import { FeedChat } from './components/feed-chat/container';
 
 import styles from './styles.module.scss';
 
 export const FeedApp = () => {
   return (
     <div className={styles.Feed}>
       <Sidekick />
-      <Switch>
-        <Route
-          path='/feed/:zid/:postId'
-          component={({ match }: any) => <PostView postId={match.params.postId} isFeed={true} />}
-        />
-        <Route path='/feed/:zid' component={({ match }: any) => <Feed zid={match.params.zid} />} />
-        <Route path='/feed' component={Loading} />
-      </Switch>
+      <div className={styles.Wrapper}>
+        <Switch>
+          <Route
+            path='/feed/:zid/:postId'
+            component={({ match }: any) => <PostView postId={match.params.postId} isFeed={true} />}
+          />
+          <Route path='/feed/:zid' component={({ match }: any) => <Feed zid={match.params.zid} />} />
+          <Route path='/feed' component={Loading} />
+        </Switch>
+        <FeedChat />
+      </div>
     </div>
   );
 };

diff --git a/src/apps/feed/styles.module.scss b/src/apps/feed/styles.module.scss
@@ -1,3 +1,5 @@
+@use '../../variables' as variables;
+
 .Feed {
   display: flex;
   width: 100%;
@@ -13,3 +15,12 @@
   padding: 32px;
   color: var(--color-greyscale-11);
 }
+
+.Wrapper {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  flex: 1;
+  gap: variables.$default-gap;
+  padding: 24px variables.$default-gap;
+}
diff --git a/src/apps/home/index.tsx b/src/apps/home/index.tsx
@@ -2,13 +2,23 @@ import { useRouteMatch } from 'react-router-dom';
 import { PostView } from '../feed/components/post-view-container';
 import { Feed } from '../feed/components/feed';
 
+import styles from './styles.module.scss';
+
 export const HomeApp = () => {
   const route = useRouteMatch<{ postId: string }>('/home/:postId');
   const postId = route?.params?.postId;
 
   if (postId) {
-    return <PostView postId={postId} hideZidAction={true} isFeed={true} />;
+    return (
+      <div className={styles.Home}>
+        <PostView postId={postId} hideZidAction={true} isFeed={true} />
+      </div>
+    );
   }
 
-  return <Feed hideZidAction={true} />;
+  return (
+    <div className={styles.Home}>
+      <Feed hideZidAction={true} />
+    </div>
+  );
 };
diff --git a/src/apps/home/styles.module.scss b/src/apps/home/styles.module.scss
@@ -0,0 +1,10 @@
+@use '../../variables' as variables;
+
+.Home {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 24px variables.$default-gap;
+
+  pointer-events: all;
+}