@levo-so/blocks 0.1.59 → 0.1.61

package/src/blocks/community/community-1.tsx

@@ -0,0 +1,557 @@
+import type {
+  IForum,
+  IForumJoinRequest,
+  IForumMembershipStatus,
+  IForumPost,
+  IResponseMultiple,
+  IResponseSingle,
+} from "@levo-so/core";
+import { getLevoError } from "@levo-so/core";
+import { useLevo } from "@levo-so/react";
+import {
+  Box,
+  Button,
+  CategoryFilter,
+  Container,
+  CreateForumPost,
+  ForumPost,
+  ForumProvider,
+  Heading,
+  type ILevoBlockBaseProps,
+  Media,
+  PostsRestrictionOverlay,
+  SamplePostSkeleton,
+  SearchInput,
+  Section,
+  Skeleton,
+  Typography,
+  useAuth,
+} from "@levo-so/studio";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import type { ICommunity1Content } from "./community-1.schema";
+
+const PostSkeleton: React.FC = () => {
+  return (
+    <div className="flex flex-col gap-3 rounded-lg border border-[#E5E5E5] bg-white p-3">
+      {/* Header */}
+      <div className="flex items-center gap-2">
+        <Skeleton className="h-8.5 w-8.5 rounded-full" />
+        <div className="flex items-center gap-1">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-3 w-16" />
+        </div>
+      </div>
+
+      {/* Title and Content */}
+      <div className="space-y-2">
+        <Skeleton className="h-5 w-3/4" />
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-2/3" />
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="mt-3 flex items-center gap-4">
+        <Skeleton className="h-8 w-20 rounded-lg" />
+        <Skeleton className="h-8 w-16 rounded-lg" />
+        <Skeleton className="h-8 w-20 rounded-lg" />
+      </div>
+    </div>
+  );
+};
+
+/** Map API error codes to user-friendly messages */
+const JOIN_REQUEST_ERROR_MESSAGES: { [key: number]: string } = {
+  12111: "This forum doesn't require join requests.",
+  12112: "Join requests are not enabled for this forum.",
+  12113: "You are already a member of this forum.",
+  12114: "You have already submitted a join request.",
+};
+
+const MAX_RETRY_ATTEMPTS = 3;
+
+const Community1: React.FC<ILevoBlockBaseProps<ICommunity1Content>> = ({ content }) => {
+  const levoClient = useLevo();
+  const { isLoggedIn } = useAuth();
+  const observerTarget = useRef<HTMLDivElement>(null);
+  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [isFetchingMore, setIsFetchingMore] = useState(false);
+  const [forumPosts, setForumPosts] = useState<IForumPost[]>([]);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [failedAttempts, setFailedAttempts] = useState(0);
+  const [hasError, setHasError] = useState(false);
+  const [forumData, setForumData] = useState<IForum | null>(null);
+  const [isMember, setIsMember] = useState<boolean>(false);
+  const [isLoadingMembership, setIsLoadingMembership] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isSearching, setIsSearching] = useState(false);
+  const hasFetchedMembershipRef = useRef(false);
+
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+
+  // Track initial mount to prevent duplicate fetches
+  const isInitialMountRef = useRef(true);
+
+  // Join request state
+  const [joinRequest, setJoinRequest] = useState<IForumJoinRequest | null>(null);
+
+  const forumKey = content?.forum_key as unknown as string;
+
+  useEffect(() => {
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const fetchSingleForumData = useCallback(async () => {
+    try {
+      const response = await levoClient.fetch
+        .url(`/v1/community/${forumKey}/get-single`)
+        .get()
+        .json<IResponseSingle<IForum>>();
+
+      if (response?.content?.data) {
+        setForumData(response.content.data);
+      }
+
+      return response;
+    } catch (error) {
+      levoClient?.logger?.error("Error fetching single forum data:", error);
+      return null;
+    }
+  }, [forumKey]);
+
+  const checkMembership = useCallback(async () => {
+    if (!forumData?.settings?.invite_only || !isLoggedIn) {
+      setIsMember(false);
+      setJoinRequest(null);
+      hasFetchedMembershipRef.current = true;
+      return;
+    }
+
+    setIsLoadingMembership(true);
+
+    try {
+      const response = await levoClient.fetch
+        .url(`/v1/community/${forumKey}/member/get-me`)
+        .get()
+        .json<IResponseSingle<IForumMembershipStatus>>();
+
+      const data = response?.content?.data;
+      setIsMember(!!data?.member);
+      setJoinRequest(data?.join_request || null);
+    } catch (error) {
+      const levoError = getLevoError(error);
+      levoClient?.logger?.error("Error checking membership:", levoError);
+      setIsMember(false);
+      setJoinRequest(null);
+    } finally {
+      setIsLoadingMembership(false);
+      hasFetchedMembershipRef.current = true;
+    }
+  }, [forumKey, forumData?.settings?.invite_only, isLoggedIn, levoClient]);
+
+  /**
+   * Submit a join request for the current user
+   */
+  const handleSubmitJoinRequest = useCallback(
+    async (message?: string): Promise<boolean> => {
+      try {
+        const response = await levoClient.fetch
+          .url(`/v1/community/${forumKey}/join-request/submit`)
+          .post({ message })
+          .json<IResponseSingle<IForumJoinRequest>>();
+
+        if (response?.content?.data) {
+          setJoinRequest(response.content.data);
+          return true;
+        }
+        return false;
+      } catch (error) {
+        const levoError = getLevoError(error);
+        levoClient?.logger?.error("Failed to submit join request", levoError);
+
+        // Throw with user-friendly message
+        const errorMessage =
+          JOIN_REQUEST_ERROR_MESSAGES[levoError.code as any] || levoError.message;
+        throw new Error(errorMessage);
+      }
+    },
+    [forumKey, levoClient],
+  );
+
+  const fetchPolls = useCallback(
+    async (pageNumber: number, append = false) => {
+      if (append) {
+        setIsFetchingMore(true);
+      } else {
+        setIsLoading(true);
+      }
+
+      try {
+        const requestBody: {
+          limit: number;
+          page: number;
+          sort: { created_at: "desc" };
+          where?: { categories: { in: string[] } };
+        } = {
+          limit: 10,
+          page: pageNumber,
+          sort: {
+            created_at: "desc",
+          },
+        };
+
+        if (selectedCategories.length > 0) {
+          requestBody.where = {
+            categories: { in: selectedCategories },
+          };
+        }
+
+        const response = await levoClient.fetch
+          .url(`/v1/community/${forumKey}/post/list`)
+          .post(requestBody)
+          .json<IResponseMultiple<IForumPost>>();
+
+        if (response && response?.content?.data) {
+          const newPosts = response.content.data;
+          const totalPages = response.content.meta?.pages || 1;
+
+          setForumPosts((prev) => (append ? [...prev, ...newPosts] : newPosts));
+          setHasMore(pageNumber < totalPages);
+          setFailedAttempts(0);
+          setHasError(false);
+        }
+      } catch (err: unknown) {
+        console.error("Failed to fetch forum posts:", err);
+
+        setFailedAttempts((prev) => prev + 1);
+
+        if (failedAttempts + 1 >= MAX_RETRY_ATTEMPTS) {
+          setHasError(true);
+          setHasMore(false);
+        }
+      } finally {
+        setIsLoading(false);
+        setIsFetchingMore(false);
+      }
+    },
+    [levoClient, forumKey, failedAttempts, selectedCategories],
+  );
+
+  const handleSearch = useCallback(
+    (query: string) => {
+      setSearchQuery(query);
+
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+
+      if (!query.trim()) {
+        fetchPolls(1, false);
+        return;
+      }
+
+      searchTimeoutRef.current = setTimeout(async () => {
+        setIsSearching(true);
+        try {
+          const searchRequestBody: {
+            limit: number;
+            page: number;
+            sort: { created_at: "desc" };
+            search: string;
+            where?: { categories: { in: string[] } };
+          } = {
+            limit: 10,
+            page: 1,
+            sort: {
+              created_at: "desc",
+            },
+            search: query,
+          };
+
+          if (selectedCategories.length > 0) {
+            searchRequestBody.where = {
+              categories: { in: selectedCategories },
+            };
+          }
+
+          const response = await levoClient.fetch
+            .url(`/v1/community/${forumKey}/post/list`)
+            .post(searchRequestBody)
+            .json<IResponseMultiple<IForumPost>>();
+
+          if (response?.content?.data) {
+            setForumPosts(response.content.data);
+            setHasMore(false);
+          }
+        } catch (error) {
+          const levoError = getLevoError(error);
+          console.error("Search failed:", levoError);
+        } finally {
+          setIsSearching(false);
+        }
+      }, 500);
+    },
+    [forumKey, levoClient, fetchPolls, selectedCategories],
+  );
+
+  const handleCategoryToggle = useCallback((categoryId: string) => {
+    setSelectedCategories((prev) => {
+      const isSelected = prev.includes(categoryId);
+      return isSelected ? prev.filter((id) => id !== categoryId) : [...prev, categoryId];
+    });
+  }, []);
+
+  const handlePostCreated = useCallback((post: IForumPost) => {
+    setForumPosts((prev) => [post, ...prev]);
+  }, []);
+
+  useEffect(() => {
+    fetchSingleForumData();
+  }, [fetchSingleForumData]);
+
+  useEffect(() => {
+    if (forumData) {
+      checkMembership();
+    }
+  }, [forumData, checkMembership]);
+
+  const isInviteOnly = forumData?.settings?.invite_only ?? false;
+  const allowJoinRequests = forumData?.settings?.allow_join_requests ?? false;
+
+  /** Whether membership check is still pending for invite-only forums */
+  const isMembershipCheckPending = isInviteOnly && !hasFetchedMembershipRef.current;
+
+  /**
+   * Check if posts should be restricted (show overlay):
+   * 1. For non-logged-in users: when invite_only=true
+   * 2. For logged-in non-members: when invite_only=true AND allow_public_view_for_post=false
+   * Note: Only evaluate after membership check is complete to avoid flash
+   */
+  const shouldRestrictPosts =
+    isInviteOnly &&
+    hasFetchedMembershipRef.current &&
+    !isLoadingMembership &&
+    (!isLoggedIn || (!isMember && !forumData?.settings?.allow_public_view_for_post));
+
+  /**
+   * Whether user can interact with posts (upvote/downvote):
+   * - Not invite-only: true (login modal will show if not logged in)
+   * - Invite-only + member: true
+   * - Invite-only + non-member: false (greyed out)
+   */
+  const canInteractWithPosts = !isInviteOnly || isMember;
+
+  useEffect(() => {
+    // Only fetch posts if we've checked membership and posts are not restricted
+    if (forumData && !isLoadingMembership && !shouldRestrictPosts) {
+      fetchPolls(1, false);
+    }
+  }, [forumData, isLoadingMembership, shouldRestrictPosts]);
+
+  // Re-fetch posts when category filter changes (skip initial mount)
+  useEffect(() => {
+    if (isInitialMountRef.current) {
+      isInitialMountRef.current = false;
+      return;
+    }
+
+    if (forumData && !isLoadingMembership && !shouldRestrictPosts) {
+      setPage(1);
+      fetchPolls(1, false);
+    }
+  }, [selectedCategories, forumData, isLoadingMembership, shouldRestrictPosts, fetchPolls]);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (
+          entry &&
+          entry.isIntersecting &&
+          hasMore &&
+          !isLoading &&
+          !isFetchingMore &&
+          !hasError
+        ) {
+          const nextPage = page + 1;
+          setPage(nextPage);
+          fetchPolls(nextPage, true);
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    const currentTarget = observerTarget.current;
+    if (currentTarget) {
+      observer.observe(currentTarget);
+    }
+
+    return () => {
+      if (currentTarget) {
+        observer.unobserve(currentTarget);
+      }
+    };
+  }, [hasMore, isLoading, isFetchingMore, hasError, page, fetchPolls]);
+
+  return (
+    <ForumProvider
+      forum={forumData}
+      isMember={isMember}
+      isLoadingMembership={isLoadingMembership}
+      isInviteOnly={isInviteOnly}
+      canInteractWithPosts={canInteractWithPosts}
+      canInteractWithComments={canInteractWithPosts}
+      joinRequest={joinRequest}
+      isJoinRequestPending={!!joinRequest}
+      allowJoinRequests={allowJoinRequests}
+      submitJoinRequest={handleSubmitJoinRequest}
+      refreshMembershipStatus={checkMembership}
+    >
+      <Section elementKey="layout">
+        <Container elementKey="container">
+          <Box elementKey="content_section">
+            <Box elementKey="left_container">
+              <Box elementKey="sidebar_links_levoGroup">
+                {content?.sidebar_links?.map((v, index) => {
+                  return (
+                    <Button
+                      key={`sidebar_links.${index}.sidebar_link`}
+                      elementKey={`sidebar_links.${index}.sidebar_link`}
+                    />
+                  );
+                })}
+              </Box>
+            </Box>
+
+            <Box elementKey="feed_container">
+              <Box elementKey="header">
+                <Heading elementKey="title" />
+                <Typography elementKey="description" />
+              </Box>
+              <Box elementKey="search_container">
+                <SearchInput
+                  name="search"
+                  placeholder="Search..."
+                  value={searchQuery}
+                  onChange={(e) => handleSearch(e.target.value)}
+                />
+                <Button elementKey="new_post_cta" />
+              </Box>
+
+              <CreateForumPost forumKey={forumKey} onPostCreated={handlePostCreated} />
+              <Box elementKey="posts">
+                {isMembershipCheckPending ||
+                isLoadingMembership ||
+                (isLoading && !shouldRestrictPosts) ||
+                isSearching ? (
+                  <>
+                    <PostSkeleton />
+                    <PostSkeleton />
+                    <PostSkeleton />
+                    <PostSkeleton />
+                  </>
+                ) : shouldRestrictPosts ? (
+                  <>
+                    {/* Show sample posts behind the overlay */}
+                    <SamplePostSkeleton opacity={0.6} />
+                    <SamplePostSkeleton opacity={0.4} />
+                    <SamplePostSkeleton opacity={0.3} />
+                    <PostsRestrictionOverlay isOpen communityName={forumData?.name} />
+                  </>
+                ) : (
+                  <>
+                    {forumPosts?.map((item, index: number) => (
+                      <ForumPost
+                        key={`poll_${forumKey}_${item?._id}_${index}`}
+                        post={item}
+                        postDetailPageBaseURL={content?.post_detail_page_url || ""}
+                        forumKey={forumKey}
+                      />
+                    ))}
+
+                    {hasMore && !hasError && <div ref={observerTarget} className="h-4" />}
+
+                    {isFetchingMore && (
+                      <>
+                        <PostSkeleton />
+                        <PostSkeleton />
+                      </>
+                    )}
+
+                    {hasError && (
+                      <Box
+                        elementKey="error_container"
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          minHeight: "16rem",
+                        }}
+                      >
+                        <Typography
+                          elementKey="error_text"
+                          className="font-medium text-red-600 text-sm"
+                        >
+                          Failed to load posts. Please try refreshing the page.
+                        </Typography>
+                      </Box>
+                    )}
+                  </>
+                )}
+              </Box>
+            </Box>
+            <Box elementKey="right_container">
+              <Box elementKey="category_container">
+                <Box elementKey="category_header">
+                  <Heading elementKey="category_title" />
+                  <Typography elementKey="category_description" />
+                </Box>
+                <Box elementKey="category_list_container">
+                  <CategoryFilter
+                    forumKey={forumKey}
+                    selectedCategories={selectedCategories}
+                    onCategoryToggle={handleCategoryToggle}
+                  />
+                </Box>
+              </Box>
+              <Box elementKey="edit_profile_block">
+                <Box elementKey="edit_profile_block_content_wrapper">
+                  <Media elementKey="edit_profile_block_banner_image" alt="Banner Image" />
+                  <Box elementKey="edit_profile_block_content">
+                    <Media elementKey="edit_profile_block_logo" alt="Community Logo" />
+                    <Box elementKey="edit_profile_block_text_container">
+                      <Heading elementKey="edit_profile_block_title" />
+                      <Typography elementKey="edit_profile_block_description" />
+                    </Box>
+                  </Box>
+                </Box>
+                <Box elementKey="edit_profile_ctas_levoGroup">
+                  {content?.edit_profile_ctas?.map((v, index) => {
+                    return (
+                      <Button
+                        key={`edit_profile_ctas.${index}.edit_profile_cta`}
+                        elementKey={`edit_profile_ctas.${index}.edit_profile_cta`}
+                      />
+                    );
+                  })}
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        </Container>
+      </Section>
+    </ForumProvider>
+  );
+};
+
+export default Community1;