Fix reported ui issues, minor improvements

.env.template

@@ -21,6 +21,8 @@ NEXT_PUBLIC_AGGREGATOR_URL=
 # BOT
 AGGREGATOR_PORT=4000
 AGGREGATOR_API_KEY=
+# FEATURE FLAGS
+AGGREGATOR_FEAT_ENABLE_LOGS=false
 
 # DISCORD
 NEXT_PUBLIC_DISCORD_OAUTH_CLIENT_ID=

.gitignore

@@ -35,6 +35,7 @@ apps/discord-bot/tsconfig.tsbuildinfo
 apps/indexer/tsconfig.tsbuildinfo
 prisma/dev.db
 .env
+.env.*
 
 packages/composedb/.ceramic
 .idea/

apps/discord-bot/src/bots/discord/comments/handler.ts

@@ -1,6 +1,6 @@
 import {ChannelType, Client, Message, MessageType, ThreadChannel} from "discord.js";
 import {Clients, PostCommentToSocialPayload} from "../../../core/types";
-import {buildMessage} from "../utils";
+import {buildMessage, logErrorToDev} from "../utils";
 import {config, constants, getBotDid} from "../../../config";
 import {composeMutationHandler} from "@devnode/composedb";
 import {logger} from "../../../core/utils/logger";
@@ -62,6 +62,8 @@ export const handleNewComment = async (clients: Clients, message: Message<boolea
   if(result.errors && result.errors.length > 0) {
     logger.error('discord', {e: result.errors});
     await message.delete().catch((e) => logger.error('discord', {e}));
+    await message.channel.send(constants.replies.composeError);
+    logErrorToDev(clients.discord, result.errors);
   }
 };
 

apps/discord-bot/src/bots/discord/threads/handler.ts

@@ -1,7 +1,7 @@
 import {AnyThreadChannel, ChannelType, TextChannel} from "discord.js";
 import {Clients, Node, PostThreadToSocialPayload, User} from "../../../core/types";
 import {config, constants, getBotDid} from "../../../config";
-import {buildMessage, buildThread} from "../utils";
+import {buildMessage, buildThread, logErrorToDev} from "../utils";
 import {composeMutationHandler} from "@devnode/composedb";
 import {logger} from "../../../core/utils/logger";
 
@@ -44,6 +44,8 @@ export const handleNewThread = async (clients: Clients, thread: AnyThreadChannel
   if(result.errors && result.errors.length > 0) {
     logger.error('discord', {e: result.errors});
     await thread.delete().catch((e) => logger.error('discord', {e}));
+    await thread.send(constants.replies.composeError);
+    logErrorToDev(clients.discord, result.errors);
   }
 };
 

apps/discord-bot/src/bots/discord/utils.ts

@@ -1,10 +1,12 @@
 import {
   ButtonBuilder,
+  Client,
   EmbedBuilder,
   GuildTextThreadCreateOptions, MessageCreateOptions,
   ThreadAutoArchiveDuration
 } from "discord.js";
 import {DiscordMessage} from "./types";
+import {config} from "../../config";
 
 export const buildThread = (title: string): GuildTextThreadCreateOptions<any> => {
   return {
@@ -34,3 +36,12 @@ export const buildLinkButton = (url: string) => {
     .setURL(url)
     .setStyle(5)
 }
+
+export const logErrorToDev = (client: Client, errors: any) => {
+  if (!config.features.devLogs) return;
+  config.debug.devs.map((id) => {
+    client.users.fetch(id).then((user) => {
+      user.send(JSON.stringify(errors));
+    });
+  });
+}

apps/discord-bot/src/config/config.ts

@@ -1,4 +1,5 @@
 import {DIDSession} from "did-session";
+import {getBoolean} from "../core/utils/data";
 
 export const config = {
   server: {
@@ -15,6 +16,12 @@ export const config = {
     channel: process.env.DISCORD_SERVER_NAME || "devnode",
     channelCategory: process.env.DISCORD_CHANNEL_CATEGORY_NAME || "DEVNODE COMMS"
   },
+  debug: {
+    devs: ["933958006218031114", "922429029544525866"],
+  },
+  features: {
+    devLogs: getBoolean(process.env.AGGREGATOR_FEAT_ENABLE_LOGS),
+  },
   devnodeWebsite: process.env.DEVNODE_WEBSITE || "http://localhost:3000",
 };
 

apps/discord-bot/src/config/constants.ts

@@ -13,5 +13,6 @@ export const constants = {
     noPermsToDel: "I should delete this but I can't! ADMIN PLS HELP!",
     noMsgOutOfThread: "You can only start threads or reply to threads in the devnode channel",
     userUnknown: `You must have an account on devnode to create thread or reply. Please create an account on ${config.devnodeWebsite}`,
+    composeError: "There was an error submitting your request. Please try again in a while!",
   },
 }

apps/discord-bot/src/core/utils/data.ts

@@ -15,3 +15,9 @@ export const getSocialThreadId = (socials: SocialThreadId[], platformName: strin
   const id = socials.find((s) => s.platformName === platformName);
   return _.get(id,"threadId", "");
 }
+
+export const getBoolean = (value: string | undefined | null) => {
+  if (_.isNil(value)) return false;
+  if (value === 'true') return true;
+  return false;
+}

apps/discord-bot/tests/unit/utils/data.spec.ts

@@ -1,6 +1,6 @@
 import {SocialPlatform, Node, SocialThreadId} from "../../../src/core/types";
 import {expect} from "../../setup";
-import {communityHasSocial, getSocialCommunityId, getSocialThreadId} from "../../../src/core/utils/data";
+import {communityHasSocial, getSocialCommunityId, getSocialThreadId, getBoolean} from "../../../src/core/utils/data";
 
 describe('utils.data', () => {
   const socialPlatforms: Node<SocialPlatform>[] = [
@@ -53,4 +53,11 @@ describe('utils.data', () => {
       expect(getSocialThreadId(socialThreadIds, "twitter")).to.eq("");
     });
   });
+
+  describe('getBoolean', () => {
+    expect(getBoolean("true")).to.eq(true);
+    expect(getBoolean("false")).to.eq(false);
+    expect(getBoolean("lol")).to.eq(false);
+    expect(getBoolean(undefined)).to.eq(false);
+  });
 });

apps/web/src/components/AvatarCard/AvatarCard.tsx

@@ -19,8 +19,9 @@ export const AvatarCard = (props: AvatarCardProps) => {
       <Image
         width={props.imageSize}
         height={props.imageSize}
-        className="rounded-full"
+        className={`rounded-full object-cover ${props.imageClasses || ""}`}
         src={props.image || "https://placekitten.com/200/200"}
+        style={{ width: props.imageSize, height: props.imageSize }}
         alt={`${props.name} avatar`}
       />
       {props.name && <div>{props.name} </div>}

apps/web/src/components/AvatarCard/types.ts

@@ -4,6 +4,7 @@ export interface AvatarCardProps {
   name?: string;
   address?: string;
   classes?: string;
+  imageClasses?: string;
   onAddressClick?(address: string): void;
   onClick?(): void;
 }

apps/web/src/components/Comment/Comment.tsx

@@ -1,6 +1,6 @@
 import {FlexColumn, FlexRow} from "../Flex";
-import Image from "next/image";
 import {showUserProfile, useAppDispatch} from "../../store";
+import {AvatarCard} from "../AvatarCard";
 import {DownVote, Spinner, UpVote} from "../Icons";
 import {useState} from "react";
 import * as utils from "../../utils";
@@ -41,12 +41,10 @@ export const Comment = (props: CommentProps) => {
           dispatch(showUserProfile({userProfileId: userId}));
         }}
       >
-        <Image
-          width={44}
-          height={44}
-          className="rounded-xl"
-          src={user?.platformAvatar || "https://placekitten.com/200/200"}
-          alt={`${user?.platformUsername} avatar`}
+        <AvatarCard
+          imageClasses="!rounded-xl"
+          imageSize={44}
+          image={user?.platformAvatar}
         />
       </div>
       <FlexColumn classes="space-y-3">

apps/web/src/components/CommunityAvatar/CommunityAvatar.tsx

@@ -13,7 +13,7 @@ export const CommunityAvatar = (props: CommunityAvatarProps) => {
       <div
         id="community-avatar"
         className={utils.classNames(
-          "group relative flex h-12 w-12 cursor-pointer items-center justify-center z-2 mx-auto overflow-hidden ",
+          "group relative flex h-12 w-12 cursor-pointer items-center justify-center z-[2] mx-auto overflow-hidden ",
           props.classes
         )}
         onClick={props.onClick}

apps/web/src/components/LeftPanel/LeftPanel.tsx

@@ -20,7 +20,7 @@ const LeftPanel = (props: LeftPanelProp) => {
       >
         <div className={`h-full flex flex-col justify-between`}>
           <div
-              className={`relative z-1 w-full top-0 my-[14px] flex h-auto flex-col gap-[30px] `}
+              className={`relative z-[1] w-full top-0 my-[14px] flex h-auto flex-col gap-[30px] `}
           >
             <CommunityAvatar
                 key={"create"}
@@ -59,7 +59,7 @@ const LeftPanel = (props: LeftPanelProp) => {
           </div>
           <hr className="my-2"/>
           <div
-              className={`relative z-1 bottom-0 mt-[14px] flex h-auto flex-col gap-[15px] w-full items-center justify-center`}
+              className={`relative z-[1] bottom-0 mt-[14px] flex h-auto flex-col gap-[15px] w-full items-center justify-center`}
           >
             <GlobalAskQuestion/>
             <UserOnboard/>

apps/web/src/components/Search/Search.tsx

@@ -2,7 +2,7 @@ import {SearchProps} from "./types";
 
 export const Search = (props: SearchProps) => {
   return (
-    <div className="flex grow items-center lg:mx-0 lg:max-w-none xl:px-0">
+    <div className="flex items-center lg:mx-0 lg:max-w-none xl:px-0">
       <div className="w-full">
         <div className="relative">
           <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-gray-500">

apps/web/src/components/Thread/Thread.tsx

@@ -1,7 +1,7 @@
 import {ThreadProps} from "./type";
 import {FlexColumn, FlexRow} from "../Flex";
-import Image from "next/image";
 import {showUserProfile, useAppDispatch} from "../../store";
+import {AvatarCard} from "../AvatarCard";
 import {Markdown} from "../Markdown";
 
 export const Thread = ({thread}: ThreadProps) => {
@@ -17,12 +17,10 @@ export const Thread = ({thread}: ThreadProps) => {
         onClick={() => {
           dispatch(showUserProfile({userProfileId: userId}));
         }}>
-        <Image
-          width={44}
-          height={44}
-          className="rounded-xl"
-          src={user?.platformAvatar || "https://placekitten.com/200/200"}
-          alt={`${user?.platformUsername} avatar`}
+        <AvatarCard
+          imageClasses="!rounded-xl"
+          imageSize={44}
+          image={user?.platformAvatar}
         />
       </div>
       <FlexColumn>

apps/web/src/components/UserAccount/UserAccount.tsx

@@ -29,16 +29,16 @@ const UserAccount = (props) => {
       >
         <Popover.Panel>
           <div
-              className={`w-[200px] absolute bottom-[100%] right-0 left-[20px] p-[12px] z-2 ${props.popoverClass || ""}`}>
-            <div className={"w-full flex flex-col bg-white border-1 border-gray text-center border rounded-2xl "}>
-              <div className="flex justify-between items-center m-[12px] text-gray-500 cursor-pointer"
+              className={`w-[200px] absolute bottom-[30%] right-0 left-[60px] px-[12px] z-[2] ${props.popoverClass || ""}`}>
+            <div className={"w-full flex flex-col bg-white border-1 shadow-xl border-gray text-center border rounded-2xl"}>
+              <div className="flex justify-between items-center m-[12px] text-gray-500 cursor-pointer hover:text-gray-700"
                    onClick={handleDisconnect}>
                 <span>Disconnect</span>
                 <div className="w-[15px]">
                   <img src={"/logout.svg"} alt="logout" width="100%" height="100%"/>
                 </div>
               </div>
-              <div className="flex justify-between items-center m-[12px] text-gray-500 cursor-pointer"
+              <div className="flex justify-between items-center m-[12px] text-gray-500 cursor-pointer hover:text-gray-700"
                    onClick={viewProfilehandler}>
                 <span>View Profile</span>
                 <div className="w-[15px]">

apps/web/src/pages/community.tsx

@@ -84,15 +84,17 @@ const CommunityPage = () => {
   }
 
   return (
-    <div className="flex h-full max-h-full flex-col relative overflow-hidden">
+    <div className="flex h-screen flex-col overflow-y-hidden">
       <JoinCommunity />
-      <div className="flex max-h-full flex-row grow ">
-        <div className="mx-4 flex flex-col h-full w-[30%]">
+      <div className="flex flex-row grow overflow-y-auto">
+      <div className="mx-4 flex flex-col w-[40%]">
           {communityName && (
             <p className="my-4 text-4xl font-medium">{communityName}</p>
           )}
           <FlexRow classes="gap-2">
-            <Search onQuery={() => {}} />
+            <div className="grow">
+              <Search onQuery={() => {}} />
+            </div>
             <button
               title="ask a question"
               className="h-[50px] min-w-[50px] rounded-xl border bg-white p-2 hover:border-gray-500"
@@ -101,7 +103,7 @@ const CommunityPage = () => {
               <AddIcon />
             </button>
           </FlexRow>
-          <div className="scrollbar-hide mt-4 flex h-full flex-col space-y-4 overflow-y-scroll pt-4">
+          <div className="mt-4 flex flex-col space-y-4 overflow-y-scroll scrollbar-hide pt-4 pb-[500px]">
             {data?.pages?.map((page) => (
                page?.edges?.map((thread) => (
                 <Link

apps/web/src/pages/feed.tsx

@@ -38,11 +38,12 @@ const FeedPage = () => {
   }
 
    return (
-    <div className="flex flex-row max-h-screen h-full overflow-y-hidden relative">
-      <div className="w-[30%] mx-4 flex flex-col">
+    <div className="flex h-screen flex-col overflow-y-hidden">
+    <div className="flex flex-row grow overflow-y-auto">
+      <div className="mx-4 flex flex-col w-[40%]">
         <p className="text-4xl font-medium my-4">your feed</p>
         <Search onQuery={() => {}}/>
-        <div className="scrollbar-hide h-full flex flex-col mt-4 space-y-4 overflow-y-scroll pt-4">
+        <div className="mt-4 flex flex-col space-y-4 overflow-y-scroll scrollbar-hide pt-4 pb-[500px]">
           {threads && threads.map((thread) => (
               <Link
                 key={thread.node.id}
@@ -74,6 +75,7 @@ const FeedPage = () => {
             />
           )}
       </div>
+      </div>
     </div>
   );
 };

apps/web/src/pages/index.tsx

@@ -42,7 +42,7 @@ const Home: NextPage = () => {
       <div className="m-4 mt-12 grid gap-8 md:grid-cols-1 lg:grid-cols-2">
         {data?.pages?.map((page) => {
           return (
-            page?.edges?.map((community, index) => {
+            page?.edges?.map((community) => {
               if (isNil(community.node)) return <></>;
               if (isEmpty(community.node?.socialPlatforms.edges)) return <></>;
               let tags: any;
@@ -55,14 +55,13 @@ const Home: NextPage = () => {
 
               return (
                 <Link
-                  key={index}
+                  key={community.node?.id}
                   href={{
                     pathname: "/community",
                     query: {communityId: community.node?.id},
                   }}
                 >
                   <CommunityCard
-                    key={index}
                     communityName={community.node?.communityName}
                     about={community.node?.description}
                     communityAvatar={

apps/web/src/sections/ThreadSection/ThreadSection.tsx

@@ -123,7 +123,7 @@ export const ThreadSection = (props: ThreadSectionProps) => {
   }
 
   return (
-    <div className="flex flex-col h-full p-4 ">
+    <div className="flex flex-col h-full px-4">
       <div className="overflow-y-scroll h-full py-4 scrollbar-hide box-border ">
         {currentThread.data?.node && <Thread thread={currentThread.data.node}/>}
         <div className="mt-[40px] space-y-[40px] mb-[120px]">
@@ -145,8 +145,8 @@ export const ThreadSection = (props: ThreadSectionProps) => {
           />
         </div>
       </div>
-      <div className="absolute bottom-0 pb-[20px] h-auto bg-[#FBFBFB] mt-4 w-[70%]">
-        <div className="flex flex-row py-2 px-4 rounded-xl bg-white border h-auto items-center">
+      <div className="relative pb-[20px] h-auto bg-[#FBFBFB] mt-4 w-full">
+      <div className="flex flex-row py-2 px-4 rounded-xl bg-white border h-auto items-center">
         <textarea
           id="chat"
           ref={commentBoxRef}