Skip to content

Commit

Permalink
Merge pull request #62 from hubcio2115/feat/update-project-list-to-fe…
Browse files Browse the repository at this point in the history
…tch-them-from-api

Update project list to fetch them from api
  • Loading branch information
hubcio2115 committed Jul 8, 2024
2 parents 8b36d3e + 1d9dd7c commit d4a422e
Show file tree
Hide file tree
Showing 23 changed files with 2,497 additions and 2,643 deletions.
1 change: 1 addition & 0 deletions apps/web/.env.local.example
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ AUTH_URL="http://localhost:3000"
# Next Auth Google Provider
AUTH_GOOGLE_ID=""
AUTH_GOOGLE_SECRET=""

YOUTUBE_DATA_API_KEY=""

# Mux secrets
Expand Down
6 changes: 5 additions & 1 deletion apps/web/next.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
* Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
* for Docker builds.
*/
await import("./src/env.mjs");
import { fileURLToPath } from "url";
import createJiti from "jiti";
const jiti = createJiti(fileURLToPath(import.meta.url));

jiti('./src/env');

/** @type {import("next").NextConfig} */
const config = {
Expand Down
63 changes: 32 additions & 31 deletions apps/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,24 @@
},
"dependencies": {
"@auth/drizzle-adapter": "^0.8.2",
"@hookform/resolvers": "^3.3.4",
"@mux/mux-node": "^8.5.3",
"@hookform/resolvers": "^3.6.0",
"@mux/mux-node": "^8.8.0",
"@mux/mux-uploader-react": "1.0.0-beta.17",
"@radix-ui/react-alert-dialog": "^1.0.5",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.5",
"@radix-ui/react-toggle": "^1.0.3",
"@t3-oss/env-nextjs": "^0.9.2",
"@tanstack/react-query": "^5.36.0",
"@tanstack/react-query-devtools": "^5.36.0",
"@radix-ui/react-alert-dialog": "^1.1.1",
"@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-navigation-menu": "^1.2.0",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.0",
"@radix-ui/react-toast": "^1.2.1",
"@radix-ui/react-toggle": "^1.1.0",
"@t3-oss/env-nextjs": "^0.10.1",
"@tanstack/react-query": "^5.49.2",
"@tanstack/react-query-devtools": "^5.49.2",
"@total-typescript/ts-reset": "^0.5.1",
"@vercel/postgres": "^0.8.0",
"class-variance-authority": "^0.7.0",
Expand All @@ -41,14 +41,15 @@
"drizzle-orm": "^0.30.10",
"drizzle-zod": "^0.5.1",
"geist": "^1.3.0",
"jiti": "^1.21.6",
"lucide-react": "^0.290.0",
"next": "^14.2.3",
"next": "^14.2.4",
"next-auth": "5.0.0-beta.19",
"next-themes": "^0.2.1",
"pg": "^8.11.5",
"pg": "^8.12.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.51.4",
"react-hook-form": "^7.52.0",
"tailwind-merge": "^1.14.0",
"tailwindcss-animate": "^1.0.7",
"zod": "^3.23.8"
Expand All @@ -59,25 +60,25 @@
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
"@types/eslint": "^8.56.10",
"@types/node": "20.8.9",
"@types/react": "^18.3.2",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.9.0",
"@typescript-eslint/parser": "^7.9.0",
"@vitejs/plugin-react": "^4.2.1",
"@typescript-eslint/eslint-plugin": "^7.14.1",
"@typescript-eslint/parser": "^7.14.1",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.19",
"dotenv-cli": "^7.4.2",
"drizzle-kit": "^0.21.1",
"drizzle-kit": "^0.21.4",
"eslint": "^8.57.0",
"eslint-config-next": "^14.2.3",
"eslint-config-next": "^14.2.4",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-drizzle": "^0.2.3",
"eslint-plugin-prettier": "^5.1.3",
"jsdom": "^24.0.0",
"postcss": "^8.4.38",
"prettier": "^3.2.5",
"jsdom": "^24.1.0",
"postcss": "^8.4.39",
"prettier": "^3.3.2",
"prettier-plugin-tailwindcss": "^0.5.14",
"tailwindcss": "^3.4.3",
"typescript": "^5.4.5",
"tailwindcss": "^3.4.4",
"typescript": "^5.5.2",
"vitest": "^1.6.0"
},
"ct3aMetadata": {
Expand Down
Binary file removed apps/web/public/img/invite_google_modal.png
Binary file not shown.
Binary file added apps/web/public/img/suprised_pikachu.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 28 additions & 0 deletions apps/web/src/app/api/organizations/[name]/projects/route.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { redirect } from "next/navigation";
import { NextRequest, NextResponse } from "next/server";
import {
getOrganizationProjects,
getOwnOrganizationByName,
} from "~/server/actions/organization";

export async function GET(
req: NextRequest,
{ params }: { params: { name: string } },
) {
const [organization, err] = await getOwnOrganizationByName(params.name);

if (err !== null) {
if (err === "Not found") {
return redirect("404");
}

return NextResponse.json(
{ message: "Could fetch project." },
{ status: 500 },
);
}

const projects = await getOrganizationProjects(organization.id);

return NextResponse.json(projects);
}
107 changes: 15 additions & 92 deletions apps/web/src/app/dashboard/[name]/overview/page.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,7 @@
"use client";
import { redirect } from "next/navigation";
import { Suspense } from "react";
import ProjectGrid from "~/components/dashboard/project-grid";

import { useQuery } from "@tanstack/react-query";
import { SearchIcon } from "lucide-react";
import { StretchHorizontal } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

import VideoCard from "~/components/dashboard/videoCard";
import VideoSmallCard from "~/components/dashboard/videoSmallCard";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Toggle } from "~/components/ui/toggle";
import { useToast } from "~/components/ui/use-toast";
import projectMockData from "~/lib/mock/organizationOverview";
import { getOwnOrganizations } from "~/server/actions/organization";

type DashboardOverviewProps = {
Expand All @@ -22,87 +10,22 @@ type DashboardOverviewProps = {
};
};

export default function DashboardOverviewPage({
export default async function DashboardOverviewPage({
params,
}: DashboardOverviewProps) {
const { toast } = useToast();

const { data: organizations, isLoading } = useQuery({
queryKey: ["organizations", params.name],
queryFn: async () => {
const [organizations, err] = await getOwnOrganizations();


if (err !== null) {
toast({
title: "Error",
description: `Failed to fetch organizations: ${err.message}`,
});
router.push("/dashboard");
return [];
}

return organizations;
},
});

const router = useRouter();

const [listDisplay, setListDisplay] = useState(false);
const isCanBeRendered =
!isLoading && !organizations?.map((org) => org.name).includes(params.name);

useEffect(() => {
console.log(organizations);
if (isCanBeRendered) {
router.push("/dashboard");
}
}, [organizations, router]);

return (
!isLoading &&
organizations!.map((org) => org.name).includes(params.name) &&
params.name && (
<div className="mx-auto flex flex-col items-center md:px-2">
<div className="flex w-full max-w-[920px] flex-col justify-center gap-4">
<div className="flex">
<div className="flex flex-1">
<div className="rounded-lg rounded-r-none border border-r-0">
<SearchIcon className="m-2 h-5 w-6" />
</div>
<Input className="mr-2 rounded-l-none border-l-0 focus:outline-none" />
</div>
const [organizations, err] = await getOwnOrganizations();

<Toggle
variant="outline"
onClick={() => {
setListDisplay(!listDisplay);
}}
className="mr-2"
>
<StretchHorizontal />
</Toggle>
if (err !== null) {
throw err;
}

<Link href={`/dashboard/${params.name}/create-project`}>
<Button variant="outline">Add video</Button>
</Link>
</div>
</div>
const organization = organizations.find((org) => params.name === org.name);

{listDisplay ? (
<div className="my-5 flex flex-col justify-center gap-4">
{projectMockData?.map((video, index) => (
<VideoSmallCard key={index} video={video} />
))}
</div>
) : (
<div className="my-5 grid grid-cols-1 gap-5 lg:grid-cols-2 2xl:w-[1300px] 2xl:grid-cols-3">
{projectMockData?.map((video, index) => (
<VideoCard key={index} video={video} />
))}
</div>
)}
</div>
)
return organization ? (
<Suspense fallback={<div>Loading...</div>}>
<ProjectGrid organization={organization} />
</Suspense>
) : (
redirect("/404")
);
}
19 changes: 10 additions & 9 deletions apps/web/src/app/dashboard/error.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
"use client";

import { useRouter } from "next/navigation";
import { useEffect } from "react";
import Link from "next/link";
import { Button } from "~/components/ui/button";

export default function Error({
export default function ErrorPage({
error,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
const router = useRouter();

useEffect(() => {
console.error(error);
}, [error]);
console.error(error);

return (
<div>
<h2>Something went wrong! :(</h2>
<button onClick={() => router.push("/")}>Go back to homepage</button>

<pre>{JSON.stringify(error)}</pre>

<Link href="/">
<Button>Go back to homepage</Button>
</Link>
</div>
);
}
6 changes: 3 additions & 3 deletions apps/web/src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
} from "lucide-react";

import Navbar from "~/components/navbar";
import PrincingPlans from "~/components/pricing-plans";
import PricingPlans from "~/components/pricing-plans";

const features = [
{
Expand Down Expand Up @@ -36,7 +36,7 @@ const features = [
},
] as const;

export default function Home() {
export default function HomePage() {
return (
<div className="flex min-h-screen flex-col">
<div className="flex flex-col items-center justify-between border-b border-slate-200 bg-slate-100 p-2">
Expand Down Expand Up @@ -144,7 +144,7 @@ export default function Home() {
</div>
</div>

<PrincingPlans />
<PricingPlans />

<div className="py-24 text-gray-500">
<p className="text-center">
Expand Down
27 changes: 27 additions & 0 deletions apps/web/src/components/dashboard/project-card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import {
Card,
CardDescription,
CardHeader,
CardTitle,
} from "~/components/ui/card";
import type { Project } from "~/lib/validators/project";

interface ProjectCardProps {
project: Project;
}

export default function VideoCard({ project }: ProjectCardProps) {
return (
<Card className="max-w-[460px] hover:cursor-pointer hover:bg-slate-50">
<CardHeader>
<CardTitle className="h-6 text-base sm:text-2xl">
{project.title}
</CardTitle>

<CardDescription className="h-10 overflow-hidden">
{project.description}
</CardDescription>
</CardHeader>
</Card>
);
}
Loading

0 comments on commit d4a422e

Please sign in to comment.