Skip to content

Commit

Permalink
Performance monitoring ...
Browse files Browse the repository at this point in the history
  • Loading branch information
JeremyG11 committed Feb 24, 2024
1 parent f23cd4a commit ac0ed86
Show file tree
Hide file tree
Showing 23 changed files with 476 additions and 213 deletions.
12 changes: 10 additions & 2 deletions app/(init)/page.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Source_Serif_4 } from "next/font/google";
import { redirectToSignIn } from "@clerk/nextjs";

import { prisma } from "@/libs/prisma";
import Navbar from "@/components/Navbar";
import { getAuthUser } from "@/libs/auth.user";
import Badge from "@/components/shared/Badge";
Expand All @@ -20,6 +21,13 @@ export default async function Home() {
if (!profile) {
return redirectToSignIn();
}
const shots = await prisma?.shot.findMany({
take: 8,
include: {
profile: true,
},
});
console.log(shots);
return (
<>
<Navbar profile={profile} />
Expand Down Expand Up @@ -60,8 +68,8 @@ export default async function Home() {
Explore inspiring designs
</h1>
<div className="grid grid-cols-4 gap-8 p-8 lg:px-14 ">
{[1, 3, 6, 8, 0, 9, 5, 34, 67, 80, 23].map((i) => (
<ShotCard key={i} />
{shots.map((shot) => (
<ShotCard shot={shot} key={shot.id} />
))}
</div>
<div className="py-8 flex items-center justify-center">
Expand Down
29 changes: 17 additions & 12 deletions app/(main)/(routes)/(default)/shots/popular/page.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
import ShotCard from "../../../../../../components/Home/ShotCard";
import ButtonBage from "../../../../../../components/shared/ButtonBage";
import ButtonTabListFilter from "../../../../../../components/Hiring/ButtonTabListFilter";
import {
Heading1,
Heading2,
} from "../../../../../../components/shared/Headings";
import HugeSearch from "../../../../../../components/shared/HugeSearch";
import React from "react";

export default function PopularShots() {
import ShotCard from "@/components/Home/ShotCard";
import HugeSearch from "@/components/shared/HugeSearch";
import ButtonBage from "@/components/shared/ButtonBage";
import { Heading1, Heading2 } from "@/components/shared/Headings";
import ButtonTabListFilter from "@/components/Hiring/ButtonTabListFilter";

export default async function PopularShots() {
const shots = await prisma?.shot.findMany({
orderBy: {
createdAt: "desc",
},
take: 8,
include: {
profile: true,
},
});
return (
<div className="">
<div className="flex flex-col items-center justify-center text-center space-y-4 w-full max-w-4xl mx-auto">
Expand Down Expand Up @@ -41,9 +48,7 @@ export default function PopularShots() {
</div>
<ButtonTabListFilter />
<div className="px-14 py-10 grid grid-cols-4 gap-8 ">
{[1, 3, 6, 8, 0, 9, 5, 34, 67, 80, 23].map((i) => (
<ShotCard key={i} />
))}
{shots?.map((shot) => <ShotCard shot={shot} key={shot.id} />)}
</div>
</div>
);
Expand Down
52 changes: 30 additions & 22 deletions app/(main)/(routes)/profile/[profileId]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,20 @@ import { Button } from "@/components/shared/Button";
import DropDown from "@/components/shared/DropDown";
import TooltipButton from "@/components/shared/Tooltip";
import ButtonTabs from "@/components/Profile/ButtonTabs";
import EditButton from "@/components/Profile/Edit/EditButton";

export default async function Profile() {
const profile = await authProfile();
if (!profile) {
return redirect("/sign-in");
}
const shots = await prisma?.shot.findMany({
take: 8,
include: {
profile: true,
},
});

return (
<main>
<div className="py-14 flex justify-center max-w-screen-xl mx-auto px-4 md:px-8 ">
Expand All @@ -29,33 +37,33 @@ export default async function Profile() {
<p className="mt-3 text-gray-600">Addis Ababa</p>
</div>
<div className="flex gap-3 items-center mt-4 ">
<Button className="py-3 px-6 font-medium text-gray-900 xl:block rounded-full border border-gray-200">
Edit Profile
</Button>
<EditButton />
<DropDown />

<TooltipButton
className="hidden peer-hover:flex absolute max-h-24 peer-hover:items-center peer-hover:justify-center w-64 p-2 text-white -translate-x-1/2 bg-black rounded-md -top-32 left-1/2"
description={
<div className="flex flex-col items-center justify-center space-y-1">
<p className="line-clamp-3 text-center">
Your account is only visible to logged in users and cannot
be followed or discovered in public feeds
</p>
<Link href="#" className="underline">
Learn more
</Link>
</div>
}
>
<Button className="cursor-pointer font-bold text-xs p-2 px-3 bg-indigo-50 text-indigo-500 uppercase xl:block rounded-full">
Limitted account
</Button>
</TooltipButton>
{!profile.stripeCustomerId && (
<TooltipButton
className="hidden peer-hover:flex absolute max-h-24 peer-hover:items-center peer-hover:justify-center w-64 p-2 text-white -translate-x-1/2 bg-black rounded-md -top-32 left-1/2"
description={
<div className="flex flex-col items-center justify-center space-y-1">
<p className="line-clamp-3 text-center">
Your account is only visible to logged in users and cannot
be followed or discovered in public feeds
</p>
<Link href="#" className="underline">
Learn more
</Link>
</div>
}
>
<Button className="cursor-pointer font-bold text-xs p-2 px-3 bg-indigo-50 text-indigo-500 uppercase xl:block rounded-full">
Limitted account
</Button>
</TooltipButton>
)}
</div>
</div>
</div>
<ButtonTabs />
<ButtonTabs shots={shots ?? []} />
</main>
);
}
1 change: 0 additions & 1 deletion app/(main)/(routes)/profile/edit/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { redirect } from "next/navigation";

import { authProfile } from "@/libs/auth.user";
import EditContent from "@/components/Profile/Edit/Edit";
import EditNavbar from "@/components/Profile/Edit/EditNavbar";

export default async function EditProfile() {
const profile = await authProfile();
Expand Down
55 changes: 55 additions & 0 deletions app/api/webhook/route.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import Stripe from "stripe";
import { headers } from "next/headers";
import { prisma } from "@/libs/prisma";
import { stripe } from "@/libs/stripe";

export async function POST(request: Request) {
let event: Stripe.Event;
const body = await request.text();
const signiture = headers().get("Stripe-Signature") as string;

try {
event = stripe.webhooks.constructEvent(
body,
signiture,
process.env.STRIPE_WEBHOOK_SECRET ?? ""
);
} catch (err) {
return new Response(
`Webhook Error: ${err instanceof Error ? err.message : "Unknown Error"}`,
{ status: 400 }
);
}
const session = event.data.object as Stripe.Checkout.Session;

if (!session?.metadata?.userId) {
return new Response(null, {
status: 200,
});
}
if (event.type === "checkout.session.completed") {
const subscription = await stripe.subscriptions.retrieve(
session.subscription as string
);
console.log(
subscription.id,
subscription.customer,
subscription.items.data[0].price.id,
subscription.current_period_end
);
await prisma.profile.update({
where: {
userId: session.metadata.userId,
},
data: {
stripeSubscriptionId: subscription.id,
stripeCustomerId: subscription.customer as string,
stripePriceId: subscription.items.data[0].price.id,
stripeCurrentPeriodEnd: new Date(
subscription.current_period_end * 1000
),
},
});
}
return new Response(null, { status: 200 });
}
2 changes: 0 additions & 2 deletions app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
@tailwind components;
@tailwind utilities;

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Source+Serif+4:opsz,[email protected],300;8..60,400;8..60,500;8..60,600;8..60,700;8..60,800&display=swap");

@font-face {
font-family: "Mona Sans";
src: url("/fonts/mona-sans-cufonfonts/Mona-Sans-Regular.ttf")
Expand Down
32 changes: 19 additions & 13 deletions components/Home/ShotCard.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,24 @@
import React from "react";
import Image from "next/image";
import { ShotWithProfile } from "@/libs/definitions";

export default function ShotCard() {
interface ShotCardProps {
shot: ShotWithProfile;
}
export default function ShotCard({ shot }: ShotCardProps) {
const bgImage = shot?.files.find((file) =>
file.endsWith("png" || "jpg" || "jpeg")
);
return (
<div>
<div
className="group cursor-pointer flex items-end overflow-hidden bg-cover rounded-lg w-full h-56"
className="group bg-gray-100 cursor-pointer flex items-end overflow-hidden bg-cover rounded-lg w-full h-56"
style={{
backgroundImage:
"url('https://images.unsplash.com/photo-1603380353725-f8a4d39cc41e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80')",
backgroundImage: `url(${bgImage})`,
}}
>
<div className=" hidden group-hover:flex items-center justify-between w-full p-4 py-6 overflow-hidden rounded-b-lg cursor-pointer group-hover:bg-gradient-to-t from-zinc-600 via-zinc-400 to-transparent transition-all duration-150">
<h2 className=" truncate capitalize text-white">
Onpoint- Brands blah blah blah
</h2>
<div className=" hidden group-hover:flex items-center justify-between w-full py-6 overflow-hidden rounded-b-lg cursor-pointer group-hover:bg-gradient-to-t from-zinc-600 via-zinc-400 to-transparent transition-all duration-150">
<h2 className=" truncate capitalize text-white">{shot.title}</h2>
<div className=" flex items-center justify-between ">
<span className="group inline-block rounded-full bg-white mr-2 p-3 text-white cursor-pointer focus:outline-none">
<svg
Expand Down Expand Up @@ -56,16 +60,18 @@ export default function ShotCard() {
<div className="flex items-center ">
<Image
className="w-8 h-8 rounded-full"
src="https://images.unsplash.com/photo-1589561817940-caad53a2d007?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NzZ8fGRlc2lnbmVyfGVufDB8fDB8fHww"
src={shot?.profile?.imageUrl}
alt="Rounded avatar"
width={32}
height={32}
/>

<p className="ml-2 truncate text-sm">Mihai Dolganiuc</p>
<span className="bg-gray-300 uppercase mx-2 px-1 text-xs font-medium rounded-sm text-white">
pro
</span>
<p className="ml-2 truncate text-sm">{shot?.profile.name}</p>
{shot?.profile?.stripeCustomerId && (
<span className="bg-gray-300 uppercase mx-2 px-1 text-xs font-medium rounded-sm text-white">
pro
</span>
)}
</div>
<div className="flex items-center">
<button className="flex items-center rounded-full bg-white ml-2 text-white cursor-pointer focus:outline-none">
Expand Down
2 changes: 1 addition & 1 deletion components/Profile/BlockDisplayCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function BlockDisplayCard() {
return block.files.map((file, index) => (
<div
onClick={() => handleFileClick(blockKey as BlockType)}
className={`relative w-full h-screen mx-auto border-2 rounded-xl p-4 border-pink-500 transition-all duration-200 ease-in-out ${
className={`relative w-full h-96 xl:h-screen mx-auto border-2 rounded-xl p-4 border-pink-500 transition-all duration-200 ease-in-out ${
layout === "layout1" ? "max-w-3xl" : "max-w-7xl"
}`}
key={`${blockKey}-${index}`}
Expand Down
11 changes: 7 additions & 4 deletions components/Profile/ButtonTabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@
import React, { useState } from "react";
import { Button } from "../shared/Button";
import ShotCard from "../Home/ShotCard";
import DropDown from "../shared/DropDown";
import DropDownButton from "../shared/DropDownButton";
import { ShotWithProfile } from "@/libs/definitions";

export default function ButtonTabs() {
interface ButtonTabsProps {
shots: ShotWithProfile[];
}
export default function ButtonTabs({ shots }: ButtonTabsProps) {
const [isOpened, setIsOpened] = useState(false);

return (
Expand Down Expand Up @@ -61,9 +64,9 @@ export default function ButtonTabs() {
</nav>
</div>
<div className="grid grid-cols-4 gap-8">
{[3, 6, 8, 7, 34, 9].map((btn, i) => (
{shots.map((shot, i) => (
<div key={i}>
<ShotCard key={btn} />
<ShotCard shot={shot} key={shot.id} />
</div>
))}
</div>
Expand Down
16 changes: 16 additions & 0 deletions components/Profile/Edit/EditButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
"use client";
import React from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/shared/Button";

export default function EditButton() {
const router = useRouter();
return (
<Button
onClick={() => router.push("/profile/edit")}
className="py-3 px-6 font-medium text-gray-900 xl:block rounded-full border border-gray-200"
>
Edit Profile
</Button>
);
}
6 changes: 3 additions & 3 deletions components/Profile/FileUploader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const FileUploader = ({ onFilesChange }: FileUploaderProps) => {
<div className="relative w-full h-full">
<label
htmlFor="dropzone-file"
className="relative p-3 max-w-5xl mx-auto flex flex-col justify-center w-full h-screen border-2 border-gray-300 border-dashed rounded-lg cursor-pointer"
className="relative p-3 max-w-5xl mx-auto flex flex-col justify-center w-full xl:h-screen border-2 border-gray-300 border-dashed rounded-lg cursor-pointer"
>
<div className="z-30 flex flex-col items-center justify-center pt-5 pb-6 space-y-8">
<div className="flex flex-col items-center justify-center space-y-3">
Expand All @@ -53,12 +53,12 @@ const FileUploader = ({ onFilesChange }: FileUploaderProps) => {
Browse
</span>
</p>
<p className=" text-gray-500">
<p className=" text-center md:text-left text-gray-500">
Minimum 1600px width recommended. Max 10MB each (20MB for videos)
</p>
</div>

<ul className="w-full mt-8 space-y-1 flex items-center justify-evenly text-gray-500 list-disc list-inside ">
<ul className="w-full px-4 md:px-0 md:space-x-0 mt-8 space-y-1 md:flex md:items-center md:justify-evenly text-gray-500 list-disc list-inside ">
<div>
<li>High resolution images (png, jpg, gif)</li>
<li>Animated gifs</li>
Expand Down
9 changes: 7 additions & 2 deletions components/Profile/ShotUploadForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,13 @@ import { Button } from "../shared/Button";
import BlockDisplayCard from "./BlockDisplayCard";
import { ShotSchema } from "@/schemas/ShotSchema";
import { createShot } from "@/libs/actions/shot.actions";
import { useRouter } from "next/navigation";

export default function ShotUploadForm() {
const { isDrawerOpen, boardData } = useBlock();
const isFileSelected = Object.keys(boardData).length !== 0;

const router = useRouter();
const [files, setFiles] = useState<File[]>([]);
const { onOpen, isOpen, setData } = useModal();
const [title, setTitle] = useState("");
Expand Down Expand Up @@ -52,14 +54,17 @@ export default function ShotUploadForm() {
};

return (
<div className="flex w-full min-w-full max-h-screen">
<div className="lg:flex w-full min-w-full max-h-screen">
<div className="relative flex-grow overflow-y-auto hide-scroll-bar">
<div
className={`px-6 w-full z-10 flex justify-between top-6 ${
isFileSelected ? "absolute" : "sticky"
}`}
>
<Button className="border py-2 px-5 text-sm font-medium">
<Button
onClick={() => router.push("/")}
className="border py-2 px-5 text-sm font-medium"
>
Cancel
</Button>

Expand Down
Loading

0 comments on commit ac0ed86

Please sign in to comment.