From f87fa514bfb2031174e46a594bbaa2ed01ba215b Mon Sep 17 00:00:00 2001 From: dextmorgn Date: Fri, 14 Feb 2025 10:35:00 +0100 Subject: [PATCH] feat: icons --- .../[investigation_id]/left.tsx | 35 ++++++++++++++++--- src/components/investigations/graph.tsx | 3 +- .../investigations/nodes/individual.tsx | 4 +-- .../investigations/nodes/social.tsx | 5 +-- src/hooks/use-mobile.tsx | 19 ---------- .../{emails => investigation}/use-emails.tsx | 0 .../use-individuals.tsx | 0 src/lib/hooks/investigation/use-phones.tsx | 25 +++++++++++++ src/lib/hooks/use-platform-icons.tsx | 5 ++- styles/globals.css | 4 +-- 10 files changed, 68 insertions(+), 32 deletions(-) delete mode 100644 src/hooks/use-mobile.tsx rename src/lib/hooks/{emails => investigation}/use-emails.tsx (100%) rename src/lib/hooks/{individuals => investigation}/use-individuals.tsx (100%) create mode 100644 src/lib/hooks/investigation/use-phones.tsx diff --git a/src/app/investigations/[investigation_id]/left.tsx b/src/app/investigations/[investigation_id]/left.tsx index 62d0cd4..209fa93 100644 --- a/src/app/investigations/[investigation_id]/left.tsx +++ b/src/app/investigations/[investigation_id]/left.tsx @@ -1,11 +1,11 @@ "use client" import React from 'react' import { Skeleton } from '@/components/ui/skeleton'; -import { useIndividuals } from '@/lib/hooks/individuals/use-individuals'; -import { useInvestigationContext } from '@/components/contexts/investigation-provider'; +import { useIndividuals } from '@/lib/hooks/investigation/use-individuals'; import { cn } from '@/lib/utils'; -import { AtSignIcon, RotateCwIcon, UserIcon } from 'lucide-react'; -import { useEmails } from '@/lib/hooks/emails/use-emails'; +import { AtSignIcon, PhoneIcon, UserIcon } from 'lucide-react'; +import { useEmails } from '@/lib/hooks/investigation/use-emails'; +import { usePhones } from '@/lib/hooks/investigation/use-phones'; import { Accordion, AccordionContent, @@ -18,6 +18,8 @@ import { useFlowStore } from '@/components/contexts/use-flow-store'; const Left = ({ investigation_id }: { investigation_id: string }) => { const { individuals, isLoading: isLoadingIndividuals, refetch: refetchIndividuals } = useIndividuals(investigation_id) const { emails, isLoading: isLoadingEmails, refetch: refetchEmails } = useEmails(investigation_id) + const { phones, isLoading: isLoadingPhones, refetch: refetchPhones } = usePhones(investigation_id) + const { currentNode, setCurrentNode } = useFlowStore() return ( @@ -72,6 +74,31 @@ const Left = ({ investigation_id }: { investigation_id: string }) => { + + + + Phones {!isLoadingPhones && <>({phones?.length})} + + {isLoadingPhones &&
+ + + +
+ } +
    + {phones?.map((phone: any) => ( +
  • + +
    • + )) + } +
+ + + ) } diff --git a/src/components/investigations/graph.tsx b/src/components/investigations/graph.tsx index 49f8db7..d33a967 100644 --- a/src/components/investigations/graph.tsx +++ b/src/components/investigations/graph.tsx @@ -108,6 +108,7 @@ const LayoutFlow = ({ theme }: { theme: ColorMode }) => { proOptions={{ hideAttribution: true }} nodeTypes={nodeTypes} edgeTypes={edgeTypes} + className='!bg-background' > @@ -131,7 +132,6 @@ const LayoutFlow = ({ theme }: { theme: ColorMode }) => { -
@@ -149,7 +149,6 @@ const LayoutFlow = ({ theme }: { theme: ColorMode }) => { )}
- diff --git a/src/components/investigations/nodes/individual.tsx b/src/components/investigations/nodes/individual.tsx index ff5e4b5..c34add4 100644 --- a/src/components/investigations/nodes/individual.tsx +++ b/src/components/investigations/nodes/individual.tsx @@ -79,8 +79,8 @@ function Custom(props: any) { handleOpenIndividualModal(data.id)} className={cn( - "p-1 border border-border hover:border-primary/40 rounded-full shadow-none backdrop-blur bg-background/40", - currentNode === data.id && "border-primary/40", + "p-1 border border-border hover:border-primary/40 duration-100 rounded-full shadow-none backdrop-blur bg-background/40", + currentNode === data.id && "border-primary", )} >
diff --git a/src/components/investigations/nodes/social.tsx b/src/components/investigations/nodes/social.tsx index 227f08f..49c1e0b 100644 --- a/src/components/investigations/nodes/social.tsx +++ b/src/components/investigations/nodes/social.tsx @@ -44,9 +44,10 @@ function SocialNode({ data }: any) { >
{/* @ts-ignore */} - - + {/* @ts-ignore */} + {platformsIcons?.[data?.platform]?.icon}
{data.username || data.profile_url} diff --git a/src/hooks/use-mobile.tsx b/src/hooks/use-mobile.tsx deleted file mode 100644 index 2b0fe1d..0000000 --- a/src/hooks/use-mobile.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from "react" - -const MOBILE_BREAKPOINT = 768 - -export function useIsMobile() { - const [isMobile, setIsMobile] = React.useState(undefined) - - React.useEffect(() => { - const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) - const onChange = () => { - setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) - } - mql.addEventListener("change", onChange) - setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) - return () => mql.removeEventListener("change", onChange) - }, []) - - return !!isMobile -} diff --git a/src/lib/hooks/emails/use-emails.tsx b/src/lib/hooks/investigation/use-emails.tsx similarity index 100% rename from src/lib/hooks/emails/use-emails.tsx rename to src/lib/hooks/investigation/use-emails.tsx diff --git a/src/lib/hooks/individuals/use-individuals.tsx b/src/lib/hooks/investigation/use-individuals.tsx similarity index 100% rename from src/lib/hooks/individuals/use-individuals.tsx rename to src/lib/hooks/investigation/use-individuals.tsx diff --git a/src/lib/hooks/investigation/use-phones.tsx b/src/lib/hooks/investigation/use-phones.tsx new file mode 100644 index 0000000..36cc49d --- /dev/null +++ b/src/lib/hooks/investigation/use-phones.tsx @@ -0,0 +1,25 @@ +import { supabase } from "@/lib/supabase/client"; +import { useQuery } from "@supabase-cache-helpers/postgrest-swr"; + +export function usePhones(investigationId: string | null | undefined) { + const { data: phones, mutate, isLoading, error } = useQuery(Boolean(investigationId) ? + supabase + .from('phone_numbers') + .select(` + * + `) + .eq("investigation_id", investigationId) + : null, + { + revalidateOnFocus: false, + revalidateOnReconnect: false, + } + ); + return { + phones: phones || null, + isLoading, + refetch: mutate, + error: error + }; +} + diff --git a/src/lib/hooks/use-platform-icons.tsx b/src/lib/hooks/use-platform-icons.tsx index 31d5758..e0485c0 100644 --- a/src/lib/hooks/use-platform-icons.tsx +++ b/src/lib/hooks/use-platform-icons.tsx @@ -1,5 +1,5 @@ import { useMemo } from "react" -import { CameraIcon, FacebookIcon, InstagramIcon, MessageCircleDashedIcon, SendIcon } from 'lucide-react'; +import { CameraIcon, FacebookIcon, GithubIcon, InstagramIcon, MessageCircleDashedIcon, SendIcon } from 'lucide-react'; export const usePlatformIcons = (size = "small") => { const className = size === "small" ? 'h-3 w-3' : 'h-5 w-5' @@ -19,6 +19,9 @@ export const usePlatformIcons = (size = "small") => { "snapchat": { icon: , color: "yellow" }, + "github": { + icon: , color: "gray" + }, }), []) return platformsIcons } \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css index 0070181..680a850 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -15,7 +15,7 @@ --card-foreground: hsl(0 0% 3.9%); --popover: hsl(0 0% 100%); --popover-foreground: hsl(0 0% 3.9%); - --primary: hsl(0 0% 9%); + --primary: hsl(262.1 83.3% 57.8%); --primary-foreground: hsl(0 0% 98%); --secondary: hsl(0 0% 96.1%); --secondary-foreground: hsl(0 0% 9%); @@ -51,7 +51,7 @@ --foreground: hsl(0 0% 98%); --card: hsl(0 0% 3.9%); --card-foreground: hsl(0 0% 98%); - --popover: hsl(0 0% 3.9%); + --popover: hsl(240 0% 9.9%); --popover-foreground: hsl(0 0% 98%); --primary: hsl(262.1 83.3% 57.8%); --primary-foreground: hsl(0, 0%, 100%);