Skip to content

Commit

Permalink
Merge pull request #180 from eye-on-surveillance/ma/focus-group-2
Browse files Browse the repository at this point in the history 
feat: final changes before prod
  • Loading branch information
@marvinmarnold
marvinmarnold authored Dec 7, 2023
2 parents 61757bc + fb7c85d commit ccf57b2
Show file tree
Hide file tree
Showing 5 changed files with 210 additions and 59 deletions.
103 changes: 60 additions & 43 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: 98 }, (_, index) => index);
// const question_idArray = Array.from({ length: 291 }, (_, index) => index);

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

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...");
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 [currentIndex, setCurrentIndex] = useState<number>(0);
// console.log(`index ${currentIndex}, val ${shuffledQuestionIds[0]}`);
const handleNextClick = () => {
// 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 @@ -53,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", 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", 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 @@ -124,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
2 changes: 1 addition & 1 deletion packages/web/components/CommentBoxes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export default function CommentBox({
onClick={handleSubmit}
className="bg-blue-500 w-full rounded bg-secondary px-4 py-2 text-lg text-white"
>
Submit
Submit #{index + 1}
</button>
</div>
</div>
Expand Down
61 changes: 61 additions & 0 deletions packages/web/components/ThreeCardLayout.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/* ThreeCardLayout.css */
.dropdown-container {
position: relative;
}

.dropdown-header {
cursor: pointer;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}

.dropdown-content {
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 4px 4px;
padding: 8px;
z-index: 1;
overflow: scroll;
}

/* Rotate chevron down icon when dropdown is open */
.rotate-180 {
transform: rotate(180deg);
}


.dropdown-content {
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 4px 4px;
padding: 8px;
z-index: 1;
width: 100%;
}



/* Adjust styles for screens smaller than 600px */
@media (max-width: 600px) {
.dropdown-header {
font-size: 14px;
}

.dropdown-content {
padding: 10px;
}
}


Loading

0 comments on commit ccf57b2

Please sign in to comment.