Merge pull request #26 from ngure1/ngure1/refactor-pages

Ngure1/refactor pages
Javan-Odhiambo · May 30, 2024 · cee3472 · cee3472
2 parents 436fb74 + d96bb23
commit cee3472
Show file tree

Hide file tree

Showing 13 changed files with 498 additions and 378 deletions.
diff --git a/src/app/auth/activate/resend/page.tsx b/src/app/auth/activate/resend/page.tsx
@@ -56,12 +56,9 @@ const Page = () => {
 	//
 	return (
 		<div className="max-w-[500px] w-[400px] absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 border py-9 px-4 rounded-2xl">
-			<h1 className="text-xl font-semibold text-center">Reset</h1>
+			<h1 className="text-xl font-semibold text-center">Resend Email</h1>
 			<Form {...form}>
-				<form
-					onSubmit={form.handleSubmit(onSubmit)}
-					className="space-y-8"
-				>
+				<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
 					<FormField
 						control={form.control}
 						name="email"

diff --git a/src/app/auth/password-reset-confirm/[uid]/[token]/page.tsx b/src/app/auth/password-reset-confirm/[uid]/[token]/page.tsx
@@ -79,15 +79,15 @@ const ResetPasswordPage = ({ params }: { params: Params }) => {
 
 	return (
 		<div className="max-w-[500px] w-[400px] absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 border py-9 px-4 rounded-2xl">
-			<h1 className="text-xl font-semibold text-center">Reset</h1>
+			<h1 className="text-xl font-semibold text-center">Reset Password</h1>
 			<Form {...form}>
 				<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
 					<FormField
 						control={form.control}
 						name="new_password"
 						render={({ field }) => (
 							<FormItem>
-								<FormLabel className="requred">New Password</FormLabel>
+								<FormLabel className="required">New Password</FormLabel>
 								<FormControl>
 									<Input
 										type="password"

diff --git a/src/app/auth/username-reset-confirm/[uid]/[token]/page.tsx b/src/app/auth/username-reset-confirm/[uid]/[token]/page.tsx
@@ -80,7 +80,7 @@ const Page = ({ params }: { params: Params }) => {
 	//
 	return (
 		<div className="max-w-[500px] w-[400px] absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 border py-9 px-4 rounded-2xl">
-			<h1 className="text-xl font-semibold text-center">Reset</h1>
+			<h1 className="text-xl font-semibold text-center">Reset Email</h1>
 			<Form {...form}>
 				<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
 					<FormField

diff --git a/src/app/dashboard/bookmarks/page.tsx b/src/app/dashboard/bookmarks/page.tsx
@@ -1,12 +1,12 @@
-"use client"
-import React from 'react'
-import { useInnovationsBookmarksListQuery } from '@/redux/features/innovations/innovationsApiSlice';
-import ProjectCard from '@/components/ui/projectcard';
+"use client";
+import React from "react";
+import { useInnovationsBookmarksListQuery } from "@/redux/features/innovations/innovationsApiSlice";
+import ProjectCard from "@/components/ui/projectcard";
 const BookmarkPage = () => {
 	const { data: bookmarksList, isLoading: bookmarkIsLoading } =
 		useInnovationsBookmarksListQuery(null);
 	console.log(bookmarksList);
-  return (
+	return (
 		<main>
 			<section className="flex flex-wrap mx-auto gap-4 p-4">
 				{bookmarkIsLoading ? (
@@ -25,7 +25,7 @@ const BookmarkPage = () => {
 								author_last_name={user.last_name}
 								project_title={innovation.title}
 								project_description={innovation.description}
-								dashboard_banner_image_url={innovation.banner_image}
+								dashboard_image_url={innovation.dashboard_image}
 								likes_count={innovation.likes_number}
 								comments_count={innovation.comments_number}
 								is_liked={innovation.is_liked}
@@ -37,6 +37,6 @@ const BookmarkPage = () => {
 			</section>
 		</main>
 	);
-}
+};
 
-export default BookmarkPage
+export default BookmarkPage;
diff --git a/src/app/dashboard/innovation/[id]/page.tsx b/src/app/dashboard/innovation/[id]/page.tsx
@@ -173,7 +173,7 @@ const InnovationDetailPage = ({ params }: InnovationDetailPageProps) => {
 				<div className="flex items-center justify-between mt-5 px-4 ">
 					<div className="flex items-center gap-3">
 						<Avatar className="h-12 w-12">
-							<AvatarImage src={innovation?.author.profile_image} />
+							<AvatarImage src={innovation?.author.profile_picture} />
 							<AvatarFallback className="p-2">
 								{get_fallback_name(
 									innovation?.author.first_name,
@@ -188,21 +188,18 @@ const InnovationDetailPage = ({ params }: InnovationDetailPageProps) => {
 					</div>
 
 					<div className="flex gap-2 md:gap-4">
-						{
-							innovation?.dashboard_link &&
+						{innovation?.dashboard_link && (
 							<Link href={innovation?.dashboard_link || ""}>
 								<Button className="rounded-full md:px-9"> Visit </Button>
 							</Link>
-						}
-						{
-							innovation?.dashboard_definition &&
-							<Link download href={innovation.dashboard_definition}>
+						)}
+						{innovation?.dashboard_definitions && (
+							<Link download href={innovation.dashboard_definitions}>
 								<Button className="rounded-full" variant={"outline"}>
 									Download Datasets
 								</Button>
 							</Link>
-						}
-
+						)}
 					</div>
 				</div>
 				<div className="flex p-4 my-2 justify-between bg-accent">
@@ -237,12 +234,12 @@ const InnovationDetailPage = ({ params }: InnovationDetailPageProps) => {
 				</div>
 			</section>
 			<section>
-				{innovation?.banner_image ? (
+				{innovation?.dashboard_image ? (
 					<Image
 						alt="Innovation Image"
 						width={500}
 						height={600}
-						src={innovation?.banner_image}
+						src={innovation?.dashboard_image}
 					/>
 				) : (
 					<></>
@@ -283,8 +280,13 @@ const InnovationDetailPage = ({ params }: InnovationDetailPageProps) => {
 						<div className="flex items-center justify-between">
 							<div className="flex items-center gap-3">
 								<Avatar className="h-12 w-12">
-									<AvatarImage src="https://github.com/shadcn.png" />
-									<AvatarFallback className="p-2">CN</AvatarFallback>
+									<AvatarImage src={comment.author.profile_picture} />
+									<AvatarFallback className="p-2">
+										{get_fallback_name(
+											innovation?.author.first_name,
+											innovation?.author.last_name
+										)}
+									</AvatarFallback>
 								</Avatar>
 								<div>
 									<p>
@@ -325,7 +327,6 @@ const InnovationDetailPage = ({ params }: InnovationDetailPageProps) => {
 					onNext={handleNext}
 				/>
 			</section>
-
 		</main>
 	);
 };

diff --git a/src/app/dashboard/innovation/edit/[id]/page.tsx b/src/app/dashboard/innovation/edit/[id]/page.tsx
@@ -55,22 +55,24 @@ const InnovationSchema = z.object({
 		})
 		.min(1)
 		.max(3),
-	banner_image: z
-		.instanceof(FileListType)
-		.optional()
-		.refine((file) => file == null || file?.length == 1, "File is required."),
+	dashboard_type: z.string().min(1).max(3).optional(),
+	// banner_image: z
+	//   .instanceof(FileListType)
+	//   .optional()
+	//   .refine((file) => file == null || file?.length == 1, "File is required."),
 
 	//banner_image
 	dashboard_link: z
 		.string({
 			required_error: "Dashboard Link is required",
 		})
 		.url(),
+	dashboard_id: z.string().url().optional(),
 	dashboard_image: z
 		.instanceof(FileListType)
 		.optional()
 		.refine((file) => file == null || file?.length == 1, "File is required."),
-	dashboard_definition: z
+	dashboard_definitions: z
 		.instanceof(FileListType)
 		.optional()
 		.refine((file) => file == null || file?.length == 1, "File is required."),
@@ -81,7 +83,7 @@ interface Params {
 	id: string;
 }
 
-const EditInnovationPage = ({ params }: { params: Params }) => {
+const InnovationPage = ({ params }: { params: Params }) => {
 	const id = params.id;
 
 	const {
@@ -94,18 +96,19 @@ const EditInnovationPage = ({ params }: { params: Params }) => {
 		title: innovationData?.title,
 		description: innovationData?.description,
 		status: innovationData?.status,
+		dashboard_type: innovationData?.dashboard_type,
 		dashboard_link: innovationData?.dashboard_link || "",
-		banner_image: undefined,
+		// banner_image: undefined,
 		dashboard_image: undefined,
-		dashboard_definition: undefined,
+		dashboard_definitions: undefined,
 	};
 
 	const form = useForm<Innovation>({
 		defaultValues: {
 			...defaultValues,
-			banner_image: undefined as FileList | undefined,
+			// banner_image: undefined as FileList | undefined,
 			dashboard_image: undefined as FileList | undefined,
-			dashboard_definition: undefined as FileList | undefined,
+			dashboard_definitions: undefined as FileList | undefined,
 		},
 		resolver: zodResolver(InnovationSchema),
 	});
@@ -114,20 +117,24 @@ const EditInnovationPage = ({ params }: { params: Params }) => {
 		if (innovationData) {
 			form.reset({
 				...InnovationSchema.omit({
-					banner_image: true,
+					// banner_image: true,
+					dashboard_image: true,
+					dashboard_definitions: true,
+					dashboard_type: true,
 					status: true,
 				}).parse({
 					title: innovationData.title,
 					description: innovationData.description,
 					dashboard_link: innovationData.dashboard_link,
 				}),
-				banner_image: undefined, // or set a default value if needed
+				// banner_image: undefined, // or set a default value if needed
 				dashboard_image: undefined,
-				dashboard_definition: undefined,
+				dashboard_definitions: undefined,
 			});
 
 			setTimeout(() => {
-				form.setValue("status",innovationData.status);
+				form.setValue("status", innovationData.status);
+				form.setValue("dashboard_type", innovationData.dashboard_type);
 			}, 0);
 		}
 	}, [innovationData]);
@@ -166,7 +173,7 @@ const EditInnovationPage = ({ params }: { params: Params }) => {
 		// <RequireAuth>
 		<div className="px-5 md:px-20">
 			<h1 className="font-semibold text-lg text-center my-5">
-				Create a New Innovation
+				Edit Innovation
 			</h1>
 
 			<Form {...form}>
@@ -222,17 +229,45 @@ const EditInnovationPage = ({ params }: { params: Params }) => {
 
 					<FormField
 						control={form.control}
-						name="banner_image"
+						name="dashboard_type"
 						render={({ field }) => (
 							<FormItem>
-								<FormLabel className="required">Banner image</FormLabel>
-								<FileInput {...form.register("banner_image")} />
+								<FormLabel>Dashboard Type</FormLabel>
+								<Select
+									onValueChange={field.onChange}
+									defaultValue={field.value}
+								>
+									<FormControl>
+										<SelectTrigger>
+											<SelectValue placeholder="Select innovation type" />
+										</SelectTrigger>
+									</FormControl>
+									<SelectContent>
+										<SelectItem value="S">Superset</SelectItem>
+										<SelectItem value="M">Metabase</SelectItem>
+										<SelectItem value="P">Power BI</SelectItem>
+										<SelectItem value="O">Other</SelectItem>
+									</SelectContent>
+								</Select>
 								<FormDescription></FormDescription>
 								<FormMessage />
 							</FormItem>
 						)}
 					/>
 
+					{/* <FormField
+            control={form.control}
+            name="banner_image"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="required">Banner image</FormLabel>
+                <FileInput {...form.register("banner_image")} />
+                <FormDescription></FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          /> */}
+
 					<FormField
 						control={form.control}
 						name="description"
@@ -274,12 +309,31 @@ const EditInnovationPage = ({ params }: { params: Params }) => {
 						)}
 					/>
 
+					<FormField
+						control={form.control}
+						name="dashboard_id"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Dashboard Embed id</FormLabel>
+								<FormControl>
+									<Input
+										placeholder="Dashboard embed id"
+										{...field}
+										value={field.value || ""}
+									/>
+								</FormControl>
+								<FormDescription></FormDescription>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+
 					<FormField
 						control={form.control}
 						name="dashboard_image"
 						render={({ field }) => (
 							<FormItem>
-								<FormLabel>Dashboard image</FormLabel>
+								<FormLabel className="required">Dashboard image</FormLabel>
 								<FileInput {...form.register("dashboard_image")} />
 								<FormDescription></FormDescription>
 								<FormMessage />
@@ -289,11 +343,11 @@ const EditInnovationPage = ({ params }: { params: Params }) => {
 
 					<FormField
 						control={form.control}
-						name="dashboard_definition"
+						name="dashboard_definitions"
 						render={({ field }) => (
 							<FormItem>
-								<FormLabel>Dashboard Definition</FormLabel>
-								<FileInput {...form.register("dashboard_definition")} />
+								<FormLabel className="required">Dashboard Definition</FormLabel>
+								<FileInput {...form.register("dashboard_definitions")} />
 								<FormDescription></FormDescription>
 								<FormMessage />
 							</FormItem>
@@ -310,4 +364,4 @@ const EditInnovationPage = ({ params }: { params: Params }) => {
 	);
 };
 
-export default EditInnovationPage;
+export default InnovationPage;