refetch thread and communities

apps/web/src/components/CommunityList/CommunityList.tsx

@@ -1,23 +1,31 @@
-import { CommunityAvatar } from "../CommunityAvatar";
-import { trpc } from "../../utils/trpc";
+import {CommunityAvatar} from "../CommunityAvatar";
+import {trpc} from "../../utils/trpc";
 import * as utils from "../../utils";
-import { get, isNil, isEmpty } from "lodash";
-import { selectCommunity, useAppDispatch, useAppSelector } from "../../store";
+import {get, isNil, isEmpty} from "lodash";
+import {selectCommunity, useAppDispatch, useAppSelector} from "../../store";
 import Link from "next/link";
+import {useEffect} from "react";
 
 const CommunityList = () => {
   const dispatch = useAppDispatch();
   const communityId = useAppSelector(
-    (state) => state.community.selectedCommunity
+      (state) => state.community.selectedCommunity
   );
   const userId = useAppSelector((state) => state.user.id);
+  const newlyCreatedCommunity = useAppSelector((state) => state.community.newlyCreatedCommunity);
 
   //fetch user joined communities
   const communities = trpc.user.getUserCommunities.useQuery({
     streamId: userId,
     first: 10,
   });
 
+  useEffect(() => {
+    const fetchData = async () => {
+      await communities.refetch();
+    }
+    fetchData();
+  }, [newlyCreatedCommunity]);
   const handleOnCommunityClick = (communityDetails: {
     selectedCommunity: string;
     communityName: string;
@@ -39,46 +47,46 @@ const CommunityList = () => {
         selectedCommunity: communityNode.node?.community?.id,
         communityName: communityNode.node?.community?.communityName,
         communityAvatar: get(
-          communityNode,
-          "node.community.socialPlatforms.edges[0].node.communityAvatar"
+            communityNode,
+            "node.community.socialPlatforms.edges[0].node.communityAvatar"
         ),
         description: communityNode.node?.community?.description,
       };
       const name = communityNode.node?.community?.communityName;
       const image =
-        get(
-          communityNode,
-          "node.community.socialPlatforms.edges[0].node.communityAvatar"
-        ) || "https://placekitten.com/200/200";
+          get(
+              communityNode,
+              "node.community.socialPlatforms.edges[0].node.communityAvatar"
+          ) || "https://placekitten.com/200/200";
       const selected = communityNode.node?.community?.id == communityId;
       return (
-        <Link
-        className={'w-full'}
-          key={index}
-          href={{
-            pathname: "/community",
-            query: { communityId: communityNode.node?.community?.id },
-          }}
-        >
-          <CommunityAvatar
-            classes={utils.classNames(
-              "bg-slate-100	w-full rounded-full hover:rounded-xl hover:bg-slate-100 px-auto"
-            )}
-            key={index}
-            name={name}
-            image={image}
-            selected={selected}
-            onClick={() => handleOnCommunityClick(communityDetails)}
-          />
-        </Link>
+          <Link
+              className={'w-full'}
+              key={index}
+              href={{
+                pathname: "/community",
+                query: {communityId: communityNode.node?.community?.id},
+              }}
+          >
+            <CommunityAvatar
+                classes={utils.classNames(
+                    "bg-slate-100	w-full rounded-full hover:rounded-xl hover:bg-slate-100 px-auto"
+                )}
+                key={index}
+                name={name}
+                image={image}
+                selected={selected}
+                onClick={() => handleOnCommunityClick(communityDetails)}
+            />
+          </Link>
       );
     });
   };
 
   return (
-    <div className={"flex w-full flex-col items-center gap-[15px]"}>
-      {getCommunityList()}
-    </div>
+      <div className={"flex w-full flex-col items-center gap-[15px]"}>
+        {getCommunityList()}
+      </div>
   );
 };
 export default CommunityList;

apps/web/src/components/CommunityOnboard/CommunityOnboard.tsx

@@ -3,8 +3,7 @@ import { trpc } from "../../utils/trpc";
 import * as utils from "../../utils";
 import { get, has } from "lodash";
 import {
-  fetchUserDetails,
-  selectCommunity,
+  fetchUserDetails, newlyCreatedCommunity,
   useAppDispatch,
   useAppSelector,
 } from "../../store";
@@ -41,7 +40,6 @@ const CommunityOnboard = () => {
     };
   });
 
-  const communities = trpc.public.fetchAllCommunities.useQuery();
   const createCommunity = trpc.community.createCommunity.useMutation();
   const createSocialPlatform =
     trpc.community.createSocialPlatform.useMutation();
@@ -170,8 +168,7 @@ const CommunityOnboard = () => {
           "createCommunity.document.descripton"
         ),
       };
-      dispatch(selectCommunity(communityDetails));
-      communities.refetch();
+      dispatch(newlyCreatedCommunity(communityDetails.selectedCommunity));
 
       await updateCommunityDetailsWithDiscord({...communityDiscordDetails, communityStreamId:communityDetails.selectedCommunity});
     }

apps/web/src/components/JoinCommunity/JoinCommunity.test.tsx

@@ -35,6 +35,7 @@ jest.mock('../../store', () => ({
       userAuthor: 'sample-community-id',
     };
   },
+  useAppDispatch: jest.fn(),
   store: {
     getState: jest.fn(),
     subscribe: jest.fn(),

apps/web/src/components/JoinCommunity/JoinCommunity.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
-import { useAppSelector } from "../../store";
+import { useState } from "react";
+import {newlyCreatedCommunity, useAppDispatch, useAppSelector} from "../../store";
 import { trpc } from "../../utils/trpc";
 import { SecondaryButton } from "../Button/SecondaryButton";
 import { has, isNil } from "lodash";
@@ -11,6 +11,7 @@ const JoinCommunity = () => {
   const router = useRouter();
   const communityId = router.query.communityId as string;
   const [loading, setLoading] = useState<boolean>(false);
+  const dispatch = useAppDispatch();
   const data = useAppSelector((state) => ({
     session:state.user.didSession,
     userId: state.user.id,
@@ -40,13 +41,13 @@ const JoinCommunity = () => {
       isRight(response) &&
       has(response.value, "createUserCommunity.document.id")
     ) {
+      dispatch(newlyCreatedCommunity(communityId));
       toast.success("Joined Community");
     } else {
       toast.error("Could not join community. Please try again later.");
     }
     setLoading(false);
     await hasUser.refetch();
-
   };
   return (
     <div>

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

@@ -7,12 +7,14 @@ import {trpc} from "../../utils/trpc";
 import {constants} from "../../config";
 import {isRight} from "../../utils/fp";
 import {CreateThreadProps} from "./type";
-import {useAppSelector} from "../../store";
+import {useAppDispatch, useAppSelector} from "../../store";
 import {PrimaryButton} from "../Button";
 import {useRouter} from "next/router";
+import {newlyCreatedThread} from "../../store/features/thread";
 
 const CreateThread = (props: CreateThreadProps) => {
   const router = useRouter();
+  const dispatch = useAppDispatch();
   const [question, setQuestion] = useState<string>("");
   const [description, setDescription] = useState<string>("");
   const [creatingThread, setCreatingThread] = useState<boolean>(false);
@@ -26,15 +28,15 @@ const CreateThread = (props: CreateThreadProps) => {
 
   const handleQuestionInput = (e) => {
     questionError && !isEmpty(e.target.value.trim())
-      ? setQuestionError(false)
-      : null;
+        ? setQuestionError(false)
+        : null;
     setQuestion(e.target.value);
   };
 
   const handleDescriptionInput = (e) => {
     descriptionError && !isEmpty(e.target.value.trim())
-      ? setDescriptionError(false)
-      : null;
+        ? setDescriptionError(false)
+        : null;
     setDescription(e.target.value);
   };
 
@@ -67,21 +69,22 @@ const CreateThread = (props: CreateThreadProps) => {
     }
 
     const result = await createThread
-      .mutateAsync({
-        session: user.didSession,
-        communityId: communityId,
-        userId: user.id,
-        title: question,
-        body: description,
-        createdFrom: constants.CREATED_FROM_DEVNODE,
-        createdAt: new Date().toISOString(),
-      });
+        .mutateAsync({
+          session: user.didSession,
+          communityId: communityId,
+          userId: user.id,
+          title: question,
+          body: description,
+          createdFrom: constants.CREATED_FROM_DEVNODE,
+          createdAt: new Date().toISOString(),
+        });
     if (isRight(result)) {
       setQuestion("");
       setDescription("");
       toast.success("Thread created successfully!");
 
       const threadId = get(result, "value.createThread.createThread.document.id");
+      dispatch(newlyCreatedThread(threadId));
       await router.push({
         pathname: "/community",
         query: {communityId, threadId},
@@ -94,47 +97,47 @@ const CreateThread = (props: CreateThreadProps) => {
   };
 
   return (
-    <Question title={"Ask question"} open={props.open} onClose={props.onClose}>
-      <div className="form-group mb-6">
-        <input
-          id="question-title"
-          className={utils.classNames(
-            "form-control mb-3 block w-full rounded-[10px] border-2 border-solid border-[#F1F1F1] bg-white bg-clip-padding p-2 px-5 text-base font-normal text-gray-700 focus:border-gray-400 focus:bg-white focus:text-gray-700 focus:outline-none",
-            questionError ? "border-red-600 focus:border-red-600" : ""
-          )}
-          maxLength={500}
-          placeholder="What is your question?"
-          type="text"
-          value={question}
-          onChange={handleQuestionInput}
-          required
-        />
-        <textarea
-          id="question-desc"
-          className={utils.classNames(
-            "form-control mb-3 block h-[264px] min-h-[120px] w-full rounded-[10px] border-2 border-solid border-[#F1F1F1] bg-white bg-clip-padding p-5 text-base font-normal text-gray-700 focus:border-gray-400 focus:bg-white focus:text-gray-700 focus:outline-none",
-            descriptionError ? "border-red-600 focus:border-red-600" : ""
-          )}
-          placeholder="Describe your question"
-          value={description}
-          maxLength={2000}
-          onChange={handleDescriptionInput}
-          required
-        />
-        <div
-          className=" mb-3 block flex w-full flex-col rounded-[10px] border-2 border-solid border-[#F1F1F1] bg-white bg-clip-padding p-2 px-5 text-base font-normal text-gray-700 focus:border-gray-400 focus:bg-white focus:text-gray-700 focus:outline-none">
+      <Question title={"Ask question"} open={props.open} onClose={props.onClose}>
+        <div className="form-group mb-6">
+          <input
+              id="question-title"
+              className={utils.classNames(
+                  "form-control mb-3 block w-full rounded-[10px] border-2 border-solid border-[#F1F1F1] bg-white bg-clip-padding p-2 px-5 text-base font-normal text-gray-700 focus:border-gray-400 focus:bg-white focus:text-gray-700 focus:outline-none",
+                  questionError ? "border-red-600 focus:border-red-600" : ""
+              )}
+              maxLength={500}
+              placeholder="What is your question?"
+              type="text"
+              value={question}
+              onChange={handleQuestionInput}
+              required
+          />
+          <textarea
+              id="question-desc"
+              className={utils.classNames(
+                  "form-control mb-3 block h-[264px] min-h-[120px] w-full rounded-[10px] border-2 border-solid border-[#F1F1F1] bg-white bg-clip-padding p-5 text-base font-normal text-gray-700 focus:border-gray-400 focus:bg-white focus:text-gray-700 focus:outline-none",
+                  descriptionError ? "border-red-600 focus:border-red-600" : ""
+              )}
+              placeholder="Describe your question"
+              value={description}
+              maxLength={2000}
+              onChange={handleDescriptionInput}
+              required
+          />
+          <div
+              className=" mb-3 block flex w-full flex-col rounded-[10px] border-2 border-solid border-[#F1F1F1] bg-white bg-clip-padding p-2 px-5 text-base font-normal text-gray-700 focus:border-gray-400 focus:bg-white focus:text-gray-700 focus:outline-none">
             <div className="w-full whitespace-normal break-all p-2">
               Posting on <span className="font-bold">{communityName}</span>
             </div>
+          </div>
+          <PrimaryButton
+              classes={"w-full mt-4"}
+              loading={creatingThread}
+              title={creatingThread ? "Posting..." : "Post Thread"}
+              onClick={handleSubmit}
+          />
         </div>
-        <PrimaryButton
-          classes={"w-full mt-4"}
-          loading={creatingThread}
-          title={creatingThread ? "Posting..." : "Post Thread"}
-          onClick={handleSubmit}
-        />
-      </div>
-    </Question>
+      </Question>
   );
 };
 

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

@@ -7,13 +7,15 @@ import {trpc} from "../../utils/trpc";
 import {constants} from "../../config";
 import {isRight} from "../../utils/fp";
 import {GlobalCreateThreadProps, SelectedCommunity} from "./type";
-import {useAppSelector} from "../../store";
+import {useAppDispatch, useAppSelector} from "../../store";
 import {PrimaryButton} from "../Button";
 import {useRouter} from "next/router";
 import Dropdown from "../Dropdown/Dropdown";
+import {newlyCreatedThread} from "../../store/features/thread";
 
 const GlobalCreateThread = (props: GlobalCreateThreadProps) => {
   const router = useRouter();
+  const dispatch = useAppDispatch();
   const [question, setQuestion] = useState<string>("");
   const [description, setDescription] = useState<string>("");
   const [creatingThread, setCreatingThread] = useState<boolean>(false);
@@ -119,6 +121,7 @@ const GlobalCreateThread = (props: GlobalCreateThreadProps) => {
       toast.success("Thread created successfully!");
 
       const threadId = get(result, "value.createThread.createThread.document.id");
+      dispatch(newlyCreatedThread(threadId));
       await router.push({
         pathname: "/community",
         query: {communityId: community.communityId, threadId},

apps/web/src/components/ThreadSection/ThreadSection.tsx

@@ -66,16 +66,17 @@ export const ThreadSection = (props: ThreadSectionProps) => {
   }
 
   return (
-    <div className="flex flex-col h-full p-4">
-      <div className="overflow-y-scroll h-full py-4 scrollbar-hide">
+    <div className="flex flex-col h-full p-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]">
+        <div className="mt-[40px] space-y-[40px] mb-[120px]">
           {comments.data && comments.data.edges.map((item) => (
             <Comment key={item.node.id} comment={item.node}/>
           ))}
         </div>
       </div>
-      <div className="flex flex-row py-2 px-4 bottom-8 rounded-xl border h-auto bg-white mt-4">
+      <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">
         <textarea
           id="chat"
           ref={commentBoxRef}
@@ -100,6 +101,7 @@ export const ThreadSection = (props: ThreadSectionProps) => {
           <SendIcon/>
         </button>
       </div>
+      </div>
     </div>
   );
 }