Skip to content

Commit 1ab9acd

Browse files
mosespacemosespace
committed
feat: initial commit solved editor problem🎉
1 parent ead49dc commit 1ab9acd

File tree

10 files changed

+186
-158
lines changed

10 files changed

+186
-158
lines changed

‎actions/events.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export async function createEvent({ data }: { data: any }) {
8080
startDate: new Date(data.startDate),
8181
endDate: new Date(data.endDate),
8282
location: data.location,
83-
userId: "667ae6c236b7463cc202e800",
83+
userId: data.userId,
8484
posters: data.posters,
8585
};
8686

‎app/(dashboard)/dashboard/events/[eventId]/page.tsx

+19-7
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,20 @@ import { Button } from "@/components/ui/button";
88
import DashboardBreadcrumb from "@/components/dashboard-breadcrumb";
99
import { getEventBySlug } from "@/actions/events";
1010
import { ContentLayout } from "@/components/dashboard/content-layout";
11+
import Editor from "@/components/editor/advanced-editor";
1112

12-
export default async function DashboardPage({
13+
// Import other extensions if needed
14+
15+
export default async function EventDashboardDetailedPage({
1316
params: { eventId },
1417
}: {
1518
params: { eventId: string };
1619
}) {
1720
const event = await getEventBySlug({ eventId });
21+
const content: any = JSON.parse(event?.content as string);
22+
23+
// Log JSON content for debugging
24+
// console.log("JSON content:", content);
1825

1926
return (
2027
<ContentLayout title='Dashboard'>
@@ -60,13 +67,18 @@ export default async function DashboardPage({
6067
</Balancer>
6168
</div>
6269

63-
<div className='flex flex-col px-4 py-8 max-w-4xl'>
64-
<h2 className='text-primary font-bold text-lg'>Ben</h2>
65-
<article className='prose lg:prose-xl'>
66-
{/* {convertToHtml(content)} */}
67-
</article>
70+
<div className='flex flex-col px-4 py-8 '>
71+
{/* <article className='prose lg:prose-xl'> */}
72+
<div className=''>
73+
<Editor
74+
isEditable={false}
75+
initialValue={content}
76+
onChange={content}
77+
/>
78+
</div>
79+
{/* </article> */}
6880

69-
<div className='my-8'>
81+
<div className='my-8 max-w-4xl'>
7082
<Map />
7183
</div>
7284
</div>

‎app/event/[slug]/page.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export default function page({ params: { slug } }: { params: any }) {
9090

9191
return (
9292
<div className=''>
93-
<div className='max-w-7xl flex-col mx-auto min-h-screen w-full flex items-centers justify-centers px-8'>
93+
<div className='max-w-7xl flex-col mx-auto min-h-screen w-full flex items-centers justify-centers px-4 md:px-8'>
9494
<div className='grid gap-2 mt-8 lg:mx-auto lg:grid-cols-3 h-[30rem]'>
9595
<div className='relative h-full p-2 overflow-hidden border rounded-3xl lg:col-span-2'>
9696
<img
@@ -115,7 +115,7 @@ export default function page({ params: { slug } }: { params: any }) {
115115
</Balancer>
116116
</div>
117117
<div className='flex flex-col px-4 py-8 max-w-4xl'>
118-
<h2 className='text-primary font-bold text-lg'>Ben</h2>
118+
<h2 className='text-primary font-bold text-lg'>Title</h2>
119119

120120
<p className=''>
121121
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam in
@@ -189,7 +189,7 @@ export default function page({ params: { slug } }: { params: any }) {
189189
</button>
190190
</div>
191191
</div>
192-
<div className='grid grid-cols-4 justify-center gap-2'>
192+
<div className='grid gird-cols-1 md:grid-cols-4 justify-center gap-2'>
193193
{events.map((event: EventCardProps) => (
194194
<EventCard
195195
key={event.id}
@@ -221,7 +221,7 @@ export default function page({ params: { slug } }: { params: any }) {
221221
</button>
222222
</div> */}
223223
</div>
224-
<div className='grid grid-cols-4 justify-center gap-2'>
224+
<div className='grid gird-cols-1 md:grid-cols-4 justify-center gap-2'>
225225
{favorite.map((event: EventCardProps) => (
226226
<EventCard
227227
key={event.id}

‎components/editor/advanced-editor.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -19,23 +19,28 @@ import { handleImageDrop, handleImagePaste } from "novel/plugins";
1919
import { Separator } from "../ui/separator";
2020
import { defaultExtensions } from "./extensions";
2121
import { uploadFn } from "./image-upload";
22+
import { cn } from "@/lib/utils";
2223

2324
const extensions = [...defaultExtensions, slashCommand];
2425

2526
interface EditorProp {
2627
initialValue?: any;
28+
isEditable?: boolean;
2729
onChange: (value: any) => void;
2830
}
2931

30-
const Editor = ({ initialValue, onChange }: EditorProp) => {
32+
const Editor = ({ initialValue, onChange, isEditable = true }: EditorProp) => {
3133
const [openNode, setOpenNode] = useState(false);
3234
const [openColor, setOpenColor] = useState(false);
3335
const [openLink, setOpenLink] = useState(false);
3436

3537
return (
3638
<EditorRoot>
3739
<EditorContent
38-
className='border p-4 rounded-xl'
40+
className={cn({
41+
"border p-4 rounded-xl": isEditable,
42+
"w-full ": !isEditable,
43+
})}
3944
{...(initialValue && { initialContent: initialValue })}
4045
extensions={extensions}
4146
editorProps={{
@@ -50,6 +55,7 @@ const Editor = ({ initialValue, onChange }: EditorProp) => {
5055
"prose prose-lg dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full",
5156
},
5257
}}
58+
editable={isEditable}
5359
onUpdate={({ editor }) => {
5460
onChange(editor.getJSON());
5561
}}

‎components/post-event-forms/footer_btns.tsx

+19-14
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22

33
import React, { useState } from "react";
44
import { useDispatch, useSelector } from "react-redux";
5-
import { resetForm, setCurrentStep } from "@/store/slices/form-slice";
5+
import { setCurrentStep } from "@/store/slices/form-slice";
66
import { Button } from "../ui/button";
77
import { createEvent } from "@/actions/events";
88
import { Loader } from "lucide-react";
99
import { useToast } from "../ui/use-toast";
10+
import { getCurrentUser } from "@/lib/authProvider";
1011

1112
export default function FooterBtns() {
1213
const { toast } = useToast();
@@ -22,29 +23,37 @@ export default function FooterBtns() {
2223
};
2324

2425
async function handleSubmit() {
25-
// Submit formData to your database
26-
// console.log("function running");
27-
console.log("Final Form Data: ", formData);
2826
setLoading(true);
27+
2928
try {
30-
const event: any = await createEvent({ data: formData });
31-
console.log(event);
29+
// Retrieving the current user
30+
const user: any = await getCurrentUser();
31+
const userId = user.id;
32+
33+
// Merging userId into formData
34+
const updatedFormData = { ...formData, userId };
35+
console.log(updatedFormData);
36+
37+
const event: any = await createEvent({ data: updatedFormData });
38+
console.log("Event created: ", event);
3239

3340
toast({
3441
title: "Event has been created successfully",
3542
});
43+
3644
dispatch(setCurrentStep(step + 1));
3745
// dispatch(resetForm());
38-
} catch (error: any) {
46+
} catch (error) {
47+
console.error("Error creating event:", error);
3948
toast({
4049
title: "Event creation has failed...",
4150
variant: "destructive",
4251
});
43-
console.error("Event creation error:", error);
4452
} finally {
4553
setLoading(false);
4654
}
4755
}
56+
4857
return (
4958
<div className='flex max-w-4xl w-full mx-auto justify-end gap-2 items-end'>
5059
{step > 1 && (
@@ -58,19 +67,15 @@ export default function FooterBtns() {
5867
)}
5968

6069
{(step === 1 || step === 2 || step === 3) && (
61-
<Button
62-
type='submit'
63-
// onClick={() => handleSubmit()}
64-
className='w-[10rem] mt-4'
65-
>
70+
<Button type='submit' className='w-[10rem] mt-4'>
6671
Save and Continue{" "}
6772
</Button>
6873
)}
6974

7075
{step === 4 && (
7176
<Button
7277
type='submit'
73-
onClick={handleSubmit}
78+
onClick={() => handleSubmit()}
7479
className='flex gap-2 w-[15rem] mt-4'
7580
>
7681
{loading && <Loader className='animate-spin size-4' />}

‎components/post-event-forms/post-event-form-four.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,10 @@ import { ProgressTracker } from "../progress";
77
import { DateRangePicker } from "../date-picker";
88
import { useAppSelector } from "@/store/hooks/hooks";
99
import { Controller, useForm } from "react-hook-form";
10-
import { setCurrentStep, updateFormData } from "@/store/slices/form-slice";
10+
import { updateFormData } from "@/store/slices/form-slice";
1111
import MultipleImageUpload from "./multiple-image-upload";
1212
import { useState } from "react";
1313
import { Label } from "../ui/label";
14-
import { createEvent } from "@/actions/events";
1514

1615
interface FormSchema {
1716
dateRange: {
@@ -26,12 +25,13 @@ interface FormSchema {
2625
}
2726

2827
export function PostEventFormFour() {
29-
const [posters, setPosters] = useState<any>();
3028
const step = useSelector((state: any) => state.creatingEvent.step);
3129

3230
const dispatch = useDispatch();
3331
const formData = useAppSelector((state: any) => state.creatingEvent.formData);
3432

33+
const [posters, setPosters] = useState<any>(formData.posters || "");
34+
3535
const {
3636
register,
3737
handleSubmit,
@@ -61,7 +61,7 @@ export function PostEventFormFour() {
6161
<div className='flex w-full flex-col items-center justify-center'>
6262
<h2 className='font-bold text-xl'>Description-Класс</h2>
6363

64-
<p className='mb-4'>Шаг {step} из 4</p>
64+
<p className='mb-4'>Step {step} of 4</p>
6565
<ProgressTracker />
6666
</div>
6767
<div className='flex bg-white max-w-4xl w-full mx-auto mt-4 shadow-lg rounded-lg p-12'>

‎components/post-event-forms/post-event-form-one.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ export function PostEventFormOne() {
137137
>
138138
<div className='flex w-full flex-col items-center justify-center'>
139139
<h2 className='font-bold text-xl'>Мастер-Класс</h2>
140-
<p className='mb-4'>Шаг {step} из 4</p>
140+
<p className='mb-4'>Step {step} of 4</p>
141141
<ProgressTracker />
142142
</div>
143143

‎components/post-event-forms/post-event-form-three.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export function PostEventFormThree() {
8282
>
8383
<div className='flex w-full flex-col items-center justify-center'>
8484
<h2 className='font-bold text-xl'>Description-Класс</h2>
85-
<p className='mb-4'>Шаг {step} из 4</p>
85+
<p className='mb-4'>Step {step} of 4</p>
8686
<ProgressTracker />
8787
</div>
8888

‎components/post-event-forms/post-event-form-two.tsx

+10-5
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,13 @@ interface FormSchema {
2222
}
2323

2424
export function PostEventFormTwo() {
25-
const [phoneNumber, setPhoneNumber] = useState<string>("");
25+
const formData = useSelector((state: any) => state.creatingEvent.formData);
26+
27+
const [phoneNumber, setPhoneNumber] = useState<string>(formData.tel || "");
2628

2729
const dispatch = useDispatch();
2830
const step = useSelector((state: any) => state.creatingEvent.step);
2931
// console.log(step);
30-
const formData = useSelector((state: any) => state.creatingEvent.formData);
3132

3233
const {
3334
register,
@@ -42,7 +43,7 @@ export function PostEventFormTwo() {
4243
function onSubmit(data: FormSchema) {
4344
data.tel = phoneNumber;
4445

45-
// console.log(data);
46+
console.log(data);
4647

4748
dispatch(updateFormData(data));
4849

@@ -61,7 +62,7 @@ export function PostEventFormTwo() {
6162
<div className='flex w-full flex-col items-center justify-center'>
6263
<h2 className='font-bold text-xl'>Location-Класс</h2>
6364

64-
<p className='mb-4'>Шаг {step} из 4</p>
65+
<p className='mb-4'>Step {step} of 4</p>
6566
<ProgressTracker />
6667
</div>
6768

@@ -111,7 +112,11 @@ export function PostEventFormTwo() {
111112

112113
<div className='space-y-2'>
113114
<Label>Contact Details</Label>
114-
<PhoneInput onChange={handlePhoneChange} defaultCountry='UG' />
115+
<PhoneInput
116+
value={phoneNumber}
117+
onChange={handlePhoneChange}
118+
defaultCountry='UG'
119+
/>
115120
</div>
116121
</div>
117122

0 commit comments

Comments
 (0)