Skip to content

Commit

Permalink
adjusted preview of response
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayyubibrahimi
ayyubibrahimi committed May 3, 2024
1 parent ffefbfb commit fe92207
Showing 1 changed file with 64 additions and 98 deletions.
162 changes: 64 additions & 98 deletions packages/web/components/HomeResults/QueryResult.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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<number>(0);
const [msgIndex, setMsgIndex] = useState(0);
const initialLoadingState = !card.responses || card.responses.length === 0;
const [isLoading, setIsLoading] = useState<boolean>(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 (
<Link href={`${CARD_SHOW_PATH}/${card.id}`}>
<div>
<h4 className="text-xl font-bold">{card.title}</h4>
<h6 className="text-xs">
<span className="text-purple">
{card.is_mine ? "You | " : null}
</span>
<span className="text-black">{prettyCreatedAt}</span>
</h6>

{!isLoading ? (
<>
{/* Response Preview */}
<div className="my-5 overflow-hidden" style={{ height: "4.5em" }}>
<p>{previewText}...</p>
</div>

{/* YouTube Preview */}
{isYouTubeURL(thumbnail?.source_url) && (
<iframe
id="ytplayer"
src={getYouTubeEmbedUrl(thumbnail?.source_url, thumbnail?.source_timestamp)}
frameBorder="0"
className="h-64 w-full lg:h-96"
></iframe>
)}
</>
) : (
<p className="my-5">
<FontAwesomeIcon
icon={faSpinner}
className="mx-2 h-5 w-5 animate-spin align-middle duration-300"
/>
{LOADING_MESSAGES[msgIndex]}
</p>
)}
</div>
</Link>
);
};
}, [card.id, isLoading, responses]);

const combinedResponses = responses.map(r => r.response).join(" ");
const previewText = combinedResponses.split(" ").slice(0, 100).join(" ") + "...";

const CardBody = () => (
<Link href={`${CARD_SHOW_PATH}/${card.id}`}>
<div>
<h4 className="text-xl font-bold">{card.title}</h4>
<h6 className="text-xs">
<span className="text-purple">{card.is_mine ? "You | " : ""}</span>
<span className="text-black">{prettyCreatedAt}</span>
</h6>
{!isLoading ? (
<>
<div className="my-5 overflow-hidden" style={{ height: "4.5em" }}>
<p>{previewText}</p>
</div>
{isYouTubeURL(thumbnail?.source_url) && (
<iframe
id="ytplayer"
src={getYouTubeEmbedUrl(thumbnail?.source_url, thumbnail?.source_timestamp)}
frameBorder="0"
className="h-64 w-full lg:h-96"
></iframe>
)}
</>
) : (
<p className="my-5">
<FontAwesomeIcon
icon={faSpinner}
className="mx-2 h-5 w-5 animate-spin align-middle duration-300"
/>
{LOADING_MESSAGES[msgIndex]}
</p>
)}
</div>
</Link>
);

return (
<div id={isLoading ? "loading" : "loaded"} className={styles["card"]}>
<div
className={`my-6 space-y-4 rounded-lg bg-blue p-6 text-primary ${
isLoading ? "border-4 border-dashed border-yellow-500" : ""
}`}
>
<div id={isLoading ? "loading" : "loaded"} className={styles.card}>
<div className={`my-6 space-y-4 rounded-lg bg-blue p-6 text-primary ${isLoading ? "border-4 border-dashed border-yellow-500" : ""}`}>
<CardBody />
<CardActions card={card} />
</div>
Expand Down

0 comments on commit fe92207

Please sign in to comment.