setup convex

bahiensed · Jul 22, 2024 · 749313f · 749313f
1 parent 20e45a8
commit 749313f
Show file tree

Hide file tree

Showing 14 changed files with 572 additions and 7 deletions.
diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
@@ -1,4 +1,6 @@
+import Image from 'next/image';
 import LeftSideBar from '@/components/LeftSideBar';
+import MobileNav from '@/components/MobileNav';
 import RightSideBar from '@/components/RightSideBar';
 
 export default function RootLayout({
@@ -7,10 +9,28 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div>
-      <main>
+    <div className='relative flex flex-col'>
+      <main className='relative flex bg-black-3'>
         <LeftSideBar />
-        {children}
+
+        <section className='flex min-h-screen flex-1 flex-col px-4  sm:px-14'>
+          <div className='mx-auto flex w-full max-w-5xl flex-col max-sm:px-4'>
+            <div className='flex h-16 items-center justify-between md:hidden'>
+
+              <Image alt='Menu Icon' src='/icons/logo.svg' width={30} height={30}/>
+              <MobileNav />
+
+            </div>
+
+            <div className='flex flex-col md:pb-14'>
+
+              Toaster
+              {children}
+
+            </div>
+          </div>
+        </section>
+
         <RightSideBar />
       </main>
     </div>

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
@@ -1,12 +1,34 @@
-import React from 'react'
-import { Button } from '@/components/ui/button'
+"use client";
+
+import { useQuery } from "convex/react";
+import PodcastCard from '@/components/PodcastCard'
+import { PodcastData } from '@/constants'
+import { api } from "@/convex/_generated/api";
 
 const Home = () => {
+  const tasks = useQuery(api.tasks.get);
   return (
     <div className='flex flex-col gap-9 mt-9'>
       <section className='flex flex-col gap-5'>
         <h1 className='font-bold text-20 text-white-1'>Trending Podcasts</h1>
-        <Button className='bg-orange-1 text-white-1'>Button</Button>
+
+
+        <div className="flex min-h-screen flex-col items-center justify-between text-white-1 p-24">
+          {tasks?.map(({ _id, text }) => <div key={_id}>{text}</div>)}
+        </div>
+
+
+        <div className='podcast_grid'>
+          {PodcastData.map(({id, title, description, imgURL}) => (
+            <PodcastCard
+              key={id}
+              id={id}
+              title={title}
+              description={description}
+              imgURL={imgURL as string}
+            />
+          ))}
+        </div>
       </section>
     </div>
   )

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,7 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
+import { ConvexClientProvider } from "@/providers/ConvexClientProvider";
+
 import '@/styles/globals.css';
 
 const inter = Inter({ subsets: ['latin'] });
@@ -18,7 +20,9 @@ export default function RootLayout({
   return (
     <html lang='en'>
       <body className={inter.className}>
-        {children}
+        <ConvexClientProvider>
+          {children}
+        </ConvexClientProvider>
       </body>
     </html>
   );

diff --git a/components/PodcastCard.tsx b/components/PodcastCard.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import Image from 'next/image'
+
+const PodcastCard = ({
+  id, title, description, imgURL
+}: {
+    id: number,
+    title: string,
+    description: string,
+    imgURL: string,
+}) => {
+  return (
+    <div className='cursor-pointer'>
+      <figure className='flex flex-col gap-2'>
+        <Image
+          className='aspect-square h-fit w-full rounded-xl 2xl:size[200px]'
+          alt={title}
+          src={imgURL}
+          width={174}
+          height={174}
+        />
+        <div className='flex flex-col'>
+          <h2 className='text-16 truncate font-bold text-white-1'>{title}</h2>
+          <p className='text-12 truncate font-normal capitalizet text-white-4'>{description}</p>
+        </div>
+      </figure>
+    </div>
+  )
+}
+
+export default PodcastCard
diff --git a/convex/README.md b/convex/README.md
@@ -0,0 +1,90 @@
+# Welcome to your Convex functions directory!
+
+Write your Convex functions here.
+See https://docs.convex.dev/functions for more.
+
+A query function that takes two arguments looks like:
+
+```ts
+// functions.js
+import { query } from "./_generated/server";
+import { v } from "convex/values";
+
+export const myQueryFunction = query({
+  // Validators for arguments.
+  args: {
+    first: v.number(),
+    second: v.string(),
+  },
+
+  // Function implementation.
+  handler: async (ctx, args) => {
+    // Read the database as many times as you need here.
+    // See https://docs.convex.dev/database/reading-data.
+    const documents = await ctx.db.query("tablename").collect();
+
+    // Arguments passed from the client are properties of the args object.
+    console.log(args.first, args.second);
+
+    // Write arbitrary JavaScript here: filter, aggregate, build derived data,
+    // remove non-public properties, or create new objects.
+    return documents;
+  },
+});
+```
+
+Using this query function in a React component looks like:
+
+```ts
+const data = useQuery(api.functions.myQueryFunction, {
+  first: 10,
+  second: "hello",
+});
+```
+
+A mutation function looks like:
+
+```ts
+// functions.js
+import { mutation } from "./_generated/server";
+import { v } from "convex/values";
+
+export const myMutationFunction = mutation({
+  // Validators for arguments.
+  args: {
+    first: v.string(),
+    second: v.string(),
+  },
+
+  // Function implementation.
+  handler: async (ctx, args) => {
+    // Insert or modify documents in the database here.
+    // Mutations can also read from the database like queries.
+    // See https://docs.convex.dev/database/writing-data.
+    const message = { body: args.first, author: args.second };
+    const id = await ctx.db.insert("messages", message);
+
+    // Optionally, return a value from your mutation.
+    return await ctx.db.get(id);
+  },
+});
+```
+
+Using this mutation function in a React component looks like:
+
+```ts
+const mutation = useMutation(api.functions.myMutationFunction);
+function handleButtonPress() {
+  // fire and forget, the most common way to use mutations
+  mutation({ first: "Hello!", second: "me" });
+  // OR
+  // use the result once the mutation has completed
+  mutation({ first: "Hello!", second: "me" }).then((result) =>
+    console.log(result),
+  );
+}
+```
+
+Use the Convex CLI to push your functions to a deployment. See everything
+the Convex CLI can do by running `npx convex -h` in your project root
+directory. To learn more, launch the docs with `npx convex docs`.
diff --git a/convex/_generated/api.d.ts b/convex/_generated/api.d.ts
@@ -0,0 +1,37 @@
+/* eslint-disable */
+/**
+ * Generated `api` utility.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * Generated by convex@1.13.2.
+ * To regenerate, run `npx convex dev`.
+ * @module
+ */
+
+import type {
+  ApiFromModules,
+  FilterApi,
+  FunctionReference,
+} from "convex/server";
+import type * as tasks from "../tasks.js";
+
+/**
+ * A utility for referencing Convex functions in your app's API.
+ *
+ * Usage:
+ * ```js
+ * const myFunctionReference = api.myModule.myFunction;
+ * ```
+ */
+declare const fullApi: ApiFromModules<{
+  tasks: typeof tasks;
+}>;
+export declare const api: FilterApi<
+  typeof fullApi,
+  FunctionReference<any, "public">
+>;
+export declare const internal: FilterApi<
+  typeof fullApi,
+  FunctionReference<any, "internal">
+>;
diff --git a/convex/_generated/api.js b/convex/_generated/api.js
@@ -0,0 +1,23 @@
+/* eslint-disable */
+/**
+ * Generated `api` utility.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * Generated by convex@1.13.2.
+ * To regenerate, run `npx convex dev`.
+ * @module
+ */
+
+import { anyApi } from "convex/server";
+
+/**
+ * A utility for referencing Convex functions in your app's API.
+ *
+ * Usage:
+ * ```js
+ * const myFunctionReference = api.myModule.myFunction;
+ * ```
+ */
+export const api = anyApi;
+export const internal = anyApi;
diff --git a/convex/_generated/dataModel.d.ts b/convex/_generated/dataModel.d.ts
@@ -0,0 +1,59 @@
+/* eslint-disable */
+/**
+ * Generated data model types.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * Generated by convex@1.13.2.
+ * To regenerate, run `npx convex dev`.
+ * @module
+ */
+
+import { AnyDataModel } from "convex/server";
+import type { GenericId } from "convex/values";
+
+/**
+ * No `schema.ts` file found!
+ *
+ * This generated code has permissive types like `Doc = any` because
+ * Convex doesn't know your schema. If you'd like more type safety, see
+ * https://docs.convex.dev/using/schemas for instructions on how to add a
+ * schema file.
+ *
+ * After you change a schema, rerun codegen with `npx convex dev`.
+ */
+
+/**
+ * The names of all of your Convex tables.
+ */
+export type TableNames = string;
+
+/**
+ * The type of a document stored in Convex.
+ */
+export type Doc = any;
+
+/**
+ * An identifier for a document in Convex.
+ *
+ * Convex documents are uniquely identified by their `Id`, which is accessible
+ * on the `_id` field. To learn more, see [Document IDs](https://docs.convex.dev/using/document-ids).
+ *
+ * Documents can be loaded using `db.get(id)` in query and mutation functions.
+ *
+ * IDs are just strings at runtime, but this type can be used to distinguish them from other
+ * strings when type checking.
+ */
+export type Id<TableName extends TableNames = TableNames> =
+  GenericId<TableName>;
+
+/**
+ * A type describing your Convex data model.
+ *
+ * This type includes information about what tables you have, the type of
+ * documents stored in those tables, and the indexes defined on them.
+ *
+ * This type is used to parameterize methods like `queryGeneric` and
+ * `mutationGeneric` to make them type-safe.
+ */
+export type DataModel = AnyDataModel;