👃🏻🧟‍♀️ ↝ Content dir

Author: Gizmotronn

components/Avatar.tsx

@@ -0,0 +1,75 @@
+import { useSupabaseClient } from "@supabase/auth-helpers-react";
+import { ConnectWallet, useStorageUpload, MediaRenderer } from "@thirdweb-dev/react";
+import { NextPage } from "next";
+import { useCallback, useEffect, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { useMutation, useQuery } from "react-query";
+
+const IPFS_GATEWAY = "https://d4b4e2e663a6efce5f7f8310426ba24a.ipfscdn.io/ipfs/";
+
+export default function FileUpload() {
+  const supabase = useSupabaseClient();
+  const [uris, setUris] = useState<string[]>([]);
+
+  const { mutateAsync: upload } = useStorageUpload();
+  const onDrop = useCallback(
+    async (acceptedFiles: File[]) => {
+      const _uris = await upload({ data: acceptedFiles });
+      setUris(_uris);
+    },
+    [upload],
+  );
+
+  const { getRootProps, getInputProps } = useDropzone({ onDrop });
+
+  const uploadAndAddToSupabase = async (files: File[]) => {
+    try {
+      const uris = await upload({ data: files });
+      setUris(uris);
+
+      // Add URIs to Supabase table
+      for (const uri of uris) {
+        supabase.from('files')
+          .insert({
+            filename: uri
+          });
+      }
+    } catch (error) {
+      console.error("Error uploading files and adding to Supabase:", error);
+    }
+  };
+
+  const fetchAndRenderFromSupabase = async () => {
+    try {
+      const { data, error } = await supabase.from("files").select("file_url");
+      if (error) {
+        console.error("Error fetching files from Supabase:", error.message);
+        return;
+      }
+      if (data) {
+        const urisFromSupabase = data.map((row: any) => row.file_url);
+        setUris(urisFromSupabase);
+      }
+    } catch (error: any) {
+      console.error("Error fetching files from Supabase:", error.message);
+    }
+  };
+
+  useEffect(() => {
+    fetchAndRenderFromSupabase();
+  }, []);
+
+  return (
+    <div>
+      <div {...getRootProps()}>
+        <input {...getInputProps()} />
+        <button>Drop files to upload them to IPFS</button>
+      </div>
+      <div>
+        {uris.map((uri) => (
+          <MediaRenderer key={uri} src={uri} alt="image" />
+        ))}
+      </div>
+    </div>
+  );
+};

components/Content/FileUpload.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
-import { cn } from "../../lib/uitls";
+import { cn } from "../../lib/utils";
 
 const Avatar = React.forwardRef<
 React.ElementRef<typeof AvatarPrimitive.Root>,

components/Section/Navbar.tsx

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+};

components/ui/Avatar.tsx

@@ -18,28 +18,32 @@
     "test-api": "cd server && venv/bin/activate && flask test"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.1",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@supabase/auth-helpers-nextjs": "^0.8.7",
     "@supabase/auth-helpers-react": "^0.3.1",
     "@supabase/auth-ui-react": "^0.2.6",
     "@supabase/supabase-js": "^2.13.1",
     "@supabase/ui": "^0.36.5",
+    "@thirdweb-dev/react": "^4",
+    "@thirdweb-dev/sdk": "^4",
     "axios": "^1.6.2",
+    "clsx": "^2.1.0",
+    "ethers": "^5",
     "lucide-react": "^0.293.0",
     "next": "^13.0.2",
     "package.json": "^2.0.1",
     "postcss": "^8.4.21",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.48.2",
+    "react-icons": "^5.0.1",
+    "react-query": "^3.39.3",
     "react-spinners": "^0.13.8",
-    "tailwind-merge": "^2.0.0",
+    "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.2.4",
-    "tailwindcss-animate": "^1.0.7",
-    "@thirdweb-dev/react": "^4",
-    "@thirdweb-dev/sdk": "^4",
-    "ethers": "^5",
-    "react-dropzone": "^14.2.3",
-    "react-query": "^3.39.3"
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@capacitor/cli": "^5.5.1",

lib/utils.ts

@@ -2,7 +2,6 @@ import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import React, { useEffect, useState } from "react";
 import CoreLayout from "../components/Core/Layout";
 import Layout from "../components/Section/Layout";
-import CardForum from "../components/Content/DiscussCard";
 import { useRouter } from "next/router";
 import Login from "./login";
 
@@ -24,12 +23,6 @@ export default function Home() {
 
     const userId = session?.user?.id;
 
-    useEffect(() => {
-        if (session) {
-            router.push('/feed');
-        }
-    }, [session, router]);
-
     if (session) {
     return (
       <Layout>

package.json

@@ -56,14 +56,14 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b"
   integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==
 
-"@babel/runtime@^7.12.5", "@babel/runtime@^7.17.2", "@babel/runtime@^7.23.4", "@babel/runtime@^7.23.8", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2":
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.17.2", "@babel/runtime@^7.23.4", "@babel/runtime@^7.23.7", "@babel/runtime@^7.23.8", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
   integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.13.10", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.1", "@babel/runtime@^7.23.2":
+"@babel/runtime@^7.13.10", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2":
   version "7.23.5"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz"
   integrity sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==
@@ -756,6 +756,11 @@
   dependencies:
     client-only "^0.0.1"
 
+"@heroicons/react@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.1.1.tgz#422deb80c4d6caf3371aec6f4bee8361a354dc13"
+  integrity sha512-JyyN9Lo66kirbCMuMMRPtJxtKJoIsXKS569ebHGGRKbl8s4CtUfLnyKJxteA+vIKySocO4s1SkTkGS4xtG/yEA==
+
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.13"
   resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz"
@@ -1399,6 +1404,17 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-avatar@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-avatar/-/react-avatar-1.0.4.tgz#de9a5349d9e3de7bbe990334c4d2011acbbb9623"
+  integrity sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
 "@radix-ui/react-collection@1.0.3":
   version "1.0.3"
   resolved "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz"
@@ -4073,6 +4089,11 @@ clsx@^1.1.0:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
+clsx@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
+  integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
+
 cluster-key-slot@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz#88ddaa46906e303b5de30d3153b7d9fe0a0c19ac"
@@ -9213,6 +9234,11 @@ react-hook-form@^7.48.2:
   resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.48.2.tgz"
   integrity sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==
 
+react-icons@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.0.1.tgz#1694e11bfa2a2888cab47dcc30154ce90485feee"
+  integrity sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -10324,12 +10350,12 @@ table-layout@^1.0.2:
     typical "^5.2.0"
     wordwrapjs "^4.0.0"
 
-tailwind-merge@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.0.0.tgz"
-  integrity sha512-WO8qghn9yhsldLSg80au+3/gY9E4hFxIvQ3qOmlpXnqpDKoMruKfi/56BbbMg6fHTQJ9QD3cc79PoWqlaQE4rw==
+tailwind-merge@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.2.1.tgz#3f10f296a2dba1d88769de8244fafd95c3324aeb"
+  integrity sha512-o+2GTLkthfa5YUt4JxPfzMIpQzZ3adD1vLVkvKE1Twl9UAhGsEbIZhHHZVRttyW177S8PDJI3bTQNaebyofK3Q==
   dependencies:
-    "@babel/runtime" "^7.23.1"
+    "@babel/runtime" "^7.23.7"
 
 tailwindcss-animate@^1.0.7:
   version "1.0.7"