Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

69 delete from cloudinary #89

Merged
merged 4 commits into from
Feb 6, 2024
Merged

69 delete from cloudinary #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ec1d32b
added download image functionality
avi-l Feb 5, 2024
09250db
delete from cloudinary and go back to /app after delete
avi-l Feb 6, 2024
4ed770e
go back if there is history, otherwise go to /app after post delete
avi-l Feb 6, 2024
bb1981a
remove console log
avi-l Feb 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

117 changes: 59 additions & 58 deletions src/app/(site)/app/components/new-post-box/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
"use client";

import { useUserProfile } from "@/hooks/use-user-profile";
import { Trash, Image } from "lucide-react";
import { ChangeEvent, useState } from "react";
import { useForm } from "react-hook-form";
import { FormAreas } from "./new-post.models";
import { PrimaryButton } from "@/components/ui/buttons/primary";
import { postImage } from "@/services/api/upload-image";
import { useRouter } from "next/navigation";
import { useSupabase } from "@/hooks/use-supabase";
import { useBase64Image } from "@/hooks/use-base-64-image";
import { Skeleton } from "@/components/ui/skeleton";
import { LazyImage } from "@/components/feature/lazy-image";
'use client';

import { useUserProfile } from '@/hooks/use-user-profile';
import { Trash, Image } from 'lucide-react';
import { ChangeEvent, useState } from 'react';
import { useForm } from 'react-hook-form';
import { FormAreas } from './new-post.models';
import { PrimaryButton } from '@/components/ui/buttons/primary';
import { postImage } from '@/services/api/upload-image';
import { useRouter } from 'next/navigation';
import { useSupabase } from '@/hooks/use-supabase';
import { useBase64Image } from '@/hooks/use-base-64-image';
import { Skeleton } from '@/components/ui/skeleton';
import { LazyImage } from '@/components/feature/lazy-image';

export function NewPostBox() {
const [formImageSrc, setFormImageSrc] = useState<string | null>(null);
Expand All @@ -35,7 +35,7 @@ export function NewPostBox() {
handleSubmit,
watch,
resetField,
} = useForm<FormAreas>({ mode: "onChange" });
} = useForm<FormAreas>({ mode: 'onChange' });

const { parseImageToBase64 } = useBase64Image();

Expand All @@ -51,26 +51,26 @@ export function NewPostBox() {

try {
const base64Image = await parseImageToBase64({ image });
if (!base64Image) throw new Error("No base64Image");
if (!base64Image) throw new Error('No base64Image');

const { error: postImageError, assetSecureUrl } = await postImage({
image: base64Image,
});
if (postImageError || !assetSecureUrl) {
throw new Error(
postImageError || "There is no assetSecureUrl from the response",
postImageError || 'There is no assetSecureUrl from the response'
);
}

const { error } = await supabase
.from("posts")
.from('posts')
.insert({
asset_url: assetSecureUrl,
title: title,
profile_id: userProfile?.id,
user_id: userProfile.user_id,
})
.eq("profile_id", userProfile?.id)
.eq('profile_id', userProfile?.id)
.single();

if (error) {
Expand All @@ -88,7 +88,7 @@ export function NewPostBox() {
hasSubmittingBeenSuccesful: true,
});
UnSelectImage();
resetField("title");
resetField('title');
router.refresh();
} catch (e) {
console.log(e);
Expand All @@ -101,85 +101,86 @@ export function NewPostBox() {
}

function UnSelectImage() {
resetField("media");
resetField('media');
setFormImageSrc(null);
}

return (
<div>
<form
className="flex flex-col sm:p-5 p-1"
className='flex flex-col sm:p-5 p-1'
onSubmit={handleSubmit(publishPost)}
>
<div className="flex gap-4">
<div className='flex gap-4'>
{isLoadingUserProfile ? (
<Skeleton className="h-14 w-14 rounded-full flex-none" />
<Skeleton className='h-14 w-14 rounded-full flex-none' />
) : (
userProfile &&
userProfile.avatar_url && (
<LazyImage
src={userProfile.avatar_url}
alt={userProfile.username ?? userProfile.name ?? ""}
className="h-12 w-12 rounded-full object-cover object-center"
skeletonClassName="h-12 w-12 rounded-full"
alt={userProfile.username ?? userProfile.name ?? ''}
className='h-12 w-12 rounded-full object-cover object-center'
skeletonClassName='h-12 w-12 rounded-full'
/>
)
)}
<div className="flex flex-col gap-4 pt-3 w-full">
<div className="flex flex-col">
<div className='flex flex-col gap-4 pt-3 w-full'>
<div className='flex flex-col'>
<input
type="text"
placeholder="What have you drew?"
className="bg-transparent w-full h-max text-2xl max-w-full text-neutral-800 dark:text-neutral-300 font-bold placeholder:font-medium placeholder:text-neutral-600 dark:placeholder:text-neutral-500 focus:outline-none"
{...register("title", {
type='text'
placeholder='What have you drew?'
className='bg-transparent w-full h-max text-2xl max-w-full text-neutral-800 dark:text-neutral-300 font-bold placeholder:font-medium placeholder:text-neutral-600 dark:placeholder:text-neutral-500 focus:outline-none'
{...register('title', {
maxLength: {
value: 50,
message: "Max title characteres is 50",
message: 'Max title characteres is 50',
},
required: { value: true, message: "Title is required" },
required: { value: true, message: 'Title is required' },
})}
/>
{errors.title?.type === "maxLength" && (
<span className="text-red-500">
{watch("title").length} of 50 characteres
{errors.title?.type === 'maxLength' && (
<span className='text-red-500'>
{watch('title').length} of 50 characteres
</span>
)}
{errors.title?.type === "required" && (
<span className="text-red-500">Title required</span>
{errors.title?.type === 'required' && (
<span className='text-red-500'>Title required</span>
)}
</div>
{formImageSrc && (
<div className="h-full w-full relative mb-5">
<div className='h-full w-full relative mb-5'>
<img
src={formImageSrc}
className="w-full max-w-full max-h-96 rounded-md object-center object-cover"
className='w-full max-w-full max-h-96 rounded-md object-center object-cover'
alt=''
/>
<button
className="absolute top-2 right-2 text-neutral-50 p-2 bg-neutral-700 rounded-[calc(0.5rem-0.375rem)] hover:bg-red-500 transition-colors delay-75"
className='absolute top-2 right-2 text-neutral-50 p-2 bg-neutral-700 rounded-[calc(0.5rem-0.375rem)] hover:bg-red-500 transition-colors delay-75'
onClick={UnSelectImage}
>
<Trash className="h-4 w-4" />
<Trash className='h-4 w-4' />
</button>
</div>
)}
</div>
</div>
<section className="pl-[calc(48px+1rem)] flex justify-between">
<div className="flex items-center justify-center border-l border-neutral-600 dark:border-neutral-600">
<div className="cursor-pointer relative w-10 h-10 p-4 hover:bg-neutral-300 dark:hover:bg-cm-lighter-gray rounded-sm flex items-center justify-center">
<label htmlFor="image" className="cursor-pointer">
<section className='pl-[calc(48px+1rem)] flex justify-between'>
<div className='flex items-center justify-center border-l border-neutral-600 dark:border-neutral-600'>
<div className='cursor-pointer relative w-10 h-10 p-4 hover:bg-neutral-300 dark:hover:bg-cm-lighter-gray rounded-sm flex items-center justify-center'>
<label htmlFor='image' className='cursor-pointer'>
<Image
className={`h-6 w-6 ${
errors.media
? "text-red-500"
: "text-neutral-800 dark:text-neutral-300"
? 'text-red-500'
: 'text-neutral-800 dark:text-neutral-300'
}`}
/>
</label>
<input
type="file"
className="absolute top-0 left-0 opacity-0 h-full w-full cursor-pointer"
{...register("media", {
type='file'
className='absolute top-0 left-0 opacity-0 h-full w-full cursor-pointer'
{...register('media', {
onChange: (e: ChangeEvent<HTMLInputElement>) => {
if (
!e.target ||
Expand All @@ -198,17 +199,17 @@ export function NewPostBox() {
setFormImageSrc(event.target.result as string);
};
},
required: { value: true, message: "Image/Gif is required" },
required: { value: true, message: 'Image/Gif is required' },
})}
/>
</div>
{errors.media && (
<span className="text-red-500">{errors.media.message}</span>
<span className='text-red-500'>{errors.media.message}</span>
)}
</div>
<div className="max-w-40">
<div className='max-w-40'>
<PrimaryButton
type="submit"
type='submit'
disabled={isSubmitting || !isValid}
isLoading={isSubmitting}
>
Expand All @@ -217,7 +218,7 @@ export function NewPostBox() {
</div>
</section>
{formSubmitingState.hasSubmittingFailed && (
<p className="text-red-500 w-full text-center">
<p className='text-red-500 w-full text-center'>
There has been an error trying to publish your post
</p>
)}
Expand Down
Loading
Loading