From 1b4e02d99e3faf0940da770d821bd68ab727d4d3 Mon Sep 17 00:00:00 2001 From: ShamaKamina Date: Fri, 27 Sep 2024 17:58:14 +0200 Subject: [PATCH 01/10] made the subscription dropdown adhere to the theme --- frontend/components/Issue/Issue.tsx | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/frontend/components/Issue/Issue.tsx b/frontend/components/Issue/Issue.tsx index ff17c737..08535cd5 100644 --- a/frontend/components/Issue/Issue.tsx +++ b/frontend/components/Issue/Issue.tsx @@ -1,4 +1,5 @@ import React, { useState, useRef, useEffect } from "react"; +import { useTheme } from 'next-themes'; import { Card, CardContent, @@ -38,6 +39,7 @@ const Issue: React.FC = ({ }) => { const { user } = useUser(); const router = useRouter(); + const { theme } = useTheme(); const [type, setType] = useState(""); const queryClient = useQueryClient(); const [showSubscribeDropdown, setShowSubscribeDropdown] = useState(false); @@ -285,6 +287,10 @@ const Issue: React.FC = ({ return text.replace(/@(\w+)/g, '@$1'); }; + const dropdownClasses = `origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg ring-1 ring-opacity-5 focus:outline-none ${ + theme === "dark" ? "bg-[#262626] text-white ring-gray-700" : "bg-white text-gray-700 ring-black" + }`; + return ( <> @@ -341,7 +347,7 @@ const Issue: React.FC = ({ {showSubscribeDropdown && (
= ({
- + {menuItems.map((item, index) => ( {item === "Delete" && isOwner ? ( - Delete + + Delete + ) : item === "Resolve Issue" ? ( - handleAction("Resolve Issue")}> + handleAction("Resolve Issue")} + className={theme === "dark" ? "hover:bg-gray-600 hover:text-white" : "hover:bg-gray-100 hover:text-gray-900"} + > Resolve Issue ) : item === "Subscribe" ? ( - Subscribe + + Subscribe + handleSubscribeOptionClick("Issue")} + className={theme === "dark" ? "hover:bg-gray-600 hover:text-white" : "hover:bg-gray-100 hover:text-gray-900"} > Issue handleSubscribeOptionClick("Category")} + className={theme === "dark" ? "hover:bg-gray-600 hover:text-white" : "hover:bg-gray-100 hover:text-gray-900"} > Category handleSubscribeOptionClick("Location")} + className={theme === "dark" ? "hover:bg-gray-600 hover:text-white" : "hover:bg-gray-100 hover:text-gray-900"} > Location ) : ( - handleAction(item)}> + handleAction(item)} + className={theme === "dark" ? "hover:bg-gray-600 hover:text-white" : "hover:bg-gray-100 hover:text-gray-900"} + > {item} )} @@ -98,8 +116,7 @@ const MoreMenu: React.FC = ({ Confirm Deletion - Are you sure you want to delete this issue? This action cannot be - undone. + Are you sure you want to delete this issue? This action cannot be undone. From 82455200dc0f2eed7bbeb1828cf0a49ac24a06c3 Mon Sep 17 00:00:00 2001 From: ShamaKamina Date: Fri, 27 Sep 2024 18:52:03 +0200 Subject: [PATCH 03/10] fixed some code --- frontend/components/Issue/Issue.tsx | 2 +- .../components/Leaderboard/Leaderboard.tsx | 346 +++++++----------- frontend/components/MoreMenu/MoreMenu.tsx | 35 +- .../ResolutionModal/ResolutionModal.tsx | 44 ++- 4 files changed, 169 insertions(+), 258 deletions(-) diff --git a/frontend/components/Issue/Issue.tsx b/frontend/components/Issue/Issue.tsx index af81c5f3..605b3154 100644 --- a/frontend/components/Issue/Issue.tsx +++ b/frontend/components/Issue/Issue.tsx @@ -391,7 +391,7 @@ const Issue: React.FC = ({ isOwner={isOwner} onAction={handleMenuAction} onSubscribe={handleSubscribe} - theme={"dark" || "light"} + /> )} {isLoading && } diff --git a/frontend/components/Leaderboard/Leaderboard.tsx b/frontend/components/Leaderboard/Leaderboard.tsx index e67639cf..235aa91e 100644 --- a/frontend/components/Leaderboard/Leaderboard.tsx +++ b/frontend/components/Leaderboard/Leaderboard.tsx @@ -1,226 +1,146 @@ -"use client"; - -import React, { useState, useEffect, useRef } from 'react'; -import { SlidersHorizontal, Loader2 } from 'lucide-react'; -import { useTheme } from 'next-themes'; -import fetchLeaderboard from "@/lib/api/fetchLeaderboard"; -import { fetchUserLocation } from "@/lib/api/fetchUserLocation"; -import { useUser } from "@/lib/contexts/UserContext"; -import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"; -import { useRouter } from "next/navigation"; +import React from "react"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, +} from "@/components/ui/dropdown-menu"; +import { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { MoreHorizontal } from "lucide-react"; import { Button } from "@/components/ui/button"; -import ErrorDisplay from '@/components/ui/error_display'; -import { useQuery } from '@tanstack/react-query'; - -type RankingType = 'country' | 'province' |'city' | 'suburb'; - -const LoadingIndicator = () => ( -
- -
-); - -const Leaderboard: React.FC = () => { - const { user } = useUser(); - const [rankingType, setRankingType] = useState('country'); - const [showDropdown, setShowDropdown] = useState(false); - const userRowRef = useRef(null); - const { theme } = useTheme(); - const router = useRouter(); - const { data: locationData } = useQuery({ - queryKey: ["user-location"], - queryFn: async () => { - if (user?.location_id) { - return await fetchUserLocation(user.location_id); - } else { - return null; - } - } - }); - const { data, error, isPending, isFetching } = useQuery({ - queryKey: ["leaderboard", rankingType], - queryFn: async () => { - if (!user) { - throw 'No user data available'; - } - - try { - let filterData = {}; - if (locationData && locationData.value) { - filterData = { - province: locationData.value.province, - city: locationData.value.city, - suburb: locationData.value.suburb, - }; - } - - const data = await fetchLeaderboard(user.user_id, rankingType, filterData); - - return { - leaderboardData: data.leaderboard, - userData: data.user - }; - } catch (error) { - console.error('Error fetching leaderboard data:', error); - throw 'Failed to load leaderboard data'; - } - }, - enabled: locationData !== undefined - }); - const handleUsernameClick = (userId: string) => { - router.push(`/profile/${userId}`); +interface MoreMenuProps { + menuItems: string[]; + isOwner: boolean; + onAction: (action: string) => void; + onSubscribe: (option: string) => void; + theme: "light" | "dark"; +} + +const MoreMenu: React.FC = ({ + menuItems, + isOwner, + onAction, + onSubscribe, + theme, +}) => { + const handleAction = (action: string) => { + onAction(action); }; - useEffect(() => { - if (userRowRef.current) { - userRowRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' }); - } - }, [rankingType]); - - if (isPending || isFetching) { - return ; - } - - if (error) { - return ( - - ); - } - - const { leaderboardData, userData } = data!; - - if (!userData) { - return ( - - ); - } + const handleSubscribeOptionClick = (option: string) => { + onSubscribe(option); + }; - const userHasLocation = !!locationData; + const getMenuItemClassName = () => { + return theme === "dark" + ? "text-white hover:bg-[#262626]" + : "text-black hover:bg-gray-100"; + }; return ( -
-
- - - {userData.fullname.charAt(0)} - -
-

{userData.fullname}

-

Points: {userData.user_score}

-
-
-

Your {rankingType.charAt(0).toUpperCase() + rankingType.slice(1)} Ranking

-

- {userData.ranking !== null ? `${userData.ranking}` : 'N/A'} -

-
-
- -
- + + - Filter - - {showDropdown && ( -
- - {userHasLocation && ( - <> - - - - - )} -
- )} -
- - {!userHasLocation && rankingType !== 'country' && ( -
-

Set your location to see more detailed ranking information.

- -
- )} - -
- - - - - - - {rankingType === 'country' && } - {rankingType === 'country' && } - {rankingType === 'country' && } - {rankingType === 'city' && } - {rankingType === 'suburb' && } - - - - {leaderboardData.map(entry => ( - - - - - {rankingType === 'country' && } - {rankingType === 'country' && } - {rankingType === 'country' && } - {rankingType === 'city' && } - {rankingType === 'suburb' && } - - ))} - -
RankUserPointsProvinceCitySuburbCitySuburb
{entry.rank} handleUsernameClick(entry.userId)} + Resolve Issue + + ) : item === "Subscribe" ? ( + + + Subscribe + + + handleSubscribeOptionClick("Issue")} + className={getMenuItemClassName()} + > + Issue + + handleSubscribeOptionClick("Category")} + className={getMenuItemClassName()} + > + Category + + handleSubscribeOptionClick("Location")} + className={getMenuItemClassName()} + > + Location + + + + ) : ( + handleAction(item)} + className={getMenuItemClassName()} > - {entry.username} - {entry.points}{entry.province || 'N/A'}{entry.city || 'N/A'}{entry.suburb || 'N/A'}{entry.city || 'N/A'}{entry.suburb || 'N/A'}
-
-
+ {item} + + )} + + ))} + + + + + Confirm Deletion + + Are you sure you want to delete this issue? This action cannot be undone. + + + + + + + + + + + + ); }; -export default Leaderboard; \ No newline at end of file +export default MoreMenu; \ No newline at end of file diff --git a/frontend/components/MoreMenu/MoreMenu.tsx b/frontend/components/MoreMenu/MoreMenu.tsx index 09cc866e..b5c95855 100644 --- a/frontend/components/MoreMenu/MoreMenu.tsx +++ b/frontend/components/MoreMenu/MoreMenu.tsx @@ -26,7 +26,6 @@ interface MoreMenuProps { isOwner: boolean; onAction: (action: string) => void; onSubscribe: (option: string) => void; - theme: "light" | "dark"; } const MoreMenu: React.FC = ({ @@ -34,7 +33,6 @@ const MoreMenu: React.FC = ({ isOwner, onAction, onSubscribe, - theme, }) => { const handleAction = (action: string) => { onAction(action); @@ -49,62 +47,46 @@ const MoreMenu: React.FC = ({ - + {menuItems.map((item, index) => ( {item === "Delete" && isOwner ? ( - - Delete - + Delete ) : item === "Resolve Issue" ? ( - handleAction("Resolve Issue")} - className={theme === "dark" ? "hover:bg-gray-600 hover:text-white" : "hover:bg-gray-100 hover:text-gray-900"} - > + handleAction("Resolve Issue")}> Resolve Issue ) : item === "Subscribe" ? ( - - Subscribe - + Subscribe handleSubscribeOptionClick("Issue")} - className={theme === "dark" ? "hover:bg-gray-600 hover:text-white" : "hover:bg-gray-100 hover:text-gray-900"} > Issue handleSubscribeOptionClick("Category")} - className={theme === "dark" ? "hover:bg-gray-600 hover:text-white" : "hover:bg-gray-100 hover:text-gray-900"} > Category handleSubscribeOptionClick("Location")} - className={theme === "dark" ? "hover:bg-gray-600 hover:text-white" : "hover:bg-gray-100 hover:text-gray-900"} > Location ) : ( - handleAction(item)} - className={theme === "dark" ? "hover:bg-gray-600 hover:text-white" : "hover:bg-gray-100 hover:text-gray-900"} - > + handleAction(item)}> {item} )} @@ -116,7 +98,8 @@ const MoreMenu: React.FC = ({ Confirm Deletion - Are you sure you want to delete this issue? This action cannot be undone. + Are you sure you want to delete this issue? This action cannot be + undone. diff --git a/frontend/components/ResolutionModal/ResolutionModal.tsx b/frontend/components/ResolutionModal/ResolutionModal.tsx index 9e5cf9ab..1600cd95 100644 --- a/frontend/components/ResolutionModal/ResolutionModal.tsx +++ b/frontend/components/ResolutionModal/ResolutionModal.tsx @@ -46,24 +46,32 @@ interface OrganizationToggleProps { onToggle: (id: string) => void; } -const OrganizationToggle: React.FC = ({ organization, isSelected, onToggle }) => ( - onToggle(organization.id)} - className={cn( - "flex flex-col items-center justify-center p-2 rounded-md", - "w-24 h-24 border-2", - isSelected ? "border-primary bg-primary/10" : "border-gray-200 hover:bg-gray-100", - "transition-all duration-200 ease-in-out" - )} - > - - - {organization.name.charAt(0)} - - {organization.name} - -); +const OrganizationToggle: React.FC = ({ organization, isSelected, onToggle }) => { + const { theme } = useTheme(); + + return ( + onToggle(organization.id)} + className={cn( + "flex flex-col items-center justify-center p-2 rounded-md", + "w-24 h-24 border-2", + isSelected ? "border-primary bg-primary/10" : "border-gray-200", + theme === 'dark' + ? "hover:bg-[#0C0A09] hover:text-white" + : "hover:bg-gray-100", + "transition-all duration-200 ease-in-out" + )} + > + + + {organization.name.charAt(0)} + + {organization.name} + + ); +}; + const ResolutionModal: React.FC = ({ isOpen, From b3094619940a57e5c3143bcb5184522d8b9582cd Mon Sep 17 00:00:00 2001 From: ShamaKamina Date: Fri, 27 Sep 2024 18:58:48 +0200 Subject: [PATCH 04/10] fixed the dark theme on resolution modal --- .../components/Leaderboard/Leaderboard.tsx | 346 +++++++++++------- .../ResolutionModal/ResolutionModal.tsx | 4 +- 2 files changed, 216 insertions(+), 134 deletions(-) diff --git a/frontend/components/Leaderboard/Leaderboard.tsx b/frontend/components/Leaderboard/Leaderboard.tsx index 235aa91e..e67639cf 100644 --- a/frontend/components/Leaderboard/Leaderboard.tsx +++ b/frontend/components/Leaderboard/Leaderboard.tsx @@ -1,146 +1,226 @@ -import React from "react"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, - DropdownMenuSub, - DropdownMenuSubContent, - DropdownMenuSubTrigger, -} from "@/components/ui/dropdown-menu"; -import { - Dialog, - DialogClose, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "@/components/ui/dialog"; -import { MoreHorizontal } from "lucide-react"; +"use client"; + +import React, { useState, useEffect, useRef } from 'react'; +import { SlidersHorizontal, Loader2 } from 'lucide-react'; +import { useTheme } from 'next-themes'; +import fetchLeaderboard from "@/lib/api/fetchLeaderboard"; +import { fetchUserLocation } from "@/lib/api/fetchUserLocation"; +import { useUser } from "@/lib/contexts/UserContext"; +import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"; +import { useRouter } from "next/navigation"; import { Button } from "@/components/ui/button"; +import ErrorDisplay from '@/components/ui/error_display'; +import { useQuery } from '@tanstack/react-query'; -interface MoreMenuProps { - menuItems: string[]; - isOwner: boolean; - onAction: (action: string) => void; - onSubscribe: (option: string) => void; - theme: "light" | "dark"; -} - -const MoreMenu: React.FC = ({ - menuItems, - isOwner, - onAction, - onSubscribe, - theme, -}) => { - const handleAction = (action: string) => { - onAction(action); - }; +type RankingType = 'country' | 'province' |'city' | 'suburb'; - const handleSubscribeOptionClick = (option: string) => { - onSubscribe(option); - }; +const LoadingIndicator = () => ( +
+ +
+); + +const Leaderboard: React.FC = () => { + const { user } = useUser(); + const [rankingType, setRankingType] = useState('country'); + const [showDropdown, setShowDropdown] = useState(false); + const userRowRef = useRef(null); + const { theme } = useTheme(); + const router = useRouter(); + const { data: locationData } = useQuery({ + queryKey: ["user-location"], + queryFn: async () => { + if (user?.location_id) { + return await fetchUserLocation(user.location_id); + } else { + return null; + } + } + }); + const { data, error, isPending, isFetching } = useQuery({ + queryKey: ["leaderboard", rankingType], + queryFn: async () => { + if (!user) { + throw 'No user data available'; + } + + try { + let filterData = {}; + if (locationData && locationData.value) { + filterData = { + province: locationData.value.province, + city: locationData.value.city, + suburb: locationData.value.suburb, + }; + } + + const data = await fetchLeaderboard(user.user_id, rankingType, filterData); + + return { + leaderboardData: data.leaderboard, + userData: data.user + }; + } catch (error) { + console.error('Error fetching leaderboard data:', error); + throw 'Failed to load leaderboard data'; + } + }, + enabled: locationData !== undefined + }); - const getMenuItemClassName = () => { - return theme === "dark" - ? "text-white hover:bg-[#262626]" - : "text-black hover:bg-gray-100"; + const handleUsernameClick = (userId: string) => { + router.push(`/profile/${userId}`); }; + useEffect(() => { + if (userRowRef.current) { + userRowRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + }, [rankingType]); + + if (isPending || isFetching) { + return ; + } + + if (error) { + return ( + + ); + } + + const { leaderboardData, userData } = data!; + + if (!userData) { + return ( + + ); + } + + const userHasLocation = !!locationData; + return ( - - - - - - +
+ + + {userData.fullname.charAt(0)} + +
+

{userData.fullname}

+

Points: {userData.user_score}

+
+
+

Your {rankingType.charAt(0).toUpperCase() + rankingType.slice(1)} Ranking

+

+ {userData.ranking !== null ? `${userData.ranking}` : 'N/A'} +

+
+
+ +
+ + {showDropdown && ( +
+ + {userHasLocation && ( + <> + + + + + )} +
+ )} +
+ + {!userHasLocation && rankingType !== 'country' && ( +
+

Set your location to see more detailed ranking information.

+ +
+ )} + +
+ + + + + + + {rankingType === 'country' && } + {rankingType === 'country' && } + {rankingType === 'country' && } + {rankingType === 'city' && } + {rankingType === 'suburb' && } + + + + {leaderboardData.map(entry => ( + + + + + {rankingType === 'country' && } + {rankingType === 'country' && } + {rankingType === 'country' && } + {rankingType === 'city' && } + {rankingType === 'suburb' && } + + ))} + +
RankUserPointsProvinceCitySuburbCitySuburb
{entry.rank} handleUsernameClick(entry.userId)} > - {item} - - )} - - ))} - - - - - Confirm Deletion - - Are you sure you want to delete this issue? This action cannot be undone. - - - - - - - - - - - - + {entry.username} + {entry.points}{entry.province || 'N/A'}{entry.city || 'N/A'}{entry.suburb || 'N/A'}{entry.city || 'N/A'}{entry.suburb || 'N/A'}
+
+
); }; -export default MoreMenu; \ No newline at end of file +export default Leaderboard; \ No newline at end of file diff --git a/frontend/components/ResolutionModal/ResolutionModal.tsx b/frontend/components/ResolutionModal/ResolutionModal.tsx index 1600cd95..cb83638f 100644 --- a/frontend/components/ResolutionModal/ResolutionModal.tsx +++ b/frontend/components/ResolutionModal/ResolutionModal.tsx @@ -354,10 +354,12 @@ const ResolutionModal: React.FC = ({ className={cn( "px-4 py-2 rounded-lg", theme === "dark" - ? "bg-gray-700 text-white hover:bg-gray-600" + ? "bg-[#0C0A09] text-white hover:bg-[#262626]" : "bg-gray-200 text-gray-800 hover:bg-gray-300" )} > + + Upload Image From be66716362f43d4078e8768f861c96c97af81ea9 Mon Sep 17 00:00:00 2001 From: ShamaKamina Date: Fri, 27 Sep 2024 19:08:39 +0200 Subject: [PATCH 05/10] fixed the message for forecasts --- .../src/modules/issues/repositories/issueRepository.ts | 10 +++++----- frontend/components/ui/resolution-popover.tsx | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/backend/src/modules/issues/repositories/issueRepository.ts b/backend/src/modules/issues/repositories/issueRepository.ts index 03aad34a..37783bfd 100644 --- a/backend/src/modules/issues/repositories/issueRepository.ts +++ b/backend/src/modules/issues/repositories/issueRepository.ts @@ -129,7 +129,7 @@ export default class IssueRepository { const days = forecastData && !forecastError ? formatTime(forecastData) : "6 days"; const information = !issue.resolved_at - ? `This issue may take at least ${days} to be resolved. Please check back if your issue is not resolved by then.` + ? `This issue may take around ${days} to be resolved based on similar issues in this area.` : "This issue has already been resolved."; return { @@ -249,7 +249,7 @@ export default class IssueRepository { const days = forecastData && !forecastError ? formatTime(forecastData) : "6 days"; const information = !data.resolved_at - ? `This issue may take at least ${days} to be resolved. Please check back if your issue is not resolved by then.` + ? `This issue may take around ${days} to be resolved based on similar issues in this area.` : "This issue has already been resolved."; return { @@ -427,7 +427,7 @@ export default class IssueRepository { const days = forecastData && !forecastError ? formatTime(forecastData) : "6 days"; const information = !issue.resolved_at - ? `This issue may take at least ${days} to be resolved. Please check back if your issue is not resolved by then.` + ? `This issue may take around ${days} to be resolved based on similar issues in this area.` : "This issue has already been resolved."; return { @@ -677,7 +677,7 @@ export default class IssueRepository { const days = forecastData && !forecastError ? formatTime(forecastData) : "6 days"; const information = !issue.resolved_at - ? `This issue may take at least ${days} to be resolved. Please check back if your issue is not resolved by then.` + ? `This issue may take around ${days} to be resolved based on similar issues in this area.` : "This issue has already been resolved."; return { @@ -772,7 +772,7 @@ export default class IssueRepository { const days = forecastData && !forecastError ? formatTime(forecastData) : "6 days"; const information = !issue.resolved_at - ? `This issue may take at least ${days} to be resolved. Please check back if your issue is not resolved by then.` + ? `This issue may take around ${days} to be resolved based on similar issues in this area.` : "This issue has already been resolved."; return { diff --git a/frontend/components/ui/resolution-popover.tsx b/frontend/components/ui/resolution-popover.tsx index 508c961c..cf60cf34 100644 --- a/frontend/components/ui/resolution-popover.tsx +++ b/frontend/components/ui/resolution-popover.tsx @@ -23,7 +23,7 @@ export default function InfoPopover({ message }: PopoverProps) {

Resolution Information

-

{message ?? 'This issue may take at least 6 day(s) to be resolved. Please check back if your issue is not resolved by then.'}

+

{message ?? 'This issue may take around 6 day(s) to be resolved based on similar issues in this area.'}

{/*
*/} From 632a00c52cf0e14e2c6fe98f3a682d6663418582 Mon Sep 17 00:00:00 2001 From: ShamaKamina Date: Fri, 27 Sep 2024 19:13:05 +0200 Subject: [PATCH 06/10] Made the search for "Resolved By " Dark --- .../ResolutionModal/ResolutionModal.tsx | 66 ++++++++++++------- 1 file changed, 41 insertions(+), 25 deletions(-) diff --git a/frontend/components/ResolutionModal/ResolutionModal.tsx b/frontend/components/ResolutionModal/ResolutionModal.tsx index cb83638f..814512f9 100644 --- a/frontend/components/ResolutionModal/ResolutionModal.tsx +++ b/frontend/components/ResolutionModal/ResolutionModal.tsx @@ -275,31 +275,47 @@ const ResolutionModal: React.FC = ({ {isSearchOpen && searchResults.length > 0 && ( -
- {searchResults.map((item) => ( -
{ - setResolvedBy(item.name); - setResolverID(item.id); - setSearchQuery(item.name); - setIsSearchOpen(false); - }} - > - - {item.name} - - - @{item.username} - - - {item.type} - -
- ))} -
- )} +
+ {searchResults.map((item) => ( +
{ + setResolvedBy(item.name); + setResolverID(item.id); + setSearchQuery(item.name); + setIsSearchOpen(false); + }} + > + + {item.name} + + + @{item.username} + + + {item.type} + +
+ ))} +
+)} )} From 3b0dc67680b5561758b62ee2470d359040143ba7 Mon Sep 17 00:00:00 2001 From: ShamaKamina Date: Fri, 27 Sep 2024 19:27:01 +0200 Subject: [PATCH 07/10] Made the notifications adhere to dark mode --- frontend/components/Notifications/NotificationsList.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/frontend/components/Notifications/NotificationsList.tsx b/frontend/components/Notifications/NotificationsList.tsx index a829d3f4..a0a1a254 100644 --- a/frontend/components/Notifications/NotificationsList.tsx +++ b/frontend/components/Notifications/NotificationsList.tsx @@ -10,6 +10,7 @@ import { subscribe } from "@/lib/api/subscription"; import { useQuery } from "@tanstack/react-query"; import { useUser } from "@/lib/contexts/UserContext"; import ErrorDisplay from '@/components/ui/error_display'; +import { useTheme } from "next-themes"; import type { NotificationType } from "@/lib/types"; import { formatLongDate } from "@/lib/utils"; @@ -77,6 +78,8 @@ const NotificationsList: React.FC = () => { ); } + const { theme } = useTheme(); + const addSuspendMessage = (notif: NotificationType) => notif.content.includes("external resolution rejected") ? notif.content + " You will be suspended from resolving until " + formatLongDate( @@ -92,7 +95,11 @@ const NotificationsList: React.FC = () => {
  • Date: Fri, 27 Sep 2024 19:39:32 +0200 Subject: [PATCH 08/10] Changed "Reports" to "Statistics" --- frontend/app/(home)/analytics/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/app/(home)/analytics/page.tsx b/frontend/app/(home)/analytics/page.tsx index 828a49b0..b0d914df 100644 --- a/frontend/app/(home)/analytics/page.tsx +++ b/frontend/app/(home)/analytics/page.tsx @@ -29,7 +29,7 @@ function Tabs() { onClick={() => handleTabClick('Reports')} aria-current={activeTab === 'Reports' ? 'page' : undefined} > - Reports + Statistics
  • From da4bc58b5076872a3cf745a0921fbc3030b676e1 Mon Sep 17 00:00:00 2001 From: ShamaKamina Date: Fri, 27 Sep 2024 19:52:15 +0200 Subject: [PATCH 09/10] changed the report icon and fixed tests --- frontend/__tests__/pages/home/Analytics.test.tsx | 4 ++-- frontend/components/OrganizationTabs/InformationTab.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/__tests__/pages/home/Analytics.test.tsx b/frontend/__tests__/pages/home/Analytics.test.tsx index 577615a2..0b859285 100644 --- a/frontend/__tests__/pages/home/Analytics.test.tsx +++ b/frontend/__tests__/pages/home/Analytics.test.tsx @@ -7,7 +7,7 @@ jest.mock('@/components/ReportCharts/Reports', () => () =>
    Reports Componen describe('Tabs Component', () => { test('renders Reports tab by default', () => { render(); - expect(screen.getByText('Reports')).toBeInTheDocument(); + expect(screen.getByText('Statitics')).toBeInTheDocument(); expect(screen.getByText('Reports Component')).toBeInTheDocument(); }); @@ -20,7 +20,7 @@ describe('Tabs Component', () => { test('highlights the active tab correctly', () => { render(); - const reportsTab = screen.getByText('Reports'); + const reportsTab = screen.getByText('Statistics'); const visualizationsTab = screen.getByText('Visualizations'); fireEvent.click(reportsTab); diff --git a/frontend/components/OrganizationTabs/InformationTab.tsx b/frontend/components/OrganizationTabs/InformationTab.tsx index e898c997..96aad3db 100644 --- a/frontend/components/OrganizationTabs/InformationTab.tsx +++ b/frontend/components/OrganizationTabs/InformationTab.tsx @@ -5,7 +5,7 @@ import { checkUserMembership } from '@/lib/api/checkUserMembership'; import { requestReport } from '@/lib/api/requestReport'; import { useUser } from '@/lib/contexts/UserContext'; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; -import { PenSquare, Star, BarChart, Sparkles } from 'lucide-react'; +import { PenSquare, Star, BarChart, PieChart } from 'lucide-react'; import OrgPost from '@/components/OrgPost/OrgPost'; import CreateOrgPost from '@/components/CreatePost/CreatePost'; import { useToast } from '../ui/use-toast'; @@ -185,7 +185,7 @@ export default function InformationTab({ From 6da7a96818c236c2c82e372b9c47ab18733d9cd0 Mon Sep 17 00:00:00 2001 From: ShamaKamina Date: Fri, 27 Sep 2024 19:55:53 +0200 Subject: [PATCH 10/10] okay fixed tests --- frontend/__tests__/pages/home/Analytics.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/__tests__/pages/home/Analytics.test.tsx b/frontend/__tests__/pages/home/Analytics.test.tsx index 0b859285..21573d7c 100644 --- a/frontend/__tests__/pages/home/Analytics.test.tsx +++ b/frontend/__tests__/pages/home/Analytics.test.tsx @@ -7,7 +7,7 @@ jest.mock('@/components/ReportCharts/Reports', () => () =>
    Reports Componen describe('Tabs Component', () => { test('renders Reports tab by default', () => { render(); - expect(screen.getByText('Statitics')).toBeInTheDocument(); + expect(screen.getByText('Statistics')).toBeInTheDocument(); expect(screen.getByText('Reports Component')).toBeInTheDocument(); });