Skip to content

Commit

Permalink
Merge pull request #16 from udohjeremiah/dev
Browse files Browse the repository at this point in the history 
Fix: Use external library for masonry layout feature
  • Loading branch information
@udohjeremiah
udohjeremiah authored Mar 14, 2024
2 parents d370746 + b22f444 commit 232cdd4
Show file tree
Hide file tree
Showing 5 changed files with 176 additions and 164 deletions.
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"next-themes": "^0.2.1",
"react": "^18",
"react-dom": "^18",
"react-responsive-masonry": "^2.2.0",
"sonner": "^1.4.3",
"tailwind-merge": "^2.2.1",
"tailwindcss-animate": "^1.0.7"
Expand All @@ -46,6 +47,7 @@
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"@types/react-responsive-masonry": "^2.1.3",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.1.3",
Expand Down
22 changes: 22 additions & 0 deletions pnpm-lock.yaml
View file

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

71 changes: 34 additions & 37 deletions src/components/DisplayAlbums.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Link from "next/link";
// Dependencies
import { useUser } from "@clerk/nextjs";
import { FolderXIcon, LoaderIcon } from "lucide-react";
import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";

// Actions
import { deleteAlbum } from "@/actions/deleteAlbum";
Expand Down Expand Up @@ -62,42 +63,38 @@ export default function DisplayAlbums({ albums }: { albums: AlbumProps[] }) {
};

return (
<div
className={cn(
"grid grid-cols-1 gap-4",
"md:grid-cols-2",
"lg:grid-cols-3",
)}
>
{albums.map((album) => (
<Card key={album.path}>
<CardHeader>
<CardTitle>{album.name} Album</CardTitle>
<CardDescription>
Your {album.name} images in one place.
</CardDescription>
</CardHeader>
<CardFooter className="flex justify-between gap-4">
<Button
variant="destructive"
disabled={isDeleting[album.name]}
onClick={() => {
deleteAlbumFromAccount(user?.id, album.name);
}}
>
{isDeleting[album.name] ? (
<LoaderIcon className="mr-2 h-4 w-4 animate-spin" />
) : (
<FolderXIcon className="mr-2 h-4 w-4" />
)}
Delete
</Button>
<Button asChild>
<Link href={`/albums/${album.name}`}>View Album</Link>
</Button>
</CardFooter>
</Card>
))}
</div>
<ResponsiveMasonry columnsCountBreakPoints={{ 350: 1, 768: 2, 1024: 3 }}>
<Masonry gutter="32px">
{albums.map((album) => (
<Card key={album.path}>
<CardHeader>
<CardTitle>{album.name} Album</CardTitle>
<CardDescription>
Your {album.name} images in one place.
</CardDescription>
</CardHeader>
<CardFooter className="flex justify-between gap-4">
<Button
variant="destructive"
disabled={isDeleting[album.name]}
onClick={() => {
deleteAlbumFromAccount(user?.id, album.name);
}}
>
{isDeleting[album.name] ? (
<LoaderIcon className="mr-2 h-4 w-4 animate-spin" />
) : (
<FolderXIcon className="mr-2 h-4 w-4" />
)}
Delete
</Button>
<Button asChild>
<Link href={`/albums/${album.name}`}>View Album</Link>
</Button>
</CardFooter>
</Card>
))}
</Masonry>
</ResponsiveMasonry>
);
}
112 changes: 53 additions & 59 deletions src/components/DisplayArchivedImages.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Link from "next/link";
// Dependencies
import { EyeIcon, LoaderIcon, Trash2Icon, UndoIcon } from "lucide-react";
import { CldImage } from "next-cloudinary";
import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";

// Actions
import { deletePhoto } from "@/actions/deletePhoto";
Expand All @@ -19,9 +20,6 @@ import { movePhoto } from "@/actions/movePhoto";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter } from "@/components/ui/card";

// Lib
import { cn } from "@/lib/utils";

// Types
import { ImageProps } from "@/types";

Expand Down Expand Up @@ -92,61 +90,57 @@ export default function DisplayArchivedImages({
};

return (
<div
className={cn(
"columns-1 gap-8 space-y-8",
"md:columns-2",
"lg:columns-3",
)}
>
{images.map((image) => (
<Card key={image.public_id} className="break-inside-avoid-column">
<CardContent className="p-0">
<CldImage
src={image.public_id}
alt={image.public_id}
width={image.width}
height={image.height}
className="rounded-t-xl"
/>
</CardContent>
<CardFooter className="mt-1 flex p-0">
<Button asChild variant="ghost">
<Link href={image.secure_url}>
<EyeIcon className="h-4 w-4" />
</Link>
</Button>
<Button
variant="ghost"
disabled={isMovingPhoto[image.public_id]}
onClick={() => {
movePhotoToGallery(image);
}}
>
{isMovingPhoto[image.public_id] ? (
<LoaderIcon className="h-4 w-4 animate-spin" />
) : (
<UndoIcon className="h-4 w-4" />
)}
<span className="sr-only">Move to gallery</span>
</Button>
<Button
variant="ghost"
disabled={isDeletingPhoto[image.public_id]}
onClick={() => {
deletePhotoFromAccount(image);
}}
>
{isDeletingPhoto[image.public_id] ? (
<LoaderIcon className="h-4 w-4 animate-spin" />
) : (
<Trash2Icon className="h-4 w-4 text-red-500" />
)}
<span className="sr-only">Delete permanently</span>
</Button>
</CardFooter>
</Card>
))}
</div>
<ResponsiveMasonry columnsCountBreakPoints={{ 350: 1, 768: 2, 1024: 3 }}>
<Masonry gutter="32px">
{images.map((image) => (
<Card key={image.public_id} className="break-inside-avoid-column">
<CardContent className="p-0">
<CldImage
src={image.public_id}
alt={image.public_id}
width={image.width}
height={image.height}
className="rounded-t-xl"
/>
</CardContent>
<CardFooter className="mt-1 flex p-0">
<Button asChild variant="ghost">
<Link href={image.secure_url}>
<EyeIcon className="h-4 w-4" />
</Link>
</Button>
<Button
variant="ghost"
disabled={isMovingPhoto[image.public_id]}
onClick={() => {
movePhotoToGallery(image);
}}
>
{isMovingPhoto[image.public_id] ? (
<LoaderIcon className="h-4 w-4 animate-spin" />
) : (
<UndoIcon className="h-4 w-4" />
)}
<span className="sr-only">Move to gallery</span>
</Button>
<Button
variant="ghost"
disabled={isDeletingPhoto[image.public_id]}
onClick={() => {
deletePhotoFromAccount(image);
}}
>
{isDeletingPhoto[image.public_id] ? (
<LoaderIcon className="h-4 w-4 animate-spin" />
) : (
<Trash2Icon className="h-4 w-4 text-red-500" />
)}
<span className="sr-only">Delete permanently</span>
</Button>
</CardFooter>
</Card>
))}
</Masonry>
</ResponsiveMasonry>
);
}
Loading

0 comments on commit 232cdd4

Please sign in to comment.