Skip to content

Commit

Permalink
fix: random ordering and feedback vids
Browse files Browse the repository at this point in the history
  • Loading branch information
@marvinmarnold
marvinmarnold committed Dec 7, 2023
1 parent 22bfe58 commit fb7c85d
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 70 deletions.
97 changes: 52 additions & 45 deletions packages/web/app/feedback/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,26 @@

// Import necessary modules and components
import ThreeCardLayout from "../../components/ThreeCardLayout";
import { supabase } from "../../lib/supabase/supabaseClient";
// import NextButton from '@/components/NextButton';
import { ICard } from "@/lib/api";
import { TABLES } from "@/lib/supabase/db";
import { supabase } from "@/lib/supabase/supabaseClient";
import { useEffect, useState } from "react";

export const dynamic = "force-dynamic";

export default function UserFeedback() {
// const [currentIndex, setCurrentIndex] = useState<number>(randint(0,177));
const [userName, setUserName] = useState("");
const [currentIndex, setCurrentIndex] = useState<number>(0);
const [answered, setAnswered] = useState<Set<number>>(new Set());
const [fullData, setFullData] = useState<Array<Array<ICard>> | null>(null);
const [cards, setCards] = useState<ICard[]>([]);

const [cardArray, setCardArray] = useState<Array<Array<ICard>> | null>(null);

// Not the best way to do it-- we really should make each of these a new page and the next/prev buttons
// should be linked to the next/prev page. But this is a quick fix for now.
const question_idArray = Array.from({ length: 291 }, (_, index) => index);
// const question_idArray = Array.from({ length: 291 }, (_, index) => index);

// const handlePrevClick = () => {
// if (fullData) {
Expand All @@ -35,25 +35,30 @@ export default function UserFeedback() {
// }
// };

const randQuestionId = () => {
return Math.floor(Math.random() * 291);
};

const shuffleArray = (array: Number[]) => {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
};

const shuffledQuestionIds = shuffleArray(question_idArray);

// const shuffledQuestionIds = shuffleArray(question_idArray);
const [currentIndex, setCurrentIndex] = useState<number>(0);
// console.log(`index ${currentIndex}, val ${shuffledQuestionIds[0]}`);
const handleNextClick = () => {
if (fullData) {
setCardArray(fullData);
//wraps around
setCurrentIndex((currentIndex + 1) % question_idArray.length);
setAnswered(new Set());
} else {
alert("Please wait for the rest of the cards to finish loading...");
}
// if (fullData) {
setCardArray(fullData);
//wraps around
setCurrentIndex(currentIndex + 1);
setAnswered(new Set());
// } else {
// alert("Please wait for the rest of the cards to finish loading...");
// }
};

//const handleNameChange = (e) => {
Expand All @@ -63,53 +68,55 @@ export default function UserFeedback() {

useEffect(() => {
const getCard = async () => {
const randId = randQuestionId();
console.log("Fetching cards " + randId);
try {
const cardsArray: Array<Array<ICard>> = [];
const { data: cards, error } = await supabase
const { data: newCards, error } = await supabase
.from(TABLES.FEEDBACK_CARDS)
.select("*")
.eq("question_id", shuffledQuestionIds[0]);
if (cards) {
cardsArray.push(cards);
.eq("question_id", randId);
if (newCards) {
setCards(newCards);
}
setCardArray(cardsArray);
console.log(cards);
} catch (error) {
console.error("Error fetching cards: ", error);
// Handle the error appropriately in your UI
}
getCards();
// getCards();
};
getCard();
}, []); // Run this effect only once when the component mounts
}, [currentIndex]); // Run this effect only once when the component mounts

const getCards = async () => {
const cardsArray: Array<Array<ICard>> = [];
try {
for (let i = 1; i < question_idArray.length; i++) {
const { data: cards, error } = await supabase
.from(TABLES.FEEDBACK_CARDS)
.select("*")
.eq("question_id", shuffledQuestionIds[i]);
// const getCards = async () => {
// const cardsArray: Array<Array<ICard>> = [];
// try {
// for (let i = 1; i < question_idArray.length; i++) {
// const { data: cards, error } = await supabase
// .from(TABLES.FEEDBACK_CARDS)
// .select("*")
// .eq("question_id", shuffledQuestionIds[i]);

if (error) {
console.error("Error fetching cards: ", error);
// Handle the error appropriately in your UI
}
console.log(cards);
// if (error) {
// console.error("Error fetching cards: ", error);
// // Handle the error appropriately in your UI
// }
// // console.log(cards);

if (cards) {
cardsArray.push(cards);
}
}
setFullData(cardsArray);
// console.log(fullData);
//setCurrentIndex(Math.floor(Math.random() * cardsArray.length));
} catch (error) {
console.error("Error fetching cards: ", error);
// Handle the error appropriately in your UI
}
};
// if (cards) {
// cardsArray.push(cards);
// }
// }
// setFullData(cardsArray);
// // console.log(fullData);
// //setCurrentIndex(Math.floor(Math.random() * cardsArray.length));
// } catch (error) {
// console.error("Error fetching cards: ", error);
// // Handle the error appropriately in your UI
// }
// };

if (!cardArray) {
return <div>Loading...</div>;
Expand All @@ -134,7 +141,7 @@ export default function UserFeedback() {
</div>
</div>
<ThreeCardLayout
cards={cardArray[currentIndex]}
cards={cards}
userName={userName}
answered={answered}
setAnswered={setAnswered}
Expand Down
13 changes: 11 additions & 2 deletions packages/web/components/Citation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import "./Citation.css";
interface CitationProps {
citation: any;
index: number;
fullscreen?: boolean;
}

const citationKeyMap: { [key: string]: string } = {
Expand All @@ -18,7 +19,11 @@ const citationKeyMap: { [key: string]: string } = {
source_url: "Source URL",
};

const Citation = ({ citation: originalCitation, index }: CitationProps) => {
const Citation = ({
citation: originalCitation,
index,
fullscreen = false,
}: CitationProps) => {
const hasMetadata = Object.values(originalCitation).some(
(value) => value !== null && value !== ""
);
Expand All @@ -35,7 +40,11 @@ const Citation = ({ citation: originalCitation, index }: CitationProps) => {

const isYoutube = isYouTubeURL(source_url) && getYouTubeThumbnail(source_url);
return (
<div className="mb-6 w-full space-y-1 rounded-2xl p-2 text-primary lg:w-1/2">
<div
className={`mb-6 w-full space-y-1 rounded-2xl p-2 text-primary ${
fullscreen ? "" : "lg:w-1/2"
}`}
>
<div>
<p className="font-bold lg:text-lg">
#{index + 1}: {title}
Expand Down
65 changes: 42 additions & 23 deletions packages/web/components/ThreeCardLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ import {
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";
import CommentBox from "./CommentBoxes";
import Citation from "./Citation";
import CommentBox from "./CommentBoxes";

const criteria = [
{ id: "Accuracy", description: "Accuracy" },
Expand Down Expand Up @@ -195,29 +195,48 @@ export default function ThreeCardLayout({
{element.response}
</p>
))}
{card.citations && card.citations.length > 0 && (
<div className="dropdown-container">
<div
className="dropdown-header"
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
>
Citations
<FontAwesomeIcon
className={`ml-2 h-[16px] w-[16px] transition-transform transform ${
isDropdownOpen ? 'rotate-180' : ''
}`}
icon={faChevronDown}
/>
</div>
{isDropdownOpen && (
<div className="dropdown-content">
{card.citations.map((citation, index) => (
<Citation citation={citation} index={index} key={index} />
))}
</div>
)}
{card.citations && card.citations.length > 0 && (
<div className="dropdown-container">
<div
className="dropdown-header"
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
>
Citations
<FontAwesomeIcon
className={`ml-2 h-[16px] w-[16px] transform transition-transform ${
isDropdownOpen ? "rotate-180" : ""
}`}
icon={faChevronDown}
/>
</div>
)}
{isDropdownOpen && (
<div className="dropdown-content">
{card.citations.map((citation, index) => {
const {
URL: source_url,
Name: source_name,
Title: source_title,
Published: source_publish_date,
} = citation as any;
const adaptedCitation = {
source_name,
source_publish_date,
source_title,
source_url,
};
return (
<Citation
citation={adaptedCitation}
index={index}
key={index}
fullscreen={true}
/>
);
})}
</div>
)}
</div>
)}
</div>
</div>

Expand Down

0 comments on commit fb7c85d

Please sign in to comment.