'use client'

function VolunteerProfileDialog({ params: { oid } }: { params: { oid: string } }) { 
  const { user, orgId } = useData();
  const [token, setToken] = useState<string | null>(null);
  const [volunteer, setVolunteer] = useState<VolunteerBaseWithId | null >(null);

  console.log("rendering VolunteerProfileDialog")

  const volunteerId = oid;

  useEffect(() => {
    const fetchToken = async () => {
      if (user) {
        const fetchedToken = await getIdToken(user);
        setToken(fetchedToken);
      }
    };

    fetchToken();
  }, [user]);

  const {
    isLoading,
    error,
  } = useQuery(['volunteer', volunteerId], () => fetchVolunteer(volunteerId, orgId as string, token as string), {
    enabled: !!token,
    onSuccess: data => {
      // Do something with the data once the request is successful
      setVolunteer(data.volunteer);
    },
  });

  if (isLoading) return <Loader />;

  if (error) return <ErrorScreen error={(error as Error).message} />;

  if (!volunteer) return <ErrorScreen error="Volunteer not found" />;

  return (
    <Dialog>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Volunteer Profile</DialogTitle>
        </DialogHeader>
        <DialogDescription>
          <Tabs defaultValue="profile">
            <TabsList>
              <TabsTrigger value="profile">Profile</TabsTrigger>
              <TabsTrigger value="details">Details</TabsTrigger>
            </TabsList>
            <TabsContent value="profile">
              <Label>Hi:</Label>
            </TabsContent>
            <TabsContent value="details">
              <Label>Volunteer ID:</Label>
              <Input value={volunteer.void} readOnly />
            </TabsContent>
          </Tabs>
        </DialogDescription>
        <DialogFooter>
          <button onClick={() => console.log('Close dialog')}>Close</button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export default VolunteerProfileDialog

import React from 'react';
import Sidebar from './Sidebar';
import Topbar from './Topbar'
import { useAuth } from '@contexts/AuthProvider';
import { useData, DataProvider } from '@contexts/DataProvider';
import { usePathname } from 'next/navigation';
import { Toaster } from 'react-hot-toast';
import fetchAdminOrganization from '@get/fetchAdminOrganization';

export default function DashboardLayout({
  children,
  params: { org_slug },
}: {
  children: React.ReactNode;
  params: { org_slug: string };
}) {
  console.log(org_slug); // This will log the value of org_name directly

  return (
    <section>
      <DataProvider org_slug={org_slug}>
        <div className="page-background flex flex-col">
          <Topbar />
          <Sidebar/>
          <div className="flex-grow ml-64 mt-12 mr-4">{children}</div>
        </div>
      </DataProvider>
    </section>
  );
}

import React from 'react';
import Sidebar from './Sidebar';
import Topbar from './Topbar'
import { useAuth } from '@contexts/AuthProvider';
import { useData, DataProvider } from '@contexts/DataProvider';
import { usePathname } from 'next/navigation';
import { Toaster } from 'react-hot-toast';
import fetchAdminOrganization from '@get/fetchAdminOrganization';

export default function DashboardLayout({
  children,
  params: { org_slug },
  modal,
}: {
  children: React.ReactNode;
  params: { org_slug: string };
  modal: React.ReactNode;
}) {
  console.log(org_slug); // This will log the value of org_name directly

  return (
    <section>
      <DataProvider org_slug={org_slug}>
        <div className="page-background flex flex-col">
          <Topbar />
          <Sidebar/>
          <div className="flex-grow ml-64 mt-12 mr-4">
            {children}
            {modal}
          </div>
        </div>
      </DataProvider>
    </section>
  );
}

import React from 'react';

export default function VolunteerLayout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <>
      {children}
      {modal}
    </>
  );
}

'use client'

import { useState, useEffect } from "react"
import { useQuery } from '@tanstack/react-query';
import { fetchVolunteer } from "@get/fetchVolunteers"
import { getIdToken } from 'firebase/auth';
import { useRouter, usePathname, useSearchParams } from 'next/navigation'
import { useData } from '@contexts/DataProvider';
import Loader from '@components/Loader';
import ErrorScreen from '@components/ErrorScreen';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@components/ui/tabs';
import { Card, CardHeader, CardTitle, CardContent, CardDescription } from '@components/ui/card';
import { Input } from "@components/ui/input"
import { Label } from "@components/ui/label"

function VolunteerProfilePage({ params: { oid } }: { params: { oid: string } }) {

  const {
    isLoading,
    error,
  } = useQuery(['volunteer', volunteerId], () => fetchVolunteer(volunteerId, orgId as string, token as string), {
    enabled: !!token,
    onSuccess: data => {
      // Do something with the data once the request is successful
      setVolunteer(data.volunteer);
    },
  });

  if (isLoading) return <Loader />;

  if (error) return <ErrorScreen error={(error as Error).message} />;

  if (!volunteer) return <ErrorScreen error="Volunteer not found" />;

  return (
    <div className="mt-9 ml-8 mr-8">
      <Card>
        <CardHeader>
          <CardTitle>Volunteer Profile</CardTitle>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="profile">
            <TabsList>
              <TabsTrigger value="profile">Profile</TabsTrigger>
              <TabsTrigger value="details">Details</TabsTrigger>
            </TabsList>
            <TabsContent value="profile">
              <CardDescription>
              </CardDescription>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  );
}

export default VolunteerProfilePage

'use client'

import { useState, useEffect } from "react"
import { useQuery } from '@tanstack/react-query';
import { fetchVolunteer } from "@get/fetchVolunteers"
import { getIdToken } from 'firebase/auth';
import { useRouter, usePathname, useSearchParams } from 'next/navigation'
import { useData } from '@contexts/DataProvider';
import Loader from '@components/Loader';
import ErrorScreen from '@components/ErrorScreen';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@components/ui/tabs';
import { Input } from "@components/ui/input"
import { Label } from "@components/ui/label"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@components/ui/dialog"

function VolunteerProfileDialog({ params: { oid } }: { params: { oid: string } }) { 

  return (
    <Dialog>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Volunteer Profile</DialogTitle>
        </DialogHeader>
        <DialogDescription>
          <Tabs defaultValue="profile">
            <TabsList>
              <TabsTrigger value="profile">Profile</TabsTrigger>
              <TabsTrigger value="details">Details</TabsTrigger>
            </TabsList>
            <TabsContent value="profile">
            </TabsContent>
          </Tabs>
        </DialogDescription>
        <DialogFooter>
          <button onClick={() => console.log('Close dialog')}>Close</button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export default VolunteerProfileDialog

    <div className="mt-9 ml-8 mr-8">
      <h2 className="mt-2 mb-2 text-3xl font-bold tracking-tight">Volunteers</h2>
      <VolunteerDataTable columns={columns} data={volunteerData} /> 
    </div>

  const columns: ColumnDef<VolunteerBaseWithId>[] = [
    {
      id: "select",
      header: ({ table }) => (
        <Checkbox
          checked={table.getIsAllPageRowsSelected()}
          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
          aria-label="Select all"
        />
      ),
      cell: ({ row }) => (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(value) => row.toggleSelected(!!value)}
          aria-label="Select row"
        />
      ),
      enableSorting: false,
      enableHiding: false,
    },
    {
      id: "actions",
      cell: ({ row }) => {
        const volunteer = row.original

        return (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="h-8 w-8 p-0">
                <span className="sr-only">Open menu</span>
                <MoreHorizontal className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
              <VolunteerProfilePopup volunteerId={volunteer.void}>
                <button>
                  <DropdownMenuItem>
                    View Volunteer
                  </DropdownMenuItem>
                </button>
              </VolunteerProfilePopup>
            </DropdownMenuContent>
          </DropdownMenu>
        )
      },
    },
  ]

'use client'

function VolunteerProfileDialog({ volunteerId, children }) { 

  const { user, orgId } = useData();
  const [token, setToken] = useState<string | null>(null);
  const [volunteer, setVolunteer] = useState<VolunteerBaseWithId | null >(null);
  const [isOpen, setIsOpen] = useState(false);

  console.log("rendering VolunteerProfileDialog")
  console.log("volunteerId: ", volunteerId)

  useEffect(() => {
    const fetchToken = async () => {
      if (user) {
        const fetchedToken = await getIdToken(user);
        setToken(fetchedToken);
      }
    };

    fetchToken();
  }, [user]);

  const {
    isLoading,
    error,
  } = useQuery(['volunteer', volunteerId], () => fetchVolunteer(volunteerId, orgId as string, token as string), {
    enabled: !!token,
    onSuccess: data => {
      // Do something with the data once the request is successful
      setVolunteer(data.volunteer);
    },
  });

  if (isLoading) return <Loader />;

  if (error) return <ErrorScreen error={(error as Error).message} />;

  if (!volunteer) return <ErrorScreen error="Volunteer not found" />;

  return (
    <Dialog open={isOpen}>
      <DialogTrigger asChild>
        <button onClick={() => setIsOpen(true)}>
          {children}
        </button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Volunteer Profile</DialogTitle>
        </DialogHeader>
        <DialogDescription>
          <h1>hi</h1>
        </DialogDescription>
        <DialogFooter>
          <button>Close</button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export default VolunteerProfileDialog