errorParagraphRef.current?.classList.remove(animationClass)}
49 | >
50 | *{message}
51 |
52 | );
53 | }
54 |
55 | export default FormErrorMessage;
56 |
--------------------------------------------------------------------------------
/components/create-campaign/StepTracker/StepDetails.tsx:
--------------------------------------------------------------------------------
1 | import { TickIcon } from "@/components/common/campaign-icons";
2 | import { cn } from "@/lib";
3 | import type { FormStore } from "@/store";
4 | import Heading from "../../common/Heading";
5 |
6 | type StepIndicatorProps = {
7 | step: FormStore["currentStep"];
8 | disabled?: boolean;
9 | isCompleted?: boolean;
10 | };
11 |
12 | type StepInfoProps = Pick & {
13 | title: string;
14 | description: string;
15 | };
16 |
17 | function StepIndicator(props: StepIndicatorProps) {
18 | const { step, isCompleted = false, disabled = false } = props;
19 |
20 | const Separator = (
21 | 1 && "flex basis-full flex-col items-center")}>
31 | {step > 1 && Separator}
32 |
33 |
39 | {isCompleted ?
41 |
42 | );
43 | }
44 |
45 | function StepInformation({
46 | title,
47 | description,
48 | disabled = false,
49 | }: StepInfoProps) {
50 | return (
51 |
52 | {title}
53 |
54 | {description}
55 |
56 | );
57 | }
58 |
59 | export { StepIndicator, StepInformation };
60 |
--------------------------------------------------------------------------------
/components/create-campaign/StepTracker/StepTracker.tsx:
--------------------------------------------------------------------------------
1 | import { useFormStore } from "@/store";
2 | import { StepIndicator, StepInformation } from "./StepDetails";
3 |
4 | function StepTracker() {
5 | const currentStep = useFormStore((state) => state.currentStep);
6 |
7 | return (
8 | <>
9 |
10 | 1} />
11 |
12 | 2}
16 | />
17 |
18 |
20 |
21 |
22 |
39 |
40 | );
41 | }
42 |
43 | export default StepTracker;
44 |
--------------------------------------------------------------------------------
/components/create-campaign/TipTapEditor/TipTapToolBar.tsx:
--------------------------------------------------------------------------------
1 | import { Toggle } from "@/components/ui";
2 | import type { Editor } from "@tiptap/react";
3 | import {
4 | BoldIcon,
5 | ItalicIcon,
6 | ListIcon,
7 | ListOrderedIcon,
8 | Trash2Icon,
9 | } from "lucide-react";
10 |
11 | type ToolBarProps = { editor: Editor };
12 |
13 | function TipTapToolBar({ editor }: ToolBarProps) {
14 | return (
15 |
16 | editor.chain().focus().toggleBold().run()}
19 | >
20 |
22 |
23 | editor.chain().focus().toggleItalic().run()}
26 | >
27 |
29 |
30 | editor.chain().focus().toggleBulletList().run()}
33 | >
34 |
36 |
37 | editor.chain().focus().toggleOrderedList().run()}
40 | >
41 |
43 |
44 | editor.commands.deleteSelection()}
48 | >
49 |
51 |
52 | );
53 | }
54 |
55 | export default TipTapToolBar;
56 |
--------------------------------------------------------------------------------
/components/create-campaign/TipTapEditor/index.ts:
--------------------------------------------------------------------------------
1 | export { default as TipTapEditor } from "./TipTapEditor";
2 |
--------------------------------------------------------------------------------
/components/create-campaign/index.ts:
--------------------------------------------------------------------------------
1 | export { default as FormErrorMessage } from "./FormErrorMessage";
2 | export { default as FormActionButton } from "./FormActionButton";
3 | export { default as StepOne } from "./FormSteps/StepOne";
4 | export { default as StepThree } from "./FormSteps/StepThree";
5 | export { default as StepTwo } from "./FormSteps/StepTwo";
6 | export { default as DonorSection } from "./DonorSection";
7 | export { default as StepTracker } from "./StepTracker/StepTracker";
8 | export { default as CampaignOutlook } from "./CampaignOutlook";
9 | export { default as CampaignCarousel } from "./CampaignCarousel";
10 |
--------------------------------------------------------------------------------
/components/dashboard/SummaryCard.tsx:
--------------------------------------------------------------------------------
1 | type SummaryCardProps = {
2 | title: string;
3 | figure: string | number;
4 | result: string;
5 | };
6 | const SummaryCard = ({ title, figure, result }: SummaryCardProps) => {
7 | return (
8 |
9 |
10 |
18 |
58 |
59 | total {title}
60 |
61 |
62 |
63 |
{figure}
64 | {result}
65 |
66 |
7 |
8 | There are currently no campaign in
9 | {` ${categoryName?.toLowerCase()} campaign`}
10 |
11 |
12 | Try other campaign categories above
13 |
14 |
15 | );
16 | };
17 | export default NoCampaign;
18 |
--------------------------------------------------------------------------------
/components/explore-campaign/index.ts:
--------------------------------------------------------------------------------
1 | export { default as CampaignCategoryCard } from "./CampaignCategoryCard";
2 |
--------------------------------------------------------------------------------
/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
1 | import * as AccordionPrimitive from "@radix-ui/react-accordion";
2 | import { ChevronDownIcon } from "@radix-ui/react-icons";
3 | import * as React from "react";
4 |
5 | import { cn } from "@/lib";
6 |
7 | const Accordion = AccordionPrimitive.Root;
8 |
9 | const AccordionItem = React.forwardRef<
10 | React.ElementRef,
11 | React.ComponentPropsWithoutRef
12 | >(({ className, ...props }, ref) => (
13 | ,
23 | React.ComponentPropsWithoutRef
24 | >(({ className, children, ...props }, ref) => (
25 |
26 | svg]:rotate-180",
30 | className
31 | )}
32 | {...props}
33 | >
34 | {children}
35 |
37 |
38 | ));
39 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
40 |
41 | const AccordionContent = React.forwardRef<
42 | React.ElementRef,
43 | React.ComponentPropsWithoutRef
44 | >(({ className, children, ...props }, ref) => (
45 |
50 | {children}
51 |
52 | ));
53 | AccordionContent.displayName = AccordionPrimitive.Content.displayName;
54 |
55 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
56 |
--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
1 | import type { PolymorphicProps } from "@/lib/type-helpers";
2 | import { Slot } from "@radix-ui/react-slot";
3 |
4 | type CardProps = {
5 | className?: string;
6 | children?: React.ReactNode;
7 | };
8 |
9 | function Card(
10 | props: PolymorphicProps
11 | ) {
12 | const { as: Element = "article", children, asChild, ...restOfProps } = props;
13 |
14 | const Component = asChild ? Slot : Element;
15 |
16 | return {children} ;
17 | }
18 |
19 | function CardHeader(
20 | props: PolymorphicProps
21 | ) {
22 | const { as: Element = "header", asChild, children, ...restOfProps } = props;
23 |
24 | const Component = asChild ? Slot : Element;
25 |
26 | return {children} ;
27 | }
28 |
29 | function CardContent(
30 | props: PolymorphicProps
31 | ) {
32 | const { as: Element = "div", children, ...restOfProps } = props;
33 |
34 | return {children} ;
35 | }
36 |
37 | function CardFooter(
38 | props: PolymorphicProps
39 | ) {
40 | const { as: Element = "footer", children, ...restOfProps } = props;
41 |
42 | return {children} ;
43 | }
44 |
45 | Card.Header = CardHeader;
46 | Card.Content = CardContent;
47 | Card.Footer = CardFooter;
48 |
49 | export default Card;
50 |
--------------------------------------------------------------------------------
/components/ui/carousel/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Carousel } from "./carousel";
2 | export type * from "./carousel.types";
3 |
--------------------------------------------------------------------------------
/components/ui/carousel/useCarouselOptions.ts:
--------------------------------------------------------------------------------
1 | import { useAnimationInterval } from "@/lib/hooks/useAnimationInterval";
2 | import { useCallbackRef } from "@/lib/hooks/useCallbackRef";
3 | import { useState } from "react";
4 | import { useCarouselStore } from "./carouselStoreContext";
5 |
6 | type CarouselOptions = {
7 | hasAutoSlide?: boolean;
8 | autoSlideInterval?: number;
9 | shouldPauseOnHover?: boolean;
10 | };
11 |
12 | const useCarouselOptions = (options: CarouselOptions = {}) => {
13 | const {
14 | hasAutoSlide = false,
15 | autoSlideInterval = 5000,
16 | shouldPauseOnHover = false,
17 | } = options;
18 |
19 | const { nextSlide } = useCarouselStore((state) => state.actions);
20 |
21 | const [isPaused, setIsPaused] = useState(false);
22 |
23 | const shouldAutoSlide = hasAutoSlide && !isPaused;
24 |
25 | useAnimationInterval({
26 | callbackFn: nextSlide,
27 | intervalDuration: shouldAutoSlide ? autoSlideInterval : null,
28 | });
29 |
30 | const pauseAutoSlide = useCallbackRef(
31 | () => shouldPauseOnHover && setIsPaused(true)
32 | );
33 |
34 | const resumeAutoSlide = useCallbackRef(
35 | () => shouldPauseOnHover && setIsPaused(false)
36 | );
37 |
38 | return { pauseAutoSlide, resumeAutoSlide };
39 | };
40 |
41 | export { useCarouselOptions };
42 |
--------------------------------------------------------------------------------
/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
2 | import { CheckIcon } from "@radix-ui/react-icons";
3 | import * as React from "react";
4 |
5 | import { cn } from "@/lib";
6 |
7 | const Checkbox = React.forwardRef<
8 | React.ElementRef,
9 | React.ComponentPropsWithoutRef
10 | >(({ className, ...props }, ref) => (
11 |
19 |
22 |
24 |
25 | ));
26 | Checkbox.displayName = CheckboxPrimitive.Root.displayName;
27 |
28 | export { Checkbox };
29 |
--------------------------------------------------------------------------------
/components/ui/date-picker/DateRangePicker.tsx:
--------------------------------------------------------------------------------
1 | import { CalendarIcon } from "@radix-ui/react-icons";
2 | import { addDays, format } from "date-fns";
3 | import * as React from "react";
4 |
5 | import { cn } from "@/lib";
6 | import {
7 | Popover,
8 | PopoverContent,
9 | PopoverTrigger,
10 | } from "@radix-ui/react-popover";
11 | import type { DateRange } from "react-day-picker";
12 | import Button from "../button";
13 | import Calendar from "./calender";
14 |
15 | export function DateRangePicker({
16 | className,
17 | }: React.HTMLAttributes) {
18 | const [date, setDate] = React.useState({
19 | from: new Date(2024, 0, 1),
20 | to: addDays(new Date(2024, 0, 20), 20),
21 | });
22 |
23 | return (
24 |
25 |
26 |
27 |
35 | Pick a date
47 | )}
48 |
49 |
50 |
54 |
63 |
64 |
26 |
27 |
34 | {isDateSelected ? format(dateValue, "PPP") : placeholder}
35 |
36 |
38 |
39 |
40 | {
49 | if (!date) return;
50 |
51 | onChange(format(date, "MM-dd-yyyy"));
52 | }}
53 | initialFocus={true}
54 | disabled={{ before: DATE_NEXT_TOMORROW }}
55 | />
56 |
57 |
58 | );
59 | }
60 |
61 | export default DatePicker;
62 |
--------------------------------------------------------------------------------
/components/ui/date-picker/index.ts:
--------------------------------------------------------------------------------
1 | export { DateRangePicker } from "./DateRangePicker";
2 | export { default as DatePicker } from "./date-picker";
3 |
--------------------------------------------------------------------------------
/components/ui/date-picker/popover.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib";
2 | import type { ForwardedRefType, InferProps } from "@/lib/type-helpers";
3 | import * as PopoverPrimitive from "@radix-ui/react-popover";
4 | import { forwardRef } from "react";
5 |
6 | function PopoverContent(
7 | props: InferProps,
8 | ref: ForwardedRefType
9 | ) {
10 | const { className, align = "center", sideOffset = 4, ...restOfProps } = props;
11 |
12 | return (
13 |
14 |
25 | );
26 | }
27 |
28 | const Popover = {
29 | Root: PopoverPrimitive.Root,
30 | Content: forwardRef(PopoverContent),
31 | Trigger: PopoverPrimitive.Trigger,
32 | };
33 |
34 | export { Popover };
35 |
--------------------------------------------------------------------------------
/components/ui/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Button } from "./button";
2 |
3 | export { default as Dialog } from "./dialog";
4 |
5 | export {
6 | default as Dropdown,
7 | DropdownMenu,
8 | DropdownMenuTrigger,
9 | DropdownMenuContent,
10 | DropdownMenuItem,
11 | DropdownMenuCheckboxItem,
12 | DropdownMenuRadioItem,
13 | DropdownMenuLabel,
14 | DropdownMenuSeparator,
15 | DropdownMenuShortcut,
16 | DropdownMenuGroup,
17 | DropdownMenuPortal,
18 | DropdownMenuSub,
19 | DropdownMenuSubContent,
20 | DropdownMenuSubTrigger,
21 | DropdownMenuRadioGroup,
22 | } from "./dropdown-menu";
23 |
24 | export {
25 | Table,
26 | TableHeader,
27 | TableBody,
28 | TableFooter,
29 | TableHead,
30 | TableRow,
31 | TableCell,
32 | TableCaption,
33 | } from "./table";
34 |
35 | export { default as Input } from "./input";
36 | export { default as ProgressBar } from "./progressbar";
37 | export { Toaster } from "./sonner";
38 |
39 | export { Select, SelectPrimitive } from "./select";
40 | export { DatePicker } from "./date-picker";
41 | export { default as Toggle } from "./toggle";
42 | export { default as Card } from "./card";
43 | export { default as Tabs } from "./tabs";
44 | export { Switch } from "./switch";
45 | export { Checkbox } from "./checkbox";
46 | export { default as DropZone, type DropZoneProps } from "./drop-zone";
47 |
--------------------------------------------------------------------------------
/components/ui/progressbar.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib";
2 |
3 | interface ProgressBarProps {
4 | value: number;
5 | className?: string;
6 | }
7 |
8 | const ProgressBar = ({ value, className, ...props }: ProgressBarProps) => {
9 | return (
10 |
20 | {`${value}%`}
21 |
22 | );
23 | };
24 |
25 | export default ProgressBar;
26 |
--------------------------------------------------------------------------------
/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
1 | import { useTheme } from "next-themes";
2 | import { Toaster as Sonner } from "sonner";
3 |
4 | type ToasterProps = React.ComponentProps;
5 |
6 | const Toaster = (props: ToasterProps) => {
7 | const { theme = "system" } = useTheme();
8 |
9 | return (
10 | ,
8 | React.ComponentPropsWithoutRef
9 | >(({ className, ...props }, ref) => (
10 |
18 |
24 | ));
25 | Switch.displayName = SwitchPrimitives.Root.displayName;
26 |
27 | export { Switch };
28 |
--------------------------------------------------------------------------------
/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib";
2 | import type { ForwardedRefType, InferProps } from "@/lib/type-helpers";
3 | import * as TabsPrimitive from "@radix-ui/react-tabs";
4 | import { forwardRef } from "react";
5 |
6 | function TabList(
7 | props: InferProps,
8 | ref: ForwardedRefType
9 | ) {
10 | const { className, ...restOfProps } = props;
11 |
12 | return (
13 | ,
26 | ref: ForwardedRefType
27 | ) => {
28 | const { className, ...restOfProps } = props;
29 |
30 | return (
31 | ,
44 | ref: ForwardedRefType
45 | ) => {
46 | const { className, ...restOfProps } = props;
47 |
48 | return (
49 | &
8 | VariantProps;
9 |
10 | function Toggle(
11 | props: ToggleProps,
12 | ref: ForwardedRefType
13 | ) {
14 | const { className, variant, size, ...restOfProps } = props;
15 |
16 | return (
17 | > = {
31 | status: string;
32 | message: string;
33 | error?: Record | string;
34 | data?: T;
35 | };
36 |
--------------------------------------------------------------------------------
/interfaces/Campaign.ts:
--------------------------------------------------------------------------------
1 | import type { Donation } from "@/interfaces/Donation";
2 | import { targetCountries } from "@/lib/helpers/campaign";
3 | import type { Prettify } from "@/lib/type-helpers";
4 |
5 | export type Image = Prettify<{
6 | secureUrl: string;
7 | blurHash: string;
8 | _id: string;
9 | }>;
10 |
11 | type Creator = Prettify<{
12 | _id: string;
13 | firstName: string;
14 | lastName: string;
15 | photo: string;
16 | }>;
17 |
18 | type Category = Prettify<{
19 | isDeleted: boolean;
20 | _id: string;
21 | name: string;
22 | createdAt: string;
23 | updatedAt: string;
24 | }>;
25 |
26 | type Fundraiser = "INDIVIDUAL" | "BENEFICIARY";
27 |
28 | type Status = "In Review" | "Approved" | "Rejected" | "Draft";
29 |
30 | type FlaggedReasonType = "Inappropriate Content" | "Mismatch" | "Exists";
31 |
32 | export type Campaign = {
33 | _id: string;
34 | currentStep: 1 | 2 | 3;
35 | shortId: string;
36 | category: Category | null;
37 | country: (typeof targetCountries)[number];
38 | tags: string[];
39 | goal: number;
40 | amountRaised: number;
41 | story: string;
42 | storyHtml: string;
43 | images: Image[];
44 | title: string;
45 | fundraiser: Fundraiser;
46 | deadline: string;
47 | creator: Creator | null;
48 | isPublished: boolean;
49 | status: Status;
50 | isFlagged: boolean;
51 | flaggedReasons: Array<{ type: FlaggedReasonType; reason: string }>;
52 | isDeleted: boolean;
53 | featured: boolean;
54 | donations: Donation[];
55 | totalDonations: number;
56 | };
57 |
58 | export type AllCampaignCategories = {
59 | _id: string;
60 | name: string;
61 | count: string;
62 | createdAt: string;
63 | updatedAt: string;
64 | };
65 |
--------------------------------------------------------------------------------
/interfaces/Donation.ts:
--------------------------------------------------------------------------------
1 | export type Donation = {
2 | _id: string;
3 | reference: string;
4 | campaignId: string;
5 | donorEmail: string;
6 | donorName: string;
7 | amount: number;
8 | paymentStatus: string;
9 | paymentDate: string;
10 | paymentMeta?: object;
11 | hideDonorDetails: boolean;
12 | createdAt?: string;
13 | updatedAt?: string;
14 | };
15 |
--------------------------------------------------------------------------------
/interfaces/FormInputs.ts:
--------------------------------------------------------------------------------
1 | export type SignUpProps = {
2 | firstName: string;
3 | lastName: string;
4 | email: string;
5 | password: string;
6 | confirmPassword: string;
7 | terms: boolean;
8 | };
9 |
10 | export type LoginProps = {
11 | email: string;
12 | password: string;
13 | };
14 |
15 | export type ResetPasswordProps = {
16 | password: string;
17 | confirmPassword: string;
18 | };
19 |
20 | export type ForgotPasswordProps = {
21 | email: string;
22 | };
23 |
24 | export type ContactUsProps = {
25 | firstName: string;
26 | lastName: string;
27 | email: string;
28 | message: string;
29 | };
30 |
31 | export type UpdateProfileProps = {
32 | firstName?: string;
33 | lastName?: string;
34 | // email?: string;
35 | phoneNumber?: string;
36 | };
37 |
38 | export type UpdatePasswordsProps = {
39 | oldPassword: string;
40 | newPassword: string;
41 | confirmPassword: string;
42 | };
43 |
44 | export type CardDetailsProps = {
45 | cardNumber: string;
46 | cvv: string;
47 | cardName: string;
48 | cardExpiry: string;
49 | };
50 |
51 | export type AddAccountDetailsProps = {
52 | accountName: string;
53 | accountNumber: string;
54 | bankName: string;
55 | };
56 |
57 | export type DonationDetailsProps = {
58 | donorEmail: string;
59 | donorName: string;
60 | amount: string;
61 | };
62 |
--------------------------------------------------------------------------------
/interfaces/Layouts.ts:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from "react";
2 |
3 | export interface BaseLayoutProps {
4 | children: ReactNode;
5 | }
6 |
7 | export interface AuthLayoutProps extends BaseLayoutProps {
8 | greeting?: string;
9 | heading?: string;
10 | contentClass?: string;
11 | withHeader: boolean;
12 | title: string;
13 | content: string;
14 | hasSuccess: boolean;
15 | }
16 |
--------------------------------------------------------------------------------
/interfaces/SvgProps.ts:
--------------------------------------------------------------------------------
1 | export type FillSvgProps = {
2 | fill?: string | boolean;
3 | stroke?: string | boolean;
4 | };
5 |
--------------------------------------------------------------------------------
/interfaces/WithPageLayout.ts:
--------------------------------------------------------------------------------
1 | import type { NextPage } from "next";
2 | import type { ReactNode } from "react";
3 |
4 | export type WithPageLayout = NextPage & {
5 | PageLayout?: React.ComponentType<{ children: ReactNode }>;
6 | };
7 |
--------------------------------------------------------------------------------
/interfaces/index.ts:
--------------------------------------------------------------------------------
1 | export type { ApiResponse, User } from "./ApiResponses";
2 | export type {
3 | ForgotPasswordProps,
4 | LoginProps,
5 | ResetPasswordProps,
6 | SignUpProps,
7 | ContactUsProps,
8 | UpdateProfileProps,
9 | UpdatePasswordsProps,
10 | CardDetailsProps,
11 | AddAccountDetailsProps,
12 | DonationDetailsProps,
13 | } from "./FormInputs";
14 | export type { AuthLayoutProps, BaseLayoutProps } from "./Layouts";
15 | export type { WithPageLayout } from "./WithPageLayout";
16 | export type { FillSvgProps } from "./SvgProps";
17 | export type { AllCampaignCategories } from "./Campaign";
18 |
--------------------------------------------------------------------------------
/layouts/AuthPagesLayout.tsx:
--------------------------------------------------------------------------------
1 | import { LogoBanner, PageMetaData } from "@/components/common";
2 | import type { AuthLayoutProps } from "@/interfaces";
3 |
4 | export const AuthPagesLayout = ({
5 | children,
6 | title,
7 | content,
8 | greeting,
9 | heading,
10 | withHeader,
11 | contentClass,
12 | hasSuccess,
13 | }: AuthLayoutProps) => {
14 | return (
15 |
16 |
18 | {!hasSuccess ? (
19 |
25 |
26 | {withHeader && (
27 |
28 |
{heading}
29 |
{greeting}
30 |
31 | )}
32 | {children}
33 |
34 | ) : (
35 |
{children}
36 | )}
37 |
39 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/layouts/BaseLayout.tsx:
--------------------------------------------------------------------------------
1 | import { Footer, Header } from "@/components/common";
2 | import type { BaseLayoutProps } from "@/interfaces";
3 |
4 | export const BaseLayout = ({ children }: BaseLayoutProps) => {
5 | return (
6 | <>
7 |
8 | {/* ;
7 |
8 | export const DATE_TODAY = new Date();
9 |
10 | export const DATE_NEXT_TOMORROW = add(DATE_TODAY, { days: 2 });
11 |
--------------------------------------------------------------------------------
/lib/helpers/campaign/generateExcerpt.ts:
--------------------------------------------------------------------------------
1 | const generateExcerpt = (story: string | undefined) => {
2 | if (!story) return "";
3 |
4 | // Take the first 200 characters of the campaign story
5 | const first200Chars = story.slice(0, 200);
6 |
7 | // Find the last punctuation mark within the first 200 characters
8 | const lastPunctuationIndex = Math.max(
9 | first200Chars.lastIndexOf("."),
10 | first200Chars.lastIndexOf("!"),
11 | first200Chars.lastIndexOf("?")
12 | );
13 |
14 | // If a punctuation mark is found, use the substring from the start of the story to the last punctuation mark(inclusive) as the excerpt
15 | // If no punctuation mark is found, use the first 200 characters as the excerpt
16 | const excerpt =
17 | lastPunctuationIndex !== -1
18 | ? first200Chars.slice(0, lastPunctuationIndex + 1)
19 | : first200Chars;
20 |
21 | return excerpt;
22 | };
23 |
24 | export { generateExcerpt };
25 |
--------------------------------------------------------------------------------
/lib/helpers/campaign/getDateFromString.ts:
--------------------------------------------------------------------------------
1 | import { DATE_TODAY } from "@/lib/helpers/campaign/constants";
2 |
3 | /* eslint-disable no-console */
4 | const getDateFromString = (dateString: string, fallback = DATE_TODAY) => {
5 | if (dateString === "") {
6 | console.info(
7 | `%cGetDateFromString: Value is an empty string, returning fallback date`,
8 | "color: yellow; font-weight: 500; font-size: 12px;"
9 | );
10 | return fallback;
11 | }
12 |
13 | const date = new Date(dateString);
14 |
15 | if (Number.isNaN(date.getTime())) {
16 | console.info(
17 | `%cGetDateFromString: Invalid date string '${dateString}', returning fallback date`,
18 | "color: yellow; font-weight: 500; font-size: 12px;"
19 | );
20 | console.trace("Invalid date string");
21 | return fallback;
22 | }
23 |
24 | return date;
25 | };
26 |
27 | export { getDateFromString };
28 |
--------------------------------------------------------------------------------
/lib/helpers/campaign/getEditorExtensions.ts:
--------------------------------------------------------------------------------
1 | import Placeholder from "@tiptap/extension-placeholder";
2 | import StarterKit from "@tiptap/starter-kit";
3 |
4 | const getEditorExtensions = (placeholder = "") => [
5 | StarterKit.configure({
6 | bulletList: {
7 | HTMLAttributes: {
8 | class: "list-disc px-4",
9 | },
10 | },
11 |
12 | orderedList: {
13 | HTMLAttributes: {
14 | class: "list-decimal marker:font-semibold px-3.5",
15 | },
16 | },
17 |
18 | dropcursor: {
19 | class: "text-pink-600",
20 | },
21 | }),
22 |
23 | Placeholder.configure({ placeholder }),
24 | ];
25 |
26 | export { getEditorExtensions };
27 |
--------------------------------------------------------------------------------
/lib/helpers/campaign/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./constants";
2 | export { getDateFromString } from "./getDateFromString";
3 | export { getEditorExtensions } from "./getEditorExtensions";
4 | export { validateFiles } from "./validateFiles";
5 | export { validateTagValue } from "./validateTagValue";
6 |
--------------------------------------------------------------------------------
/lib/helpers/campaign/validateTagValue.ts:
--------------------------------------------------------------------------------
1 | import { toast } from "sonner";
2 |
3 | const validateTagValue = (tagsArray: string[], newTag: string | undefined) => {
4 | if (!newTag) return;
5 |
6 | if (newTag.length < 3) {
7 | toast.error("Error", {
8 | description: "Tag must be at least 3 characters long",
9 | });
10 |
11 | return;
12 | }
13 |
14 | if (tagsArray.length >= 5) {
15 | toast.error("Error", {
16 | description: "Cannot add more than 5 tags",
17 | });
18 |
19 | return;
20 | }
21 |
22 | return newTag;
23 | };
24 |
25 | export { validateTagValue };
26 |
--------------------------------------------------------------------------------
/lib/helpers/checkIsDeviceMobileOrTablet.ts:
--------------------------------------------------------------------------------
1 | type DeviceCheckReturnType = { isMobileOrTablet: boolean };
2 |
3 | const checkIsDeviceMobileOrTablet = (): DeviceCheckReturnType => {
4 | const deviceHasMouse = window.matchMedia("(pointer:fine)").matches;
5 | const deviceHasNoMouse = window.matchMedia("(pointer:coarse)").matches;
6 |
7 | switch (true) {
8 | case deviceHasMouse: {
9 | return { isMobileOrTablet: false };
10 | }
11 |
12 | case deviceHasNoMouse: {
13 | return { isMobileOrTablet: true };
14 | }
15 |
16 | case "ontouchstart" in window && "maxTouchPoints" in navigator: {
17 | return { isMobileOrTablet: navigator.maxTouchPoints > 0 };
18 | }
19 |
20 | case "userAgentData" in navigator &&
21 | (navigator.userAgentData as { mobile: boolean }).mobile: {
22 | return { isMobileOrTablet: true };
23 | }
24 |
25 | default: {
26 | const mobileDeviceRegex =
27 | /android|webos|iphone|ipad|ipod|blackberry|mobi|iemobile|opera mini/i;
28 |
29 | return { isMobileOrTablet: mobileDeviceRegex.test(navigator.userAgent) };
30 | }
31 | }
32 | };
33 |
34 | export { checkIsDeviceMobileOrTablet };
35 |
--------------------------------------------------------------------------------
/lib/helpers/cn.ts:
--------------------------------------------------------------------------------
1 | import clsx, { type ClassValue } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | const cn = (...classNames: ClassValue[]): string => twMerge(clsx(classNames));
5 |
6 | export { cn };
7 |
--------------------------------------------------------------------------------
/lib/helpers/create-fetcher/index.ts:
--------------------------------------------------------------------------------
1 | export { createFetcher } from "./create-fetcher";
2 | export * from "./types";
3 |
--------------------------------------------------------------------------------
/lib/helpers/create-fetcher/utils.ts:
--------------------------------------------------------------------------------
1 | export const getResponseData = (response: Response) => {
2 | return response.json() as Promise;
3 | };
4 |
5 | export const getDaysLeftForDonationCarousel = (days: number) => {
6 | return days < 0 ? 0 : days ?? 0;
7 | };
8 |
--------------------------------------------------------------------------------
/lib/helpers/getDaysLeft.ts:
--------------------------------------------------------------------------------
1 | export const getDaysLeft = (deadlineTime: any) => {
2 | const deadline: any = new Date(deadlineTime);
3 | const currentTime: any = new Date();
4 | const deadlineTimeFinal = deadline.getTime() - currentTime.getTime();
5 | const final = Math.floor(deadlineTimeFinal / (1000 * 60 * 60 * 24));
6 | return final;
7 | };
8 |
--------------------------------------------------------------------------------
/lib/helpers/getTimeDiff.ts:
--------------------------------------------------------------------------------
1 | export const getTimeDifference = (time: string): string => {
2 | const createdDate = new Date(time);
3 | const now = new Date();
4 | const diffInSeconds = Math.floor((now.getTime() - createdDate.getTime()) / 1000);
5 |
6 | const intervals = [
7 | { label: "year", seconds: 31536000 },
8 | { label: "month", seconds: 2592000 },
9 | { label: "day", seconds: 86400 },
10 | { label: "hour", seconds: 3600 },
11 | { label: "min", seconds: 60 },
12 | { label: "sec", seconds: 1 },
13 | ];
14 |
15 | for (const interval of intervals) {
16 | const count = Math.floor(diffInSeconds / interval.seconds);
17 | if (count > 0) {
18 | return `${count} ${interval.label}${count !== 1 ? "s" : ""} ago`;
19 | }
20 | }
21 |
22 | return "just now";
23 | };
24 |
--------------------------------------------------------------------------------
/lib/helpers/omitKeys.ts:
--------------------------------------------------------------------------------
1 | import type { Prettify, Writeable } from "../type-helpers";
2 |
3 | type PrettifyOmitResult<
4 | TObject extends Record,
5 | TOmitArray extends Array,
6 | > = Prettify>>;
7 |
8 | export const omitKeys = <
9 | const TObject extends Record,
10 | const TOmitArray extends Array,
11 | >(
12 | initialObject: TObject,
13 | keysToOmit: TOmitArray
14 | ) => {
15 | const arrayFromFilteredObject = Object.entries(initialObject).filter(
16 | ([key]) => !keysToOmit.includes(key)
17 | );
18 |
19 | const updatedObject = Object.fromEntries(arrayFromFilteredObject);
20 |
21 | return updatedObject as PrettifyOmitResult;
22 | };
23 |
--------------------------------------------------------------------------------
/lib/helpers/parseJSON.ts:
--------------------------------------------------------------------------------
1 | const parseJSON = (value: string | undefined | null) => {
2 | if (typeof value !== "string" || value === "") {
3 | return null;
4 | }
5 |
6 | return JSON.parse(value) as TResult;
7 | };
8 |
9 | export { parseJSON };
10 |
--------------------------------------------------------------------------------
/lib/hooks/createCustomContext.ts:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from "react";
2 |
3 | export class ContextError extends Error {
4 | override name = "ContextError";
5 | }
6 |
7 | export const getErrorMessage = (hook: string, provider: string) => {
8 | return `${hook} returned "null". Did you forget to wrap the necessary components within ${provider}?`;
9 | };
10 |
11 | export type CustomContextOptions = {
12 | name?: string;
13 | hookName?: string;
14 | providerName?: string;
15 | errorMessage?: string;
16 | strict?: TStrict;
17 | defaultValue?: TDefaultContextValue | null;
18 | };
19 |
20 | type UseCustomContextResult = TStrict extends true
21 | ? TContextValue
22 | : TContextValue | null;
23 |
24 | const createCustomContext = (
25 | options: CustomContextOptions = {}
26 | ) => {
27 | const {
28 | name = "Unnamed Context",
29 | hookName = "Unnamed Context hook",
30 | providerName = "Unnamed Provider",
31 | strict = true,
32 | errorMessage,
33 | defaultValue = null,
34 | } = options;
35 |
36 | const Context = createContext(defaultValue);
37 |
38 | Context.displayName = name;
39 |
40 | const useCustomContext = (): UseCustomContextResult => {
41 | const contextValue = useContext(Context);
42 |
43 | if (strict && contextValue === null) {
44 | throw new ContextError(errorMessage ?? getErrorMessage(hookName, providerName));
45 | }
46 |
47 | return contextValue as UseCustomContextResult;
48 | };
49 |
50 | return [Context.Provider, useCustomContext] as const;
51 | };
52 |
53 | export { createCustomContext };
54 |
--------------------------------------------------------------------------------
/lib/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export { createCustomContext } from "./createCustomContext";
2 | export { useCloudflareTurnstile } from "./useCloudflareTurnstile";
3 | export { useCopyToClipboard } from "./useCopyToClipboard";
4 | export { useDragScroll } from "./useDragScroll";
5 | export { useElementList } from "./useElementList/useElementList";
6 | export { usePaginate } from "./usePaginate";
7 | export { useShareCampaign } from "./useShareCampaign";
8 | export { useToggle } from "./useToggle";
9 |
--------------------------------------------------------------------------------
/lib/hooks/useAnimationInterval.ts:
--------------------------------------------------------------------------------
1 | import { useCallbackRef } from "@/lib/hooks/useCallbackRef";
2 | import { assertDefined } from "@/lib/type-helpers/assert";
3 | import { useEffect, useRef } from "react";
4 |
5 | type AnimationOptions = {
6 | callbackFn: () => void;
7 | intervalDuration: number | null;
8 | };
9 |
10 | const useAnimationInterval = (options: AnimationOptions) => {
11 | const { callbackFn, intervalDuration } = options;
12 |
13 | const startTimeStampRef = useRef(null);
14 | const animationFrameId = useRef(null);
15 |
16 | // prettier-ignore
17 | const smoothAnimation = useCallbackRef((timeStamp: DOMHighResTimeStamp) => {
18 | if (startTimeStampRef.current === null) {
19 | startTimeStampRef.current = Math.floor(timeStamp);
20 | }
21 |
22 | const elapsedTime = Math.floor(timeStamp - startTimeStampRef.current);
23 |
24 | if (elapsedTime >= assertDefined(intervalDuration)) {
25 | callbackFn();
26 | startTimeStampRef.current = null; // == Reset the starting time stamp
27 | }
28 |
29 | animationFrameId.current = requestAnimationFrame(smoothAnimation);
30 | });
31 |
32 | const onAnimationStart = useCallbackRef(
33 | () => (animationFrameId.current = requestAnimationFrame(smoothAnimation))
34 | );
35 |
36 | const onAnimationStop = useCallbackRef(() => {
37 | if (animationFrameId.current) {
38 | cancelAnimationFrame(animationFrameId.current);
39 | }
40 | startTimeStampRef.current = null;
41 | animationFrameId.current = null;
42 | });
43 |
44 | useEffect(
45 | function toggleAnimationByInterval() {
46 | if (intervalDuration === null) return;
47 |
48 | onAnimationStart();
49 |
50 | return () => onAnimationStop();
51 | },
52 |
53 | [intervalDuration, onAnimationStart, onAnimationStop]
54 | );
55 |
56 | return { animationFrameId: animationFrameId.current, onAnimationStop };
57 | };
58 |
59 | export { useAnimationInterval };
60 |
--------------------------------------------------------------------------------
/lib/hooks/useCallbackRef.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
2 | import { isServer } from "../constants";
3 | import type { CallbackFn } from "../type-helpers/global";
4 |
5 | const useIsoMorphicLayoutEffect = isServer ? useEffect : useLayoutEffect;
6 |
7 | const useCallbackRef = (callbackFn: CallbackFn) => {
8 | const callbackRef = useRef(callbackFn);
9 |
10 | useIsoMorphicLayoutEffect(() => {
11 | // == Doing this instead updating it directly during render phase, cuz according to Dan Abramov, render should be pure
12 | callbackRef.current = callbackFn;
13 | }, [callbackFn]);
14 |
15 | const savedCallback = useCallback((...params: TParams[]) => callbackRef.current(...params), []);
16 |
17 | return savedCallback;
18 | };
19 |
20 | export { useCallbackRef };
21 |
--------------------------------------------------------------------------------
/lib/hooks/useCloudflareTurnstile.tsx:
--------------------------------------------------------------------------------
1 | import type { TurnstileInstance } from "@marsidev/react-turnstile";
2 | import { useRef, useState } from "react";
3 | import { toast } from "sonner";
4 |
5 | const useCloudflareTurnstile = () => {
6 | const [botStatus, setBotStatus] = useState<"success" | "error" | "idle">(
7 | "idle"
8 | );
9 | const cfTurnStile = useRef(null);
10 |
11 | const handleBotStatus = (status: "success" | "error" | "idle") =>
12 | setBotStatus(status);
13 |
14 | const checkBotStatus = () => {
15 | if (botStatus !== "success") {
16 | toast.error("Error", {
17 | description: "Please complete the bot verification",
18 | });
19 | return;
20 | }
21 | return "success";
22 | };
23 |
24 | return {
25 | botStatus,
26 | cfTurnStile,
27 | handleBotStatus,
28 | checkBotStatus,
29 | };
30 | };
31 | export { useCloudflareTurnstile };
32 |
--------------------------------------------------------------------------------
/lib/hooks/useCopyToClipboard.ts:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | const oldSchoolCopy = (text: string) => {
4 | const tempTextArea = document.createElement("textarea");
5 | tempTextArea.value = text;
6 | document.body.append(tempTextArea);
7 | tempTextArea.select();
8 | document.execCommand("copy");
9 | tempTextArea.remove();
10 | };
11 |
12 | const useCopyToClipboard = () => {
13 | const [state, setState] = useState("");
14 |
15 | const copyToClipboard = (value: string) => {
16 | const handleCopy = async () => {
17 | try {
18 | if (!navigator?.clipboard?.writeText) {
19 | throw new Error("writeText not supported");
20 | }
21 |
22 | await navigator.clipboard.writeText(value);
23 | setState(value);
24 | } catch (error) {
25 | console.warn(error);
26 |
27 | oldSchoolCopy(value);
28 | setState(value);
29 | }
30 | };
31 |
32 | void handleCopy();
33 | };
34 |
35 | return { copiedValue: state, copyToClipboard };
36 | };
37 |
38 | export { useCopyToClipboard };
39 |
--------------------------------------------------------------------------------
/lib/hooks/useElementList/For.tsx:
--------------------------------------------------------------------------------
1 | import type { ForwardedRefType, PolymorphicPropsWithRef } from "@/lib/type-helpers";
2 | import { forwardRef } from "react";
3 |
4 | // prettier-ignore
5 | type RenderPropFn = (
6 | item: TArrayItem,
7 | index: number,
8 | array: TArrayItem[]
9 | ) => React.ReactNode;
10 |
11 | export type EachProp = { each: TArrayItem[] };
12 |
13 | export type ForRenderProps =
14 | | {
15 | children: RenderPropFn;
16 | render?: "Hey, Sorry but since your're currently using the children prop, the render prop is now redundant";
17 | }
18 | | {
19 | children?: "Hey, Sorry but since your're currently using the render prop, so the children prop is now redundant";
20 | render: RenderPropFn;
21 | };
22 |
23 | type ForProps = ForRenderProps & EachProp;
24 |
25 | function ForBase(props: ForProps) {
26 | const { each, render, children } = props;
27 |
28 | // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
29 | if (each == null) {
30 | return [];
31 | }
32 |
33 | const JSXElementList = each.map((...params) => {
34 | const coercedParams = params as Parameters>;
35 |
36 | if (typeof children === "function") {
37 | return children(...coercedParams);
38 | }
39 |
40 | return render(...coercedParams);
41 | });
42 |
43 | return JSXElementList;
44 | }
45 |
46 | function ForList(
47 | props: PolymorphicPropsWithRef & { className?: string }>,
48 | ref: ForwardedRefType
49 | ) {
50 | const { each, render, children, as: ListContainer = "ul", className, ...restOfListProps } = props;
51 |
52 | return (
53 |
54 | )} />
55 |
56 | );
57 | }
58 |
59 | const For = {
60 | Base: ForBase,
61 | List: forwardRef(ForList) as typeof ForList,
62 | };
63 |
64 | export default For;
65 |
--------------------------------------------------------------------------------
/lib/hooks/useElementList/useElementList.ts:
--------------------------------------------------------------------------------
1 | import For from "./For";
2 |
3 | function useElementList(type: "base"): [typeof For.Base];
4 | function useElementList(type?: "withWrapper"): [typeof For.List];
5 |
6 | function useElementList(type = "withWrapper") {
7 | return type === "withWrapper" ? [For.List] : [For.Base];
8 | }
9 |
10 | export { useElementList };
11 |
--------------------------------------------------------------------------------
/lib/hooks/useShareCampaign.ts:
--------------------------------------------------------------------------------
1 | import { useCallback } from "react";
2 | import { toast } from "sonner";
3 | import { useCallbackRef } from "./useCallbackRef";
4 | import { useCopyToClipboard } from "./useCopyToClipboard";
5 |
6 | const useShareCampaign = () => {
7 | const { copyToClipboard } = useCopyToClipboard();
8 |
9 | const generateTweet = useCallback(
10 | (title: string, url: string, tags: string[]) => {
11 | const queryParams = new URLSearchParams({
12 | text: `Abeg help donate to my campaign:
13 | ${title}
14 | ${tags.length > 0 && tags.join(", ")}`,
15 | url,
16 | via: "abeghelpme",
17 | });
18 |
19 | return `https://twitter.com/intent/tweet?${queryParams.toString()}`;
20 | },
21 | []
22 | );
23 |
24 | const generateWhatsAppMessage = useCallback((title: string, url: string) => {
25 | const queryParams = new URLSearchParams({
26 | text: `Abeg help donate to my campaign:\n${title}\n${url}`,
27 | });
28 |
29 | return `https://wa.me/?${queryParams.toString()}`;
30 | }, []);
31 |
32 | const handleShareLink = useCallbackRef((url: string) => () => {
33 | copyToClipboard(url);
34 |
35 | toast.success("Campaign link copied to clipboard!", {
36 | duration: 1500,
37 | });
38 | });
39 |
40 | return { generateTweet, generateWhatsAppMessage, handleShareLink };
41 | };
42 |
43 | export { useShareCampaign };
44 |
--------------------------------------------------------------------------------
/lib/hooks/useToggle.ts:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { useCallbackRef } from "./useCallbackRef";
3 |
4 | type InitialStateType = boolean | (() => boolean);
5 |
6 | const useToggle = (initialValue: InitialStateType = false) => {
7 | const [value, setValue] = useState(initialValue);
8 |
9 | const toggle = useCallbackRef((booleanValue?: TValue) => {
10 | if (typeof booleanValue === "boolean") {
11 | setValue(booleanValue);
12 | return;
13 | }
14 |
15 | setValue((prev) => !prev);
16 | });
17 |
18 | return [value, toggle] as const;
19 | };
20 |
21 | export { useToggle };
22 |
--------------------------------------------------------------------------------
/lib/hooks/useWatchInput.ts:
--------------------------------------------------------------------------------
1 | import type { SignUpProps } from "@/interfaces";
2 | import { type Control, useWatch } from "react-hook-form";
3 |
4 | type watchInputTypes = {
5 | control: Control;
6 | inputType: keyof SignUpProps;
7 | };
8 | const useWatchInput = ({ control, inputType }: watchInputTypes) => {
9 | const result = useWatch({ control, name: inputType, defaultValue: "" });
10 | return result;
11 | };
12 |
13 | export default useWatchInput;
14 |
--------------------------------------------------------------------------------
/lib/index.ts:
--------------------------------------------------------------------------------
1 | export {
2 | checkPasswordStrength,
3 | zodValidator,
4 | type ForgotPasswordType,
5 | type LoginType,
6 | type ResetPasswordType,
7 | type SignUpType,
8 | type ContactUsType,
9 | type UpdateProfileType,
10 | type UpdatePasswordsType,
11 | type CardDetailsType,
12 | type AddAccountDetailsType,
13 | type DonationDetailsType,
14 | } from "./validators/validateWithZod";
15 |
16 | export { callApi } from "./helpers/callApi";
17 | export { cn } from "./helpers/cn";
18 | export { parseJSON } from "./helpers/parseJSON";
19 | export { omitKeys } from "./helpers/omitKeys";
20 | export { getDaysLeft } from "./helpers/getDaysLeft";
21 |
--------------------------------------------------------------------------------
/lib/type-helpers/assert.ts:
--------------------------------------------------------------------------------
1 | export const assertENV = (
2 | variable: string | undefined,
3 | options?: { message: string }
4 | ) => {
5 | const { message = "Required Environment variable is missing or undefined" } =
6 | options ?? {};
7 |
8 | if (!variable) {
9 | throw new Error(message);
10 | }
11 |
12 | return variable;
13 | };
14 |
15 | export const assertDefined = (value: T) => {
16 | if (value == null) {
17 | throw new Error(`The value passed is not defined!`);
18 | }
19 |
20 | return value;
21 | };
22 |
--------------------------------------------------------------------------------
/lib/type-helpers/global.ts:
--------------------------------------------------------------------------------
1 | export type ForwardedRefType =
2 | TComponent extends React.ElementType
3 | ? React.ForwardedRef>
4 | : React.ForwardedRef;
5 |
6 | export type InferProps =
7 | TComponent extends React.ElementType
8 | ? React.ComponentPropsWithoutRef
9 | : React.HTMLAttributes;
10 |
11 | export type CallbackFn = (...params: TParams[]) => TResult;
12 |
13 | export type Writeable = { -readonly [P in keyof T]: T[P] };
14 |
15 | // == The intersection with "{}" or "unknown" or "NonNullable"
16 | // == is necessary to make it work as expected due to quirks in the TS compiler
17 | export type Prettify = {
18 | [key in keyof TObject]: TObject[key];
19 | } & NonNullable;
20 |
21 | export type PrettyOmit = Prettify>;
22 |
--------------------------------------------------------------------------------
/lib/type-helpers/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./global";
2 | export * from "./polymorphism-helper";
3 | export * from "./typeof";
4 |
--------------------------------------------------------------------------------
/lib/type-helpers/polymorphism-helper.ts:
--------------------------------------------------------------------------------
1 | export type AsProp = {
2 | as?: TElement;
3 | };
4 |
5 | type PropsWithOptionalAs<
6 | TElement extends React.ElementType,
7 | TProps,
8 | > = "as" extends keyof TProps ? TProps : TProps & AsProp;
9 |
10 | // == Get all other primitive element props by Omit the result of MergedProps from React.ComponentPropsWithoutRef
11 | type InferOtherProps = Omit<
12 | React.ComponentPropsWithoutRef,
13 | // == Removing children and className as well to give components control over these props
14 | keyof PropsWithOptionalAs | "className" | "children"
15 | >;
16 |
17 | // == Polymorphic props helper
18 | export type PolymorphicProps<
19 | TElement extends React.ElementType,
20 | TProps extends Record = AsProp,
21 | > = PropsWithOptionalAs & InferOtherProps;
22 |
23 | type RefProp = {
24 | ref?: React.ComponentPropsWithRef["ref"];
25 | };
26 |
27 | // == For components with the Ref Prop
28 | export type PolymorphicPropsWithRef<
29 | TElement extends React.ElementType,
30 | TProps extends Record = AsProp,
31 | > = PolymorphicProps & RefProp;
32 |
--------------------------------------------------------------------------------
/lib/type-helpers/typeof.ts:
--------------------------------------------------------------------------------
1 | export const isArray = (value: unknown): value is unknown[] => Array.isArray(value);
2 |
3 | export const isFormData = (value: unknown): value is FormData => value instanceof FormData;
4 |
5 | export const isObject = (value: unknown): value is Record => {
6 | const isRegularObject = typeof value === "object" && value !== null;
7 |
8 | return !isFormData(value) && !isArray(value) && isRegularObject;
9 | };
10 |
11 | /* eslint-disable @typescript-eslint/no-explicit-any */
12 | // == `Any` is required here so that one can pass custom function type without type errors
13 | export const isFunction = any>(
14 | value: unknown
15 | ): value is TFunction => {
16 | return typeof value === "function";
17 | };
18 |
--------------------------------------------------------------------------------
/lint-staged.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "*.{js,jsx,ts,tsx,json,yaml}": [
3 | "biome check --apply --no-errors-on-unmatched",
4 | ],
5 | "**/*.ts?(x)": () => "npm run check-types",
6 | };
7 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 |
3 | const nextConfig = {
4 | reactStrictMode: true,
5 | experimental: {
6 | scrollRestoration: true,
7 | },
8 | images: {
9 | remotePatterns: [
10 | {
11 | protocol: "http",
12 | hostname: "static.abeghelp.me",
13 | port: "",
14 | pathname: "/**",
15 | },
16 | {
17 | protocol: "https",
18 | hostname: "picsum.photos",
19 | port: "",
20 | pathname: "/**",
21 | },
22 | {
23 | protocol: "https",
24 | hostname: "loremflickr.com",
25 | port: "",
26 | pathname: "/**",
27 | },
28 | ],
29 | },
30 | };
31 |
32 | module.exports = nextConfig;
33 |
--------------------------------------------------------------------------------
/pages/2fa/app.tsx:
--------------------------------------------------------------------------------
1 | import { FirstStep, RecoveryCode } from "@/components/2fa";
2 | import { useRef, useState } from "react";
3 |
4 | const Authenticator = () => {
5 | const [step, setStep] = useState(1);
6 | const recoveryCode = useRef(null);
7 | return (
8 |
9 | {step === 1 ? (
10 |
15 | );
16 | };
17 | export default Authenticator;
18 | Authenticator.protect = true;
19 |
--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
1 | import { Head, Html, Main, NextScript } from "next/document";
2 |
3 | export default function Document() {
4 | return (
5 |
6 |
7 |
11 | ) {
12 | res.status(200).json({ name: "John Doe" });
13 | }
14 |
--------------------------------------------------------------------------------
/pages/reset-password/success.tsx:
--------------------------------------------------------------------------------
1 | import { Success } from "@/components/common";
2 | import { AuthPagesLayout } from "@/layouts";
3 | import Link from "next/link";
4 |
5 | const ResetPasswordSuccessPage = () => {
6 | return (
7 |
13 |
14 |
21 |
22 | );
23 | };
24 |
25 | export default ResetPasswordSuccessPage;
26 | ResetPasswordSuccessPage.protect = true;
27 |
--------------------------------------------------------------------------------
/pages/verify-email/index.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui";
2 | import { AuthPagesLayout } from "@/layouts";
3 | import { callApi } from "@/lib";
4 | import { useRouter } from "next/router";
5 | import { useEffect, useState } from "react";
6 | import { toast } from "sonner";
7 |
8 | const VerificationPage = () => {
9 | const router = useRouter();
10 | const [token, setToken] = useState("");
11 | const [loading, setLoading] = useState(false);
12 |
13 | useEffect(() => {
14 | setToken(router.query.token as string);
15 | }, [router]);
16 |
17 | const verifyEmail = async () => {
18 | setLoading(true);
19 | if (!token) {
20 | setLoading(false);
21 | return toast.error("Request Failed", {
22 | description: "No data provided",
23 | });
24 | }
25 | const { data, error } = await callApi("/auth/verify-email", {
26 | token,
27 | });
28 |
29 | if (error) {
30 | setLoading(false);
31 | toast.error(error.status, {
32 | description: error.message,
33 | });
34 | } else {
35 | setLoading(false);
36 | toast.success("Success", {
37 | description: (data as { message: string }).message,
38 | });
39 | setTimeout(() => {
40 | void router.push("/verify-email/success");
41 | }, 500);
42 | }
43 | };
44 |
45 | return (
46 |
53 |
54 |
Verify your email
55 |
56 |
57 | Please click on the button below to verify your email.
58 |
59 |
void verifyEmail()}
63 | fullWidth
64 | loading={loading}
65 | >
66 | Verify
67 |
68 |
69 |
71 | );
72 | };
73 | export default VerificationPage;
74 |
75 | VerificationPage.protect = true;
76 |
--------------------------------------------------------------------------------
/pages/verify-email/success.tsx:
--------------------------------------------------------------------------------
1 | import { Success } from "@/components/common";
2 | import { AuthPagesLayout } from "@/layouts";
3 | import Link from "next/link";
4 |
5 | const VerifyEmailSuccessPage = () => {
6 | return (
7 |
13 |
14 |
21 |
22 | );
23 | };
24 |
25 | export default VerifyEmailSuccessPage;
26 |
27 | VerifyEmailSuccessPage.protect = true;
28 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/public/assets/icons/auth/arrow-down.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/public/assets/icons/auth/auth-padlock.svg:
--------------------------------------------------------------------------------
1 |
2 |
9 |
--------------------------------------------------------------------------------
/public/assets/icons/auth/eye.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/public/assets/icons/auth/notification-bing.svg:
--------------------------------------------------------------------------------
1 |
2 |
6 |
--------------------------------------------------------------------------------
/public/assets/icons/auth/slashEye.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/public/assets/icons/shared/copy.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/public/assets/icons/shared/google.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/icons/shared/google.png
--------------------------------------------------------------------------------
/public/assets/icons/shared/twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/icons/shared/twitter.png
--------------------------------------------------------------------------------
/public/assets/images/about-page/MagicPattern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/about-page/MagicPattern.png
--------------------------------------------------------------------------------
/public/assets/images/about-page/aboutHero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/about-page/aboutHero.png
--------------------------------------------------------------------------------
/public/assets/images/about-page/image-pattern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/about-page/image-pattern.png
--------------------------------------------------------------------------------
/public/assets/images/about-page/index.ts:
--------------------------------------------------------------------------------
1 | export { default as aboutHero } from "@/public/assets/images/about-page/aboutHero.png";
2 | export { default as MagicPattern } from "@/public/assets/images/about-page/MagicPattern.png";
3 | export { default as whoWeAre } from "@/public/assets/images/about-page/who-we-are-image.png";
4 | export { default as ourAchievements1 } from "@/public/assets/images/about-page/our-achievements1.svg";
5 | export { default as ourAchievements2 } from "@/public/assets/images/about-page/our-achievements2.svg";
6 | export { default as ourAchievements3 } from "@/public/assets/images/about-page/our-achievements3.svg";
7 | export { default as ourAchievements4 } from "@/public/assets/images/about-page/our-achievements4.svg";
8 | export { default as ImagePattern } from "@/public/assets/images/about-page/image-pattern.png";
9 | export { default as JaneDoe } from "@/public/assets/images/about-page/jane.png";
10 | export { default as JohnDoe1 } from "@/public/assets/images/about-page/john-one.png";
11 | export { default as JohnDoe2 } from "@/public/assets/images/about-page/john-two.png";
12 |
--------------------------------------------------------------------------------
/public/assets/images/about-page/jane.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/about-page/jane.png
--------------------------------------------------------------------------------
/public/assets/images/about-page/john-one.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/about-page/john-one.png
--------------------------------------------------------------------------------
/public/assets/images/about-page/john-two.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/about-page/john-two.png
--------------------------------------------------------------------------------
/public/assets/images/about-page/our-achievements1.svg:
--------------------------------------------------------------------------------
1 |
2 |
7 |
--------------------------------------------------------------------------------
/public/assets/images/about-page/our-achievements2.svg:
--------------------------------------------------------------------------------
1 |
2 |
9 |
--------------------------------------------------------------------------------
/public/assets/images/about-page/our-achievements3.svg:
--------------------------------------------------------------------------------
1 |
2 |
10 |
--------------------------------------------------------------------------------
/public/assets/images/about-page/our-achievements4.svg:
--------------------------------------------------------------------------------
1 |
2 |
8 |
--------------------------------------------------------------------------------
/public/assets/images/about-page/who-we-are-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/about-page/who-we-are-image.png
--------------------------------------------------------------------------------
/public/assets/images/auth/auth-bg-contourss.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/auth/auth-bg-contourss.png
--------------------------------------------------------------------------------
/public/assets/images/campaign-category/arrow-down-small.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/public/assets/images/campaign-category/arrow-left.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/public/assets/images/campaign-category/arrow-right.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/public/assets/images/campaign-category/hero-circle.svg:
--------------------------------------------------------------------------------
1 |
2 |
7 |
--------------------------------------------------------------------------------
/public/assets/images/campaign-category/hero-half-moon.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/public/assets/images/campaign-category/index.ts:
--------------------------------------------------------------------------------
1 | export { default as arrowDown } from "@/public/assets/images/campaign-category/arrow-down-small.svg";
2 | export { default as arrowLeft } from "@/public/assets/images/campaign-category/arrow-left.svg";
3 | export { default as arrowRight } from "@/public/assets/images/campaign-category/arrow-right.svg";
4 | export { default as heroCircle } from "@/public/assets/images/campaign-category/hero-circle.svg";
5 | export { default as heroHalfMoon } from "@/public/assets/images/campaign-category/hero-half-moon.svg";
6 | export { default as searchIcon } from "@/public/assets/images/campaign-category/search-icon.svg";
7 |
--------------------------------------------------------------------------------
/public/assets/images/campaign-category/search-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/public/assets/images/dashboard/dashboardBg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/dashboard/dashboardBg.png
--------------------------------------------------------------------------------
/public/assets/images/dashboard/dashboardImage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/dashboard/dashboardImage.png
--------------------------------------------------------------------------------
/public/assets/images/dashboard/userIcon.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/public/assets/images/error-pages/500-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/error-pages/500-image.png
--------------------------------------------------------------------------------
/public/assets/images/how-it-works/how-it-work-hero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/how-it-works/how-it-work-hero.png
--------------------------------------------------------------------------------
/public/assets/images/how-it-works/how-it-works-splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/how-it-works/how-it-works-splash.png
--------------------------------------------------------------------------------
/public/assets/images/how-it-works/index.ts:
--------------------------------------------------------------------------------
1 | export { default as howItWorkHero } from "@/public/assets/images/how-it-works/how-it-work-hero.png";
2 | export { default as howItWorksSplash } from "@/public/assets/images/how-it-works/how-it-works-splash.png";
3 |
--------------------------------------------------------------------------------
/public/assets/images/landing-page/Facebook.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/public/assets/images/landing-page/Instagram.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/public/assets/images/landing-page/LinkedIn.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/public/assets/images/landing-page/YouTube.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/public/assets/images/landing-page/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/landing-page/background.png
--------------------------------------------------------------------------------
/public/assets/images/landing-page/charity.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/landing-page/charity.png
--------------------------------------------------------------------------------
/public/assets/images/landing-page/close-circle.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/public/assets/images/landing-page/contours.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/landing-page/contours.png
--------------------------------------------------------------------------------
/public/assets/images/landing-page/create-campaign-image1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/landing-page/create-campaign-image1.png
--------------------------------------------------------------------------------
/public/assets/images/landing-page/create-campaign-image2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/landing-page/create-campaign-image2.png
--------------------------------------------------------------------------------
/public/assets/images/landing-page/create-campaign-image3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/landing-page/create-campaign-image3.png
--------------------------------------------------------------------------------
/public/assets/images/landing-page/crowd-fund.svg:
--------------------------------------------------------------------------------
1 |
2 |
10 |
--------------------------------------------------------------------------------
/public/assets/images/landing-page/global-community.svg:
--------------------------------------------------------------------------------
1 |
2 |
9 |
--------------------------------------------------------------------------------
/public/assets/images/landing-page/happy-people.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/landing-page/happy-people.png
--------------------------------------------------------------------------------
/public/assets/images/landing-page/join-us.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/landing-page/join-us.png
--------------------------------------------------------------------------------
/public/assets/images/landing-page/menu.svg:
--------------------------------------------------------------------------------
1 |
2 |
6 |
--------------------------------------------------------------------------------
/public/assets/images/landing-page/netflix.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/public/assets/images/landing-page/stories-about-us.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/landing-page/stories-about-us.png
--------------------------------------------------------------------------------
/public/assets/images/landing-page/support.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/landing-page/support.png
--------------------------------------------------------------------------------
/public/assets/images/landing-page/testimonial-image1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/landing-page/testimonial-image1.png
--------------------------------------------------------------------------------
/public/assets/images/landing-page/testimonial-image2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/landing-page/testimonial-image2.png
--------------------------------------------------------------------------------
/public/assets/images/landing-page/testimonial-image3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/landing-page/testimonial-image3.png
--------------------------------------------------------------------------------
/public/assets/images/shared/bg-contours.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/shared/bg-contours.png
--------------------------------------------------------------------------------
/public/assets/images/shared/contours-old.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/assets/images/shared/contours-old.png
--------------------------------------------------------------------------------
/public/assets/images/shared/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
6 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/favicon.ico
--------------------------------------------------------------------------------
/public/hero.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abeghelpme/frontend/8e66b2f07a633d244a8a5aa35d11fe07f608bfca/public/hero.jpg
--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | = (state: TStore) => TResult;
2 |
--------------------------------------------------------------------------------
/store/useCampaignStore.ts:
--------------------------------------------------------------------------------
1 | import type { ApiResponse } from "@/interfaces";
2 | import type { Campaign } from "@/interfaces/Campaign";
3 | import { callApi } from "@/lib";
4 | import { create } from "zustand";
5 | import { useShallow } from "zustand/react/shallow";
6 | import type { SelectorFn } from "./store-types";
7 |
8 | type CampaignStore = {
9 | loading: boolean;
10 | campaigns: Campaign[];
11 | allUserCampaigns: Campaign[];
12 | categories: Array<{ _id: string; name: string }>;
13 |
14 | actions: {
15 | addCampaign: (newCampaign: Campaign) => void;
16 | initializeCampaigns: (campaigns: Campaign[]) => void;
17 | initializeAllUserCampaigns: (userId: string | undefined) => Promise;
18 | initializeCategories: () => Promise;
19 | };
20 | };
21 |
22 | const initialState = {
23 | loading: true,
24 | campaigns: [],
25 | allUserCampaigns: [],
26 | categories: [],
27 | } satisfies Omit;
28 |
29 | export const useInitCampaignStore = create()((set, get) => ({
30 | ...initialState,
31 |
32 | actions: {
33 | addCampaign: (newCampaign) => {
34 | const { campaigns: oldCampaigns } = get();
35 |
36 | set({
37 | campaigns: Array.isArray(oldCampaigns) ? [...oldCampaigns, newCampaign] : [newCampaign],
38 | });
39 | },
40 |
41 | initializeCampaigns: (campaigns) => set({ campaigns }),
42 |
43 | initializeAllUserCampaigns: async (userId) => {
44 | if (!userId) return;
45 |
46 | const { data, error } = await callApi>(`/campaign/user/${userId}`);
47 |
48 | if (error || !data?.data) return;
49 |
50 | set({ allUserCampaigns: data.data });
51 | },
52 |
53 | initializeCategories: async () => {
54 | const { data, error } =
55 | await callApi>("/campaign/categories");
56 |
57 | if (error || !data?.data) return;
58 |
59 | set({ categories: data.data });
60 | },
61 | } satisfies CampaignStore["actions"],
62 | }));
63 |
64 | export const useCampaignStore = (selector: SelectorFn) => {
65 | const state = useInitCampaignStore(useShallow(selector));
66 |
67 | return state;
68 | };
69 |
--------------------------------------------------------------------------------
/store/useSession.ts:
--------------------------------------------------------------------------------
1 | import type { ApiResponse, User } from "@/interfaces";
2 | import type { SessionData } from "@/interfaces/ApiResponses";
3 | import { callApi } from "@/lib";
4 | import { create } from "zustand";
5 | import { useShallow } from "zustand/react/shallow";
6 | import type { SelectorFn } from "./store-types";
7 | import { useInitCampaignStore } from "./useCampaignStore";
8 |
9 | type Session = {
10 | isFirstMount: boolean;
11 | loading: boolean;
12 | user: User | null;
13 |
14 | actions: {
15 | clearSession: () => void;
16 | updateUser: (data: User) => void;
17 | getSession: (isInitialLoad?: boolean) => Promise;
18 | };
19 | };
20 |
21 | const initialState = {
22 | loading: true,
23 | user: null,
24 | isFirstMount: false,
25 | };
26 |
27 | export const useInitSession = create()((set, get) => ({
28 | ...initialState,
29 |
30 | actions: {
31 | getSession: async (isInitialLoad) => {
32 | if (typeof isInitialLoad === "boolean") {
33 | set({ isFirstMount: true });
34 | }
35 |
36 | const { data } = await callApi>("/auth/session");
37 | useInitCampaignStore.getState().actions.initializeCampaigns(data?.data?.campaigns ?? []);
38 | void useInitCampaignStore.getState().actions.initializeCategories();
39 |
40 | set({
41 | ...(data?.data && { user: data.data.user }),
42 | loading: false,
43 | });
44 | },
45 |
46 | updateUser: (data) => set({ user: data }),
47 |
48 | clearSession: () => {
49 | set((state) => ({
50 | ...initialState,
51 | loading: false,
52 | isFirstMount: state.isFirstMount,
53 | }));
54 |
55 | const currentPageUrl = window.location.pathname;
56 |
57 | if (currentPageUrl !== "/signin" && currentPageUrl !== "/signup" && !get().isFirstMount) {
58 | window.location.replace("/signin?unauthorized=true");
59 | }
60 | },
61 | } satisfies Session["actions"],
62 | }));
63 |
64 | export const useSession = (selector: SelectorFn) => {
65 | const state = useInitSession(useShallow(selector));
66 |
67 | return state;
68 | };
69 |
--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 |
6 |
7 | body:has(.authenticatedUserLayoutMain[data-isopen="true"]) {
8 | overflow: hidden;
9 | }
10 |
11 | #__next {
12 | min-height: 100svh;
13 | height: 100%;
14 | display: flex;
15 | flex-direction: column;
16 | justify-content: space-between;
17 | }
18 |
19 | input[type="number"] {
20 | -webkit-appearance: textfield;
21 | appearance: textfield;
22 | }
23 |
24 |
25 |
26 | input[type="number"] {
27 | -moz-appearance: textfield;
28 | appearance: textfield;
29 | }
30 |
31 | input::-webkit-outer-spin-button,
32 | input::-webkit-inner-spin-button {
33 | -webkit-appearance: none;
34 | margin: 0;
35 | }
36 |
37 | input:-webkit-autofill,
38 | input:-webkit-autofill:focus {
39 | transition:
40 | background-color 600000s 0s,
41 | color 600000s 0s;
42 | }
43 |
44 | input[data-autocompleted] {
45 | background-color: transparent !important;
46 | }
47 |
--------------------------------------------------------------------------------
/todo.txt:
--------------------------------------------------------------------------------
1 | // These are observations and things needed to be done
2 |
3 | 18-June-2024
4 | 2. search is not working for campaign explore by category id
5 | 3. fix the preview for campaign and also do the rejection status show
6 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "allowSyntheticDefaultImports": true,
5 | "lib": ["dom", "dom.iterable", "esnext"],
6 | "allowJs": true,
7 | "skipLibCheck": true,
8 | "strict": true,
9 | "forceConsistentCasingInFileNames": true,
10 | "noEmit": true,
11 | "esModuleInterop": true,
12 | "module": "esnext",
13 | "baseUrl": "./",
14 | "moduleResolution": "node",
15 | "noImplicitAny": true,
16 | "resolveJsonModule": true,
17 | "noErrorTruncation": true, // Disables error and type truncation
18 | "verbatimModuleSyntax": true, // Automatically add "type" modifier to type import statements
19 | "isolatedModules": true,
20 | "incremental": true,
21 | "jsx": "preserve",
22 | "paths": {
23 | "@/*": ["./*"]
24 | }
25 | },
26 | "include": [
27 | "next-env.d.ts",
28 | "**/*.ts",
29 | "**/*.tsx",
30 | ".eslintrc.js",
31 | "next.config.js",
32 | "postcss.config.js",
33 | "prettier.config.js",
34 | "lint-staged.config.js"
35 | ],
36 | "exclude": ["node_modules"]
37 | }
38 |
--------------------------------------------------------------------------------