{fileRejections.map(({ file, errors }, index: number) => (
diff --git a/src/components/gallery/GallerySkeleton.tsx b/src/components/gallery/GallerySkeleton.tsx
deleted file mode 100644
index e6f3c0b..0000000
--- a/src/components/gallery/GallerySkeleton.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-"use client";
-
-import React from "react";
-import { Card, CardBody } from "@heroui/card";
-import { Skeleton } from "@heroui/skeleton";
-
-const GallerySkeleton: React.FC = () => {
- return (
- modal.onClose()}
- size="xl"
- scrollBehavior="inside"
- >
-
- {(onClose) => (
- <>
-
-
-
-
-
-
-
- modal.onClose()}
+ size="xl"
+ scrollBehavior="inside"
+ >
+
+ {(onClose) => (
+ <>
+
+
+
+
+
+
+
+
-
-
-
- );
-};
-
-export default GallerySkeleton;
diff --git a/src/components/gallery/index.ts b/src/components/gallery/index.ts
index 6ef6a45..8c65c10 100644
--- a/src/components/gallery/index.ts
+++ b/src/components/gallery/index.ts
@@ -2,4 +2,3 @@
export { default as FileUploadZone } from "./FileUploadZone";
export { default as AssetCard } from "./AssetCard";
export { default as AssetGrid } from "./AssetGrid";
-export { default as GallerySkeleton } from "./GallerySkeleton";
diff --git a/src/components/posts/modals/PostViewModal.tsx b/src/components/posts/modals/PostViewModal.tsx
index 630fa8c..44966b2 100644
--- a/src/components/posts/modals/PostViewModal.tsx
+++ b/src/components/posts/modals/PostViewModal.tsx
@@ -20,153 +20,158 @@ import { getQueryClient } from "@/lib/get-query-client";
import DeleteModal from "@/components/shared/DeleteModal";
export default function PostViewModal() {
- const modal = useViewPostModal();
- const deleteModal = useDeleteModal();
- const { data: session } = authClient.useSession();
- const qc = getQueryClient();
- const post = modal.extras?.post as Post | undefined;
- if (!post) return null;
+ const modal = useViewPostModal();
+ const deleteModal = useDeleteModal();
+ const { data: session } = authClient.useSession();
+ const qc = getQueryClient();
+ const post = modal.extras?.post as Post | undefined;
+ if (!post) return null;
- const platformInfo = getPlatform(post.platform);
-
- async function deletePost() {
- try {
- if (!post) return;
- await fetcher("DELETE", `/posts/${post.id}`);
- qc.invalidateQueries({
- queryKey: ["posts"],
- });
- modal.onClose();
- } catch (error) {
- console.error("Error deleting post:", error);
- addToast({
- title: "Problem deleting post",
- description: "There was an error deleting the post.",
- color: "danger",
- });
+ const platformInfo = getPlatform(post.platform);
+ async function deletePost() {
+ try {
+ if (!post) return;
+ await fetcher("DELETE", `/posts/${post.id}`);
+ qc.invalidateQueries({
+ queryKey: ["posts"],
+ });
+ modal.onClose();
+ } catch (error) {
+ console.error("Error deleting post:", error);
+ addToast({
+ title: "Problem deleting post",
+ description: "There was an error deleting the post.",
+ color: "danger",
+ });
+ }
}
- }
-
- return (
-
- {/* Filters and Search Skeleton */}
-
-
-
-
- {/* Assets Grid Skeleton */}
-
-
-
-
-
-
-
-
- {Array.from({ length: 8 }).map((_, index) => (
-
-
-
-
- ))}
-
-
-
-
-
-
-
-
-
- {post.status}
-
-
- - Post Details -
-
-
-
-
- {session?.user.name || "User"}
-- {moment(post.createdAt).fromNow()} -
-
-
+ return (
+ - {post.text} -
-
+
+ {post.status}
+
+
+ + Post Details +
+
+
+
+
+ + {session?.user.name || "User"} +
++ {moment( + post.createdAt, + ).fromNow()} +
+
+
- + {post.text} +
+
-
+
+
+
+
-
- {post.imageUrl && (
- 
+
+
+
+ {post.imageUrl && (
+
+ )}
+
+
+
+
+
+
-
-
-
- handleDateSelect(date)}
- className={cn(
- `${cellHeightClass} border border-default-200 p-1
+ return (
+
+
+ );
+ }
return (
-
-
- );
- }
- return (
-
handleDateSelect(date)}
+ className={cn(
+ `${cellHeightClass} border border-default-200 p-1
${isCurrentMonth ? "bg-background" : "bg-default-50"}
${isToday ? "bg-primary/20" : ""}
${isSelected ? "border-primary border-2" : ""}
cursor-pointer hover:border-primary transition-colors`,
- "flex flex-col justify-between"
- )}
- >
-
- );
- };
+ );
+ };
- if (isLoading) {
+ if (isLoading) {
+ return (
+
-
-
- {date.getDate()}
-
-
- {dayPosts.length > 0 && (
-
- {dayPosts.slice(0, postsToShow).map((post, i) => (
-
- )}
- {
- e.stopPropagation();
- openPostEditModal(post);
- }}
- className={`cursor-pointer bg-primary/10 ${size === "sm" ? "h-1.5 w-full" : "text-xs py-0.5 px-1 rounded flex items-center gap-1 truncate"}`}
- >
- {size !== "sm" && (
- <>
-
-
- {new Date(post.time).toLocaleTimeString([], {
- hour: "2-digit",
- minute: "2-digit",
- })}
-
-
- )}
-
- ))}
+ "flex flex-col justify-between",
+ )}
+ >
+
+
+
+
+ {date.getDate()}
+
+
- {dayPosts.length > postsToShow && size !== "sm" && +{dayPosts.length - postsToShow} more
}
+ {dayPosts.length > 0 && (
+
+ {dayPosts.slice(0, postsToShow).map((post, i) => (
+
+ )}
+ {
+ e.stopPropagation();
+ openPostEditModal(post);
+ }}
+ className={`cursor-pointer bg-primary/10 ${size === "sm" ? "h-1.5 w-full" : "text-xs py-0.5 px-1 rounded flex items-center gap-1 truncate"}`}
+ >
+ {size !== "sm" && (
+ <>
+
+
+ {new Date(
+ post.time,
+ ).toLocaleTimeString([], {
+ hour: "2-digit",
+ minute: "2-digit",
+ })}
+
+
+ )}
+
+ ))}
+
+ {dayPosts.length > postsToShow && size !== "sm" && (
+
+ +{dayPosts.length - postsToShow} more
+
+ )}
+
+ {dayPosts.length > 0 && (
+
+ {dayPosts.length}
+
+ )}
+
- {dayPosts.length > 0 && (
-
- {dayPosts.length}
-
- )}
-
-
-
-
-
- - {currentDate.toLocaleDateString("en-US", { - month: "long", - year: "numeric", - })} -
-
-
-
-
-
-
-
-
-
-
-
- {["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].map((day) => (
-
- {day}
+ (
- AssetSource.NONE
- );
- const [unsplashQuery, setUnsplashQuery] = useState("");
- const [galleryQuery, setGalleryQuery] = useState("");
- const [searchQuery, setSearchQuery] = useState("technology");
- const [page, setPage] = useState(1);
+ const [activeSource, setActiveSource] = useState(
+ AssetSource.NONE,
+ );
+ const [unsplashQuery, setUnsplashQuery] = useState("");
+ const [galleryQuery, setGalleryQuery] = useState("");
+ const [searchQuery, setSearchQuery] = useState("technology");
+ const [page, setPage] = useState(1);
- const { data: unsplashImages, isLoading: isUnsplashLoading } =
- useUnsplashImages({ query: searchQuery, page, pageSize: 6 }, true);
+ const { data: unsplashImages, isLoading: isUnsplashLoading } =
+ useUnsplashImages({ query: searchQuery, page, pageSize: 6 }, true);
- const { data: galleryImages, isLoading: isGalleryLoading } = useGalleryAssets(
- "default",
- {
- page,
- pageSize: 6,
- }
- );
+ const { data: galleryImages, isLoading: isGalleryLoading } =
+ useGalleryAssets("default", {
+ page,
+ pageSize: 6,
+ });
- // Select an Unsplash image
- const handleUnsplashImageSelect = useCallback(
- (url: string) => {
- if (isDisabled) return;
- onImageUploaded(url);
- },
- [isDisabled, onImageUploaded]
- );
+ // Select an Unsplash image
+ const handleUnsplashImageSelect = useCallback(
+ (url: string) => {
+ if (isDisabled) return;
+ onImageUploaded(url);
+ },
+ [isDisabled, onImageUploaded],
+ );
- // Handle tab change
- const handleTabChange = useCallback((key: React.Key) => {
- setActiveSource(key as AssetSource);
- setPage(1);
- }, []);
+ // Handle tab change
+ const handleTabChange = useCallback((key: React.Key) => {
+ setActiveSource(key as AssetSource);
+ setPage(1);
+ }, []);
- // Handle Unsplash search
- const handleUnsplashSearch = useCallback(async () => {
- setSearchQuery(unsplashQuery.trim()); // Update the search query to trigger the API call
- }, [unsplashQuery]);
+ // Handle Unsplash search
+ const handleUnsplashSearch = useCallback(async () => {
+ setSearchQuery(unsplashQuery.trim()); // Update the search query to trigger the API call
+ }, [unsplashQuery]);
- const handleGallerySearch = useCallback(async () => {
- setSearchQuery(galleryQuery.trim()); // Update the search query to trigger the API call
- }, [galleryQuery]);
+ const handleGallerySearch = useCallback(async () => {
+ setSearchQuery(galleryQuery.trim()); // Update the search query to trigger the API call
+ }, [galleryQuery]);
- const filteredGalleryImages =
- galleryImages?.assets.filter((asset) =>
- asset.title.toLowerCase().includes(galleryQuery.toLowerCase())
- ) || [];
+ const filteredGalleryImages =
+ galleryImages?.assets.filter((asset) =>
+ asset.title.toLowerCase().includes(galleryQuery.toLowerCase()),
+ ) || [];
- // Render current image
- const renderCurrentImage = () => {
- if (!currentImageUrl) return null;
+ // Render current image
+ const renderCurrentImage = () => {
+ if (!currentImageUrl) return null;
- return (
-
+ setIsPostEditModalOpen(isOpen)}
- openPostEditModal={openPostEditModal}
- closePostEditModal={() => {
- setIsPostEditModalOpen(false);
- setSelectedPost(null);
- }}
- selectedPost={selectedPost}
- selectedDate={selectedDate}
- posts={getPostsForSelectedDate()}
- />
-
- );
+ );
};
export default CalendarView;
diff --git a/src/components/schedules/ImageSelectionZone.tsx b/src/components/schedules/ImageSelectionZone.tsx
index 3215b86..98f3d62 100644
--- a/src/components/schedules/ImageSelectionZone.tsx
+++ b/src/components/schedules/ImageSelectionZone.tsx
@@ -7,329 +7,342 @@ import { Input } from "@heroui/input";
import { Spinner } from "@heroui/spinner";
import { Tab, Tabs } from "@heroui/tabs";
import {
- ArrowLeft,
- ArrowRight,
- Search,
- SearchIcon,
- Trash2,
+ ArrowLeft,
+ ArrowRight,
+ Search,
+ SearchIcon,
+ Trash2,
} from "lucide-react";
import React, { useCallback, useState } from "react";
import { FileUploadZone } from "../gallery";
import { Button } from "@heroui/button";
import { useGalleryAssets } from "@/hooks/data/use-assets";
+import Image from "next/image";
interface ImageSelectionZone {
- currentImageUrl: string | null;
- onImageUploaded: (imageUrl: string) => void;
- onImageRemoved: () => void;
- isDisabled?: boolean;
+ currentImageUrl: string | null;
+ onImageUploaded: (imageUrl: string) => void;
+ onImageRemoved: () => void;
+ isDisabled?: boolean;
}
export default function ImageSelectionZone({
- currentImageUrl,
- onImageUploaded,
- onImageRemoved,
- isDisabled = false,
+ currentImageUrl,
+ onImageUploaded,
+ onImageRemoved,
+ isDisabled = false,
}: ImageSelectionZone) {
- const [activeSource, setActiveSource] = useState
+
- ))}
- {Array.from({ length: 35 }, (_, i) => {
- // Calculate the date for this cell
- const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
- const dayOffset = i - firstDayOfMonth.getDay();
- const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), dayOffset + 1);
+ + {currentDate.toLocaleDateString("en-US", { + month: "long", + year: "numeric", + })} +
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 35 }, (_, i) => {
+ // Calculate the date for this cell
+ const firstDayOfMonth = new Date(
+ currentDate.getFullYear(),
+ currentDate.getMonth(),
+ 1,
+ );
+ const dayOffset = i - firstDayOfMonth.getDay();
+ const date = new Date(
+ currentDate.getFullYear(),
+ currentDate.getMonth(),
+ dayOffset + 1,
+ );
-
+ {[
+ "Sunday",
+ "Monday",
+ "Tuesday",
+ "Wednesday",
+ "Thursday",
+ "Friday",
+ "Saturday",
+ ].map((day) => (
+
-
+ {day}
+
+ ))}
- return renderCalendarCell(date, i, "lg");
- })}
-
-
-
-
- {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (
-
- ))}
- {Array.from({ length: 35 }, (_, i) => {
- // Calculate the date for this cell
- const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
- const dayOffset = i - firstDayOfMonth.getDay();
- const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1 + dayOffset);
+
- {day}
+ return renderCalendarCell(date, i, "lg");
+ })}
+
+
+ {Array.from({ length: 35 }, (_, i) => {
+ // Calculate the date for this cell
+ const firstDayOfMonth = new Date(
+ currentDate.getFullYear(),
+ currentDate.getMonth(),
+ 1,
+ );
+ const dayOffset = i - firstDayOfMonth.getDay();
+ const date = new Date(
+ currentDate.getFullYear(),
+ currentDate.getMonth(),
+ 1 + dayOffset,
+ );
-
+ {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map(
+ (day) => (
+
-
+ {day}
+
+ ),
+ )}
- return renderCalendarCell(date, i, "md");
- })}
-
-
+ setIsPostEditModalOpen(isOpen)
+ }
+ openPostEditModal={openPostEditModal}
+ closePostEditModal={() => {
+ setIsPostEditModalOpen(false);
+ setSelectedPost(null);
+ }}
+ selectedPost={selectedPost}
+ selectedDate={selectedDate}
+ posts={getPostsForSelectedDate()}
+ />
-
- {["S", "M", "T", "W", "T", "F", "S"].map((day, i) => (
-
- ))}
- {Array.from({ length: 35 }, (_, i) => {
- // Calculate the date for this cell
- const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
- const dayOffset = i - firstDayOfMonth.getDay();
- const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1 + dayOffset);
+
- {day}
+ return renderCalendarCell(date, i, "md");
+ })}
+
+
+
+
+ {["S", "M", "T", "W", "T", "F", "S"].map((day, i) => (
+
+
+ {day}
+
+ ))}
- return renderCalendarCell(date, i, "sm");
- })}
+ {Array.from({ length: 35 }, (_, i) => {
+ // Calculate the date for this cell
+ const firstDayOfMonth = new Date(
+ currentDate.getFullYear(),
+ currentDate.getMonth(),
+ 1,
+ );
+ const dayOffset = i - firstDayOfMonth.getDay();
+ const date = new Date(
+ currentDate.getFullYear(),
+ currentDate.getMonth(),
+ 1 + dayOffset,
+ );
+
+ return renderCalendarCell(date, i, "sm");
+ })}
+
- 
- {!isDisabled && (
-
- )}
-
- );
- };
+ return (
+
+
+ );
+ };
- // Render gallery tab content
- const renderGalleryTab = () => {
- if (isGalleryLoading) {
- return (
-
-
- );
- }
+ // Render gallery tab content
+ const renderGalleryTab = () => {
+ if (isGalleryLoading) {
+ return (
+
+
+ );
+ }
- if (galleryImages && galleryImages.assets.length === 0) {
- return (
-
- = ({
- openPostEditModal,
- selectedDate,
- posts,
- isPostEditModalOpen,
- selectedPost,
- closePostEditModal,
+ openPostEditModal,
+ selectedDate,
+ posts,
+ isPostEditModalOpen,
+ selectedPost,
+ closePostEditModal,
}) => {
- const handleCreateNewPost = () => {
- addToast({
- title: "This feature is coming soon!",
- color: "primary",
- description: "You will be able to create new posts soon.",
- });
- };
+ const handleCreateNewPost = () => {
+ addToast({
+ title: "This feature is coming soon!",
+ color: "primary",
+ description: "You will be able to create new posts soon.",
+ });
+ };
- return (
-
- setGalleryQuery(e.target.value)}
- placeholder="Search in gallery"
- className="flex-1"
- variant="faded"
- startContent={
+ return (
+
+
- );
- };
+ const renderUnsplashTab = () => {
+ return (
+
+ setGalleryQuery(e.target.value)}
+ placeholder="Search in gallery"
+ className="flex-1"
+ variant="faded"
+ startContent={
-
- {galleryImages &&
- filteredGalleryImages.map((asset) => (
- handleUnsplashImageSelect(asset.url)}
- >
- 
-
- ))}
+
+ );
+ };
- {galleryImages && galleryImages.totalPages > 1 && (
-
+ {galleryImages &&
+ filteredGalleryImages.map((asset) => (
+
+ handleUnsplashImageSelect(asset.url)
+ }
+ >
+
+
+ ))}
+
+ {galleryImages && galleryImages.assets.length === 0 && (
+
- {galleryImages && galleryImages.assets.length === 0 && (
-
+ No images found. Upload some images to get started.
+
+ )}
+
- No images found. Upload some images to get started.
+ {galleryImages && galleryImages.totalPages > 1 && (
+
- )}
-
+
+
+
+ )}
-
-
-
- )}
-
+
- );
- };
+ // Render "none" tab content
+ const renderNoneTab = () => {
+ return (
+
+ setUnsplashQuery(e.target.value)}
+ placeholder="Search Unsplash images"
+ className="flex-1"
+ variant="faded"
+ startContent={
- const renderUnsplashTab = () => {
- return (
-
-
+ );
+ };
-
- setUnsplashQuery(e.target.value)}
- placeholder="Search Unsplash images"
- className="flex-1"
- variant="faded"
- startContent={
+ {isUnsplashLoading ? (
+
+
+ ) : (
+
+ {unsplashImages &&
+ unsplashImages.map((image) => (
+
+ handleUnsplashImageSelect(
+ image.urls.regular,
+ )
+ }
+ >
+ 
+
+ ))}
- {isUnsplashLoading ? (
-
- )}
+
-
- ) : (
-
- {unsplashImages &&
- unsplashImages.map((image) => (
- handleUnsplashImageSelect(image.urls.regular)}
- >
-
-
- ))}
+ {unsplashImages && unsplashImages.length === 0 && (
+
+ )}
- {unsplashImages && unsplashImages.length === 0 && (
-
+ {searchQuery
+ ? `No images found for "${searchQuery}". Try a different query.`
+ : "Enter a search term to find images."}
+
+ )}
+
- {searchQuery
- ? `No images found for "${searchQuery}". Try a different query.`
- : "Enter a search term to find images."}
-
- )}
-
+
+
+
+
-
-
-
-
+ No image will be used for this post.
+
+ );
+ };
- // Render "none" tab content
- const renderNoneTab = () => {
return (
-
- No image will be used for this post.
-
- );
- };
-
- return (
-
- {currentImageUrl ? (
- renderCurrentImage()
- ) : (
- );
+ );
}
diff --git a/src/components/schedules/PostList.tsx b/src/components/schedules/PostList.tsx
index f076b7b..35c291a 100644
--- a/src/components/schedules/PostList.tsx
+++ b/src/components/schedules/PostList.tsx
@@ -8,92 +8,93 @@ import EditPostModal from "./modal/EditPostModal";
import { addToast } from "@heroui/toast";
interface PostListProps {
- selectedDate: Date;
- posts: SchedulePost[];
- openPostEditModal: (post: SchedulePost) => void;
- isPostEditModalOpen: boolean;
- setIsPostEditModalOpen: (isOpen: boolean) => void;
- closePostEditModal: () => void;
- selectedPost: SchedulePost | null;
+ selectedDate: Date;
+ posts: SchedulePost[];
+ openPostEditModal: (post: SchedulePost) => void;
+ isPostEditModalOpen: boolean;
+ setIsPostEditModalOpen: (isOpen: boolean) => void;
+ closePostEditModal: () => void;
+ selectedPost: SchedulePost | null;
}
const PostList: React.FC
-
-
- {renderGalleryTab()}
-
-
- {renderUnsplashTab()}
-
- onImageRemoved()}
- >
- {renderNoneTab()}
-
-
+ {currentImageUrl ? (
+ renderCurrentImage()
+ ) : (
+
- )}
-
+
+
+ {renderGalleryTab()}
+
+
+ {renderUnsplashTab()}
+
+ onImageRemoved()}
+ >
+ {renderNoneTab()}
+
+
+
+ )}
- = ({
- post,
- openPostEditModal,
+ post,
+ openPostEditModal,
}) => {
- const { color, icon, label } = getStatusInfo(post.status);
- const isEditable = ["DRAFTING", "DRAFT", "READY"].includes(post.status);
+ const { color, label } = getStatusInfo(post.status);
+ const isEditable = ["DRAFTING", "DRAFT", "READY", "PUBLISHED"].includes(
+ post.status,
+ );
- return (
- isEditable && openPostEditModal(post)}
- shadow="none"
- className={cn(
- "w-full",
- isEditable ? "hover:border-primary cursor-pointer" : "opacity-90"
- )}
- >
-
+ );
};
export default PostListItem;
diff --git a/src/components/schedules/forms/CreateScheduleForm.tsx b/src/components/schedules/forms/CreateScheduleForm.tsx
index 6cfca18..1eb7bbf 100644
--- a/src/components/schedules/forms/CreateScheduleForm.tsx
+++ b/src/components/schedules/forms/CreateScheduleForm.tsx
@@ -1,8 +1,16 @@
+"use client";
+
import React from "react";
-import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@heroui/modal";
+import {
+ Modal,
+ ModalContent,
+ ModalHeader,
+ ModalBody,
+ ModalFooter,
+} from "@heroui/modal";
import { Select, SelectItem } from "@heroui/select";
-import { Input } from "@heroui/input";
+import { Input, Textarea } from "@heroui/input";
import { DateRangePicker } from "@heroui/date-picker";
import { parseDate } from "@internationalized/date";
@@ -21,6 +29,8 @@ import { addToast } from "@heroui/toast";
import { AssetSource } from "@/hooks/data/use-schedules";
import { timezones } from "@/lib/timezones";
import { authClient } from "@/lib/auth-client";
+import { Chip } from "@heroui/chip";
+import { ArrowLeftIcon, ArrowRightIcon, PlusIcon, X } from "lucide-react";
export interface ScheduleFormModalProps {
isOpen: boolean;
@@ -36,10 +46,22 @@ const scheduleSchema = z
title: z.string().min(1, "Schedule name is required"),
platform: z.string().min(1, "Platform is required"),
timezone: z.string(),
+
startDate: z.date(),
endDate: z.date(),
- postTimes: z.array(z.instanceof(Time)).nonempty("At least one time is required"),
- assetSource: z.nativeEnum(AssetSource),
+
+ postTimes: z
+ .array(z.instanceof(Time))
+ .nonempty("At least one time is required"),
+
+ assetSource: z.enum(AssetSource),
+ unsplashTags: z.array(z.string().optional()),
+
+ postType: z.enum(["IMAGE", "TEXT"], {
+ error: "Post type is required",
+ }),
+
+ prompt: z.string().optional(),
})
.refine((data) => data.endDate >= data.startDate, {
message: "End date must be after start date",
@@ -48,13 +70,33 @@ const scheduleSchema = z
type ScheduleFormValues = z.infer;
-export function ScheduleFormModal({ isOpen, onOpenChange }: ScheduleFormModalProps) {
+const stepFormConfig = {
+ 1: ["title", "platform"] as const,
+ 2: ["postType", "assetSource", "unsplashTags", "prompt"] as const,
+ 3: ["startDate", "endDate", "timezone"] as const,
+ 4: ["postTimes"] as const,
+};
+
+export function ScheduleFormModal({
+ isOpen,
+ onOpenChange,
+}: ScheduleFormModalProps) {
const { data: providersData } = useProviders();
const { data: user } = authClient.useSession();
+ const [steps, setSteps] = React.useState(1);
+ const totalSteps = Object.keys(stepFormConfig).length;
+
const [isLoading, setIsLoading] = React.useState(false);
const router = useRouter();
- const connectedProviders = Object.entries(REQUIRED_PROVIDER_CONNECTION).filter(([key]) => providersData?.some((p) => p.provider.toLowerCase() === key));
+ const connectedProviders = Object.entries(
+ REQUIRED_PROVIDER_CONNECTION
+ ).filter(([key]) =>
+ providersData?.some(
+ (p) =>
+ p.provider.toLowerCase() === key && p.provider.toLowerCase() != "google"
+ )
+ );
const availablePlatforms = connectedProviders.map(([key, provider]) => ({
value: key.toUpperCase(),
@@ -67,12 +109,13 @@ export function ScheduleFormModal({ isOpen, onOpenChange }: ScheduleFormModalPro
resolver: zodResolver(scheduleSchema),
defaultValues: {
title: "",
- platform: "",
- timezone: (user?.user as any)?.settings?.timezone || "UTC",
startDate: new Date(),
+ timezone: (user?.user as any)?.settings?.timezone || "UTC",
endDate: new Date(new Date().setDate(new Date().getDate() + 7)),
postTimes: [new Time(9, 0, 0)],
- assetSource: AssetSource.UNSPLASH,
+ assetSource: AssetSource.NONE,
+ unsplashTags: ["technology"],
+ prompt: "",
},
mode: "onChange",
});
@@ -83,8 +126,47 @@ export function ScheduleFormModal({ isOpen, onOpenChange }: ScheduleFormModalPro
formState: { errors },
} = form;
+ const isNextStepDisabled = () => {
+ const live = form.watch();
+
+ const currentStepFields = stepFormConfig[steps];
+ const optionalFields = ["unsplashTags", "prompt"];
+
+ // check if current includes optional fields
+ if (currentStepFields.some((field) => optionalFields.includes(field))) {
+ // If any of the optional fields are present, only require the non-optional fields to be filled
+ return !currentStepFields.every(
+ (field) =>
+ optionalFields.includes(field) ||
+ (!errors[field] && live[field] && live[field] !== "")
+ );
+ }
+
+ // If all fields in the current step are optional, enable Next button
+ console.log("Current Step Fields:", currentStepFields);
+ console.log("Live Values:", live);
+
+ // parse and check of details are filled and optional
+ return !currentStepFields.every(
+ (field) => !errors[field] && live[field] && live[field] !== ""
+ );
+ };
+
const onSubmit = async (data: ScheduleFormValues) => {
try {
+ if (steps < totalSteps) {
+ setSteps((steps + 1) as keyof typeof stepFormConfig);
+ return;
+ }
+
+ if (connectedProviders.length === 0) {
+ addToast({
+ title: "Please connect at least one platform",
+ color: "danger",
+ });
+ return;
+ }
+
setIsLoading(true);
const scheduleId = await fetcher("POST", "/schedules", {
@@ -110,163 +192,555 @@ export function ScheduleFormModal({ isOpen, onOpenChange }: ScheduleFormModalPro
}
};
- return (
-
-
-
+ return (
+ - Posts for{" "} - {selectedDate.toLocaleDateString("en-US", { - weekday: "long", - month: "long", - day: "numeric", - })} -
- } - onPress={() => handleCreateNewPost()} - > - New Post - -
+ {
+ closePostEditModal();
+ }}
+ post={selectedPost}
+ />
+
+ );
};
export default PostList;
diff --git a/src/components/schedules/PostListItem.tsx b/src/components/schedules/PostListItem.tsx
index 0bb1f8a..5781654 100644
--- a/src/components/schedules/PostListItem.tsx
+++ b/src/components/schedules/PostListItem.tsx
@@ -5,184 +5,192 @@ import { Chip } from "@heroui/chip";
import { SchedulePost } from "@/hooks/data/use-schedules";
import { getPlatform } from "@/lib/icons";
import {
- CheckIcon,
- EditIcon,
- FileEditIcon,
- Clock,
- Loader,
- CheckCircle,
- AlertTriangle,
- XCircle,
+ CheckIcon,
+ EditIcon,
+ FileEditIcon,
+ Clock,
+ Loader,
+ CheckCircle,
+ AlertTriangle,
+ XCircle,
} from "lucide-react";
import { cn } from "@/lib/utils";
+import Image from "next/image";
interface PostListItemProps {
- post: SchedulePost;
- openPostEditModal: (post: SchedulePost) => void;
+ post: SchedulePost;
+ openPostEditModal: (post: SchedulePost) => void;
}
// Format date for display
const formatDate = (date: Date) => {
- return new Date(date).toLocaleString("en-US", {
- month: "short",
- day: "numeric",
- hour: "2-digit",
- minute: "2-digit",
- });
+ return new Date(date).toLocaleString("en-US", {
+ month: "short",
+ day: "numeric",
+ hour: "2-digit",
+ minute: "2-digit",
+ });
};
const getStatusInfo = (status: string) => {
- const statusMap: Record<
- string,
- { color: string; icon: React.ReactNode; label: string }
- > = {
- DRAFTING: {
- color: "secondary",
- icon:
+
- + Posts for{" "} + {selectedDate.toLocaleDateString("en-US", { + weekday: "long", + month: "long", + day: "numeric", + })} +
+ } + onPress={() => handleCreateNewPost()} + > + New Post + +
- {posts.length > 0 ? (
- posts.map((post, i) => (
- {
- closePostEditModal();
- }}
- post={selectedPost}
- />
-
- );
+
-
-
+ {posts.length > 0 ? (
+ posts.map((post, i) => (
+
- ))
- ) : (
-
+
+ ))
+ ) : (
+
+
+ )}
+ No posts scheduled for this date +
+ } + onPress={() => handleCreateNewPost()} + > + Create Post + +
-
- )}
- No posts scheduled for this date
- } - onPress={() => handleCreateNewPost()} - > - Create Post - -
-
+
-
-
-
-
- {label}
-
-
- {formatDate(post.time)}
-
-
-
- {React.createElement(getPlatform(post.platform).icon)}
- {post.platform}
-
-
- {post.imageUrl && (
-
+ >
+
-
-
- )}
-
- {post.status === "DRAFTING" && post.text === "" ? (
-
- AI Generated
-
+ return (
+ isEditable && openPostEditModal(post)}
+ shadow="none"
+ className={cn(
+ "w-full",
+ isEditable
+ ? "hover:border-primary cursor-pointer"
+ : "opacity-90",
)}
-
- - Click to add content to this post -
- ) : ( -- {post.text} -
- )} - {post.isAIgenerated && ( -
+
-
- );
+ {post.errorMessage && (
+
+
- {post.errorMessage && (
-
+
+ {label}
+
+
+ {formatDate(post.time)}
+
+
+
+ {React.createElement(getPlatform(post.platform).icon)}
+
+ {post.platform}
+
+
+
-
- )}
+
+ {post.imageUrl && (
+
- {!isEditable && post.status !== "PUBLISHED" && (
-
+
+ )}
+
+ {post.status === "DRAFTING" && post.text === "" ? (
+
+ AI Generated
+
+ )}
+
+ + Click to add content to this post +
+ ) : ( ++ {post.text} +
+ )} + {post.isAIgenerated && ( +
- {post.status === "SCHEDULED" &&
- "This post is scheduled and cannot be edited"}
- {post.status === "PUBLISHING" &&
- "This post is currently being published"}
- {post.status === "FAILED" && "This post failed to publish"}
- {post.status === "CANCELED" && "This post has been canceled"}
-
- )}
-
+
+ )}
+
+ {!isEditable && post.status !== "PUBLISHED" && (
+
+ {post.status === "SCHEDULED" &&
+ "This post is scheduled and cannot be edited"}
+ {post.status === "PUBLISHING" &&
+ "This post is currently being published"}
+ {post.status === "FAILED" &&
+ "This post failed to publish"}
+ {post.status === "CANCELED" &&
+ "This post has been canceled"}
+
+ )}
+