From 813fdd6da50c01dcbb598e7719e708d0d50ddb3c Mon Sep 17 00:00:00 2001 From: Wang Haoyang Date: Wed, 25 Sep 2024 10:04:27 +0800 Subject: [PATCH 1/9] Fix next.js warning -Use index parameter of list.map() as the key prop for a list element instead of using the category for the NewsArticle component --- frontend/components/news/news-article.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/components/news/news-article.tsx b/frontend/components/news/news-article.tsx index 64d6faef..98da2a9c 100644 --- a/frontend/components/news/news-article.tsx +++ b/frontend/components/news/news-article.tsx @@ -51,10 +51,10 @@ const NewsArticle = (props: { newsEvent: MiniEventDTO }) => {

{newsEvent.title}

{newsEvent.description}

- {categories?.map((category: Category) => ( + {categories?.map((category: Category, index: number) => ( From 0eb0f5bfd59969a50ec9146cd2b205446fb07e9e Mon Sep 17 00:00:00 2001 From: Wang Haoyang Date: Wed, 25 Sep 2024 10:21:51 +0800 Subject: [PATCH 2/9] Fail-safe category chips on home page -Add an 'Others' Category -In case an unknown category name is fetched from backend or data fetch failed, display the 'Others' Category chip to fail 'gracefully' --- frontend/components/news/news-article.tsx | 15 ++++++++++----- frontend/types/categories.ts | 9 ++++++++- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/frontend/components/news/news-article.tsx b/frontend/components/news/news-article.tsx index 98da2a9c..833d07d4 100644 --- a/frontend/components/news/news-article.tsx +++ b/frontend/components/news/news-article.tsx @@ -19,11 +19,16 @@ const NewsArticle = (props: { newsEvent: MiniEventDTO }) => { "https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"; useEffect(() => { - setCategories( - newsEvent.categories.map((category: CategoryDTO) => - getCategoryFor(category.name), - ), - ); + try { + setCategories( + newsEvent.categories.map((category: CategoryDTO) => + getCategoryFor(category.name), + ), + ); + } catch (error) { + console.log(error); + setCategories([Category.Others]); + } }, [newsEvent]); const parseDate = (dateString: string) => { diff --git a/frontend/types/categories.ts b/frontend/types/categories.ts index b22ef238..29d63d05 100644 --- a/frontend/types/categories.ts +++ b/frontend/types/categories.ts @@ -1,5 +1,6 @@ import { Building2, + CircleHelp, DollarSign, Film, HeartHandshake, @@ -23,6 +24,7 @@ export enum Category { GenderEquality = "Gender & equality", Religion = "Religion", SocietyCulture = "Society & culture", + Others = "Others", } export const getCategoryFor = (categoryName: string) => { @@ -39,7 +41,10 @@ export const getCategoryFor = (categoryName: string) => { "society & culture": Category.SocietyCulture, }; const formattedName = categoryName.toLowerCase(); - return mappings[formattedName]; + if (formattedName in mappings) { + return mappings[formattedName]; + } + return Category.Others; }; export const categoriesToDisplayName: Record = { @@ -53,6 +58,7 @@ export const categoriesToDisplayName: Record = { [Category.GenderEquality]: "Gender & equality", [Category.Religion]: "Religion", [Category.SocietyCulture]: "Society & culture", + [Category.Others]: "Others", }; export const categoriesToIconsMap: Record = { @@ -66,4 +72,5 @@ export const categoriesToIconsMap: Record = { [Category.GenderEquality]: Scale, [Category.Religion]: HeartHandshake, [Category.SocietyCulture]: UsersRound, + [Category.Others]: CircleHelp, }; From eefc1493ba59e9bb4fdb797fc98ceda2498f8d92 Mon Sep 17 00:00:00 2001 From: Wang Haoyang Date: Wed, 25 Sep 2024 11:45:11 +0800 Subject: [PATCH 3/9] Add new frontend component -ArticleLoading component is a pulsing card that can be displayed while events are still being loaded from backend on home page --- frontend/components/news/article-loading.tsx | 27 ++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 frontend/components/news/article-loading.tsx diff --git a/frontend/components/news/article-loading.tsx b/frontend/components/news/article-loading.tsx new file mode 100644 index 00000000..32f6322c --- /dev/null +++ b/frontend/components/news/article-loading.tsx @@ -0,0 +1,27 @@ + +const ArticleLoading = () => { + return ( +
+
+
+ {/* Article source placeholder */} +
+ {/* Article date placeholder */} +
+
+ {/* Event title placeholder */} +
+ {/* Event description placeholder */} +
+ {/* Event category placeholder */} +
+
+
+
+ {/* Event image placeholder */} +
+
+ ); +}; + +export default ArticleLoading; \ No newline at end of file From 74e07b5d1154aad8e5c06d7d71024519785f02b1 Mon Sep 17 00:00:00 2001 From: Wang Haoyang Date: Wed, 25 Sep 2024 11:46:16 +0800 Subject: [PATCH 4/9] Add pretty loading animation for top events on home page Remove the ugly 'Loading data...' text and replace it with the new pulsing ArticleLoading cards while top events are still being loaded from backend --- frontend/app/home.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/app/home.tsx b/frontend/app/home.tsx index ccc2de1e..b05a73d7 100644 --- a/frontend/app/home.tsx +++ b/frontend/app/home.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from "react"; import { getEventsEventsGet, MiniEventDTO } from "@/client"; import NewsArticle from "@/components/news/news-article"; +import ArticleLoading from "@/components/news/article-loading"; const NUM_TOP_EVENTS = 10; const DAYS_PER_WEEK = 7; @@ -51,7 +52,11 @@ const Home = () => {
{!isLoaded ? ( -

Loading data...

+ <> + + + + ) : ( topEvents.map((newsEvent: MiniEventDTO, index: number) => ( From e2833cd1b8a4e1538d8fb1454bdd89de88c5a203 Mon Sep 17 00:00:00 2001 From: Wang Haoyang Date: Wed, 25 Sep 2024 12:54:00 +0800 Subject: [PATCH 5/9] Add PlaceholderImage component -Basically our logo but with dulled colours and flexible height/width --- .../components/icons/placeholder-image.tsx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 frontend/components/icons/placeholder-image.tsx diff --git a/frontend/components/icons/placeholder-image.tsx b/frontend/components/icons/placeholder-image.tsx new file mode 100644 index 00000000..fa312dce --- /dev/null +++ b/frontend/components/icons/placeholder-image.tsx @@ -0,0 +1,28 @@ +const PlaceholderImage = ({ classname }: { classname?: string }) => { + return ( +
+
+ + + + +
+
+ ); + }; + + export default PlaceholderImage; + \ No newline at end of file From 430ec2c2c4fc360acb639c2088d31e222fb52a8a Mon Sep 17 00:00:00 2001 From: Wang Haoyang Date: Wed, 25 Sep 2024 12:54:50 +0800 Subject: [PATCH 6/9] Use new PlaceholderImage on home page -Rather than display a generic placeholder image, use the new PlaceholderImage component to display our logo whenever an event from the backend has no image URL --- frontend/components/news/news-article.tsx | 32 ++++++++++++++--------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/frontend/components/news/news-article.tsx b/frontend/components/news/news-article.tsx index 833d07d4..620f8715 100644 --- a/frontend/components/news/news-article.tsx +++ b/frontend/components/news/news-article.tsx @@ -10,13 +10,13 @@ import { Category, getCategoryFor, } from "@/types/categories"; +import PlaceholderImage from "../icons/placeholder-image"; const NewsArticle = (props: { newsEvent: MiniEventDTO }) => { const newsEvent = props.newsEvent; const newsArticle = newsEvent.original_article; const [categories, setCategories] = useState([]); - const PLACEHOLDER_IMG_URL = - "https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg"; + const IMG_HEIGHT = 154; useEffect(() => { try { @@ -67,17 +67,23 @@ const NewsArticle = (props: { newsEvent: MiniEventDTO }) => {
- + { newsArticle.image_url ? ( + + ) : ( +
+ +
+ )}
); From 1d364872329b284e1b3d199220a3580daa82d7d8 Mon Sep 17 00:00:00 2001 From: Wang Haoyang Date: Wed, 25 Sep 2024 15:02:46 +0800 Subject: [PATCH 7/9] Filter top events further -Top events now filters by the categories that the user has chosen, not just by article date and event count --- frontend/app/home.tsx | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/frontend/app/home.tsx b/frontend/app/home.tsx index b05a73d7..8c109661 100644 --- a/frontend/app/home.tsx +++ b/frontend/app/home.tsx @@ -3,6 +3,7 @@ import { useEffect, useState } from "react"; import { getEventsEventsGet, MiniEventDTO } from "@/client"; import NewsArticle from "@/components/news/news-article"; import ArticleLoading from "@/components/news/article-loading"; +import { useUserStore } from "@/store/user/user-store-provider"; const NUM_TOP_EVENTS = 10; const DAYS_PER_WEEK = 7; @@ -11,6 +12,7 @@ const DAYS_PER_WEEK = 7; const Home = () => { const [topEvents, setTopEvents] = useState([]); const [isLoaded, setIsLoaded] = useState(false); + const user = useUserStore((state) => state.user); useEffect(() => { const fetchTopEvents = async () => { @@ -21,12 +23,24 @@ const Home = () => { .toISOString() .split("T")[0]; - const response = await getEventsEventsGet({ - query: { - start_date: formattedEventStartDate, - limit: NUM_TOP_EVENTS, - }, - }); + let eventQuery; + if (user?.categories && user.categories.length > 0) { + eventQuery = { + query: { + start_date: formattedEventStartDate, + limit: NUM_TOP_EVENTS, + category_ids: user.categories.map((category) => category.id), + }, + }; + } else { + eventQuery = { + query: { + start_date: formattedEventStartDate, + limit: NUM_TOP_EVENTS, + }, + }; + } + const response = await getEventsEventsGet(eventQuery); if (response.error) { console.log(response.error); @@ -37,7 +51,7 @@ const Home = () => { }; fetchTopEvents(); - }, []); + }, [user]); return (
From 2abcf224e27014abd3e7c821e9474ac2c3bbbb32 Mon Sep 17 00:00:00 2001 From: Wang Haoyang Date: Wed, 25 Sep 2024 15:04:56 +0800 Subject: [PATCH 8/9] Fix eslint code style errors --- frontend/app/home.tsx | 2 +- .../components/icons/placeholder-image.tsx | 51 +++++++++---------- frontend/components/news/article-loading.tsx | 45 ++++++++-------- frontend/components/news/news-article.tsx | 6 +-- 4 files changed, 51 insertions(+), 53 deletions(-) diff --git a/frontend/app/home.tsx b/frontend/app/home.tsx index 8c109661..e11f4132 100644 --- a/frontend/app/home.tsx +++ b/frontend/app/home.tsx @@ -1,8 +1,8 @@ import { useEffect, useState } from "react"; import { getEventsEventsGet, MiniEventDTO } from "@/client"; -import NewsArticle from "@/components/news/news-article"; import ArticleLoading from "@/components/news/article-loading"; +import NewsArticle from "@/components/news/news-article"; import { useUserStore } from "@/store/user/user-store-provider"; const NUM_TOP_EVENTS = 10; diff --git a/frontend/components/icons/placeholder-image.tsx b/frontend/components/icons/placeholder-image.tsx index fa312dce..8399683a 100644 --- a/frontend/components/icons/placeholder-image.tsx +++ b/frontend/components/icons/placeholder-image.tsx @@ -1,28 +1,27 @@ const PlaceholderImage = ({ classname }: { classname?: string }) => { - return ( -
-
- - - - -
+ return ( +
+
+ + + +
- ); - }; - - export default PlaceholderImage; - \ No newline at end of file +
+ ); +}; + +export default PlaceholderImage; diff --git a/frontend/components/news/article-loading.tsx b/frontend/components/news/article-loading.tsx index 32f6322c..fc635d0a 100644 --- a/frontend/components/news/article-loading.tsx +++ b/frontend/components/news/article-loading.tsx @@ -1,27 +1,26 @@ - const ArticleLoading = () => { - return ( -
-
-
- {/* Article source placeholder */} -
- {/* Article date placeholder */} -
-
- {/* Event title placeholder */} -
- {/* Event description placeholder */} -
- {/* Event category placeholder */} -
-
-
-
- {/* Event image placeholder */} -
+ return ( +
+
+
+ {/* Article source placeholder */} +
+ {/* Article date placeholder */} +
+
+ {/* Event title placeholder */} +
+ {/* Event description placeholder */} +
+ {/* Event category placeholder */} +
+
- ); +
+ {/* Event image placeholder */} +
+
+ ); }; -export default ArticleLoading; \ No newline at end of file +export default ArticleLoading; diff --git a/frontend/components/news/news-article.tsx b/frontend/components/news/news-article.tsx index 620f8715..dabfdad2 100644 --- a/frontend/components/news/news-article.tsx +++ b/frontend/components/news/news-article.tsx @@ -4,13 +4,13 @@ import { ArrowUpRightIcon } from "lucide-react"; import { CategoryDTO, MiniEventDTO } from "@/client"; import Chip from "@/components/display/chip"; +import PlaceholderImage from "@/components/icons/placeholder-image"; import { categoriesToDisplayName, categoriesToIconsMap, Category, getCategoryFor, } from "@/types/categories"; -import PlaceholderImage from "../icons/placeholder-image"; const NewsArticle = (props: { newsEvent: MiniEventDTO }) => { const newsEvent = props.newsEvent; @@ -67,7 +67,7 @@ const NewsArticle = (props: { newsEvent: MiniEventDTO }) => {
- { newsArticle.image_url ? ( + {newsArticle.image_url ? ( { width={273} /> ) : ( -
+
)} From ca45d6fb39d02a2a53b05973a2c879a5352562e0 Mon Sep 17 00:00:00 2001 From: Wang Haoyang Date: Wed, 25 Sep 2024 15:06:28 +0800 Subject: [PATCH 9/9] Fix unused import in backend --- backend/src/embeddings/vector_store.py | 1 - 1 file changed, 1 deletion(-) diff --git a/backend/src/embeddings/vector_store.py b/backend/src/embeddings/vector_store.py index 29a2776c..50e510df 100644 --- a/backend/src/embeddings/vector_store.py +++ b/backend/src/embeddings/vector_store.py @@ -1,4 +1,3 @@ -from uuid import uuid4 from langchain_openai import OpenAIEmbeddings from langchain_pinecone import PineconeVectorStore