From fe922072d81b79ef9b609a4f4c8e5d04892bc62b Mon Sep 17 00:00:00 2001 From: Ayyub Ibrahim Date: Fri, 3 May 2024 01:22:31 -0500 Subject: [PATCH] adjusted preview of response --- .../components/HomeResults/QueryResult.tsx | 162 +++++++----------- 1 file changed, 64 insertions(+), 98 deletions(-) diff --git a/packages/web/components/HomeResults/QueryResult.tsx b/packages/web/components/HomeResults/QueryResult.tsx index e1279e8..99078de 100644 --- a/packages/web/components/HomeResults/QueryResult.tsx +++ b/packages/web/components/HomeResults/QueryResult.tsx @@ -1,15 +1,13 @@ -"use client"; - -import { ICard } from "@/lib/api"; -import { CARD_SHOW_PATH } from "@/lib/paths"; +import { useEffect, useState } from "react"; import { supabase } from "@/lib/supabase/supabaseClient"; -import { getThumbnail, getYouTubeEmbedUrl, isYouTubeURL } from "@/lib/utils"; -import { faSpinner } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import moment from "moment"; import Link from "next/link"; -import { useEffect, useState } from "react"; +import moment from "moment"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faSpinner } from "@fortawesome/free-solid-svg-icons"; +import { getThumbnail, getYouTubeEmbedUrl, isYouTubeURL } from "@/lib/utils"; import CardActions from "../Card/CardActions"; +import { ICard } from "@/lib/api"; +import { CARD_SHOW_PATH } from "@/lib/paths"; import styles from "./homeresults.module.scss"; const MAX_CHARACTERS_PREVIEW = 20000; @@ -42,116 +40,84 @@ const WAIT_MS = 2500; export default function QueryResult({ card }: { card: ICard }) { const { created_at: createdAt, citations } = card; - const [msgIndex, setMsgIndex] = useState(0); + const [msgIndex, setMsgIndex] = useState(0); const initialLoadingState = !card.responses || card.responses.length === 0; - const [isLoading, setIsLoading] = useState(initialLoadingState); - - const [responses, setResponses] = useState<{ response: string }[]>([]); + const [isLoading, setIsLoading] = useState(initialLoadingState); + const [responses, setResponses] = useState(card.responses || []); - const [prettyCreatedAt, setPrettyCreatedAt] = useState( - !!createdAt && new Date(createdAt) < new Date() - ? moment(createdAt).fromNow() - : moment().fromNow() - ); + const prettyCreatedAt = !!createdAt && new Date(createdAt) < new Date() + ? moment(createdAt).fromNow() + : moment().fromNow(); const thumbnail = getThumbnail(citations || []); useEffect(() => { - let intervalId: NodeJS.Timeout | null = null; + let intervalId = null; if (isLoading) { intervalId = setInterval(() => { - setMsgIndex((prevIndex) => (prevIndex + 1) % LOADING_MESSAGES.length); + setMsgIndex(prevIndex => (prevIndex + 1) % LOADING_MESSAGES.length); }, WAIT_MS); } - const channel = (supabase.channel(`cards:id=eq.${card.id}`) as any) - .on( - "postgres_changes", - { event: "UPDATE", schema: "public" }, - (payload: { - new: { id: string; responses: { response: string }[] }; - }) => { - console.log("Payload received:", payload); - if (payload.new.id === card.id) { - const newResponses = payload.new.responses || []; - console.log("New Responses:", newResponses); - + const channel = supabase.channel(`cards:id=eq.${card.id}`) + .on("postgres_changes", { event: "UPDATE", schema: "public" }, (payload) => { + if (payload.new.id === card.id && payload.new.responses) { + const newResponses = payload.new.responses; + if (JSON.stringify(newResponses) !== JSON.stringify(responses)) { setResponses(newResponses); - - if (newResponses.length > 0) { - setIsLoading(false); - if (intervalId) { - clearInterval(intervalId); - } - } + setIsLoading(false); } } - ) + }) .subscribe(); return () => { + if (intervalId) clearInterval(intervalId); channel.unsubscribe(); - if (intervalId) { - clearInterval(intervalId); - } }; - }, [card.id, isLoading]); - - const CardBody = () => { - const combinedResponses = responses - .map((responseObj) => responseObj.response) - .join(" "); - const previewText = combinedResponses.split(" ").slice(0, 100).join(" "); - - return ( - -
-

{card.title}

-
- - {card.is_mine ? "You | " : null} - - {prettyCreatedAt} -
- - {!isLoading ? ( - <> - {/* Response Preview */} -
-

{previewText}...

-
- - {/* YouTube Preview */} - {isYouTubeURL(thumbnail?.source_url) && ( - - )} - - ) : ( -

- - {LOADING_MESSAGES[msgIndex]} -

- )} -
- - ); - }; + }, [card.id, isLoading, responses]); + + const combinedResponses = responses.map(r => r.response).join(" "); + const previewText = combinedResponses.split(" ").slice(0, 100).join(" ") + "..."; + + const CardBody = () => ( + +
+

{card.title}

+
+ {card.is_mine ? "You | " : ""} + {prettyCreatedAt} +
+ {!isLoading ? ( + <> +
+

{previewText}

+
+ {isYouTubeURL(thumbnail?.source_url) && ( + + )} + + ) : ( +

+ + {LOADING_MESSAGES[msgIndex]} +

+ )} +
+ + ); return ( -
-
+
+