🧑🏻‍💼🪲 ↝ Projects now ref'd by ipfs upload

Author: Gizmotronn

components/Content/CheckUserData.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from "react";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import dayjs from "dayjs";
+
+interface Post {
+  id: number;
+  content: string;
+  author: string;
+  created_at: string;
+  planets: string;
+}
+
+const CheckPostsOld: React.FC = () => {
+  const supabase = useSupabaseClient();
+  const session = useSession();
+  const [posts, setPosts] = useState<Post[]>([]);
+
+  useEffect(() => {
+    const fetchPosts = async () => {
+      try {
+        const { data, error } = await supabase
+          .from("posts_old")
+          .select("*")
+          .eq("author", session?.user?.id)
+          .gte("created_at", dayjs("2024-01-01").toISOString()); // Filter posts after Jan 1, 2024
+
+        if (error) {
+          console.error("Error fetching posts:", error.message);
+          return;
+        }
+
+        if (data) {
+          setPosts(data);
+        }
+      } catch (error) {
+        console.error("Error fetching posts:", error.message);
+      }
+    };
+
+    if (session?.user?.id) {
+      fetchPosts();
+    }
+  }, [supabase, session]);
+
+  return (
+    <div className="p-4">
+      <h2 className="text-xl font-bold mb-4">Your project nodes after January 1, 2024:</h2>
+      {posts.length === 0 ? (
+        <p>No project nodes found after January 1, 2024.</p>
+      ) : (
+        <ul>
+          {posts.map((post) => (
+            <li key={post.id} className="mb-4">
+              <p>{post.content}</p>
+              <p className="text-sm text-gray-500">Created at: {post.created_at}</p>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default CheckPostsOld;

components/Content/UploadToProject.tsx

@@ -0,0 +1,97 @@
+import { useSession, 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/";
+
+interface FileUploadProps {
+  projectId: number; // Pass project ID as prop
+}
+
+const UploadFileToRepo: NextPage<FileUploadProps> = ({ projectId }) => {
+  const supabase = useSupabaseClient();
+  const session = useSession();
+
+  const [uris, setUris] = useState<string[]>([]);
+
+  const { mutateAsync: upload } = useStorageUpload();
+
+  const uploadAndAddToSupabase = useCallback(async (files: File[]) => {
+    try {
+      const uris = await upload({ data: files });
+
+      // Add URIs to Supabase table
+      const { error, data } = await supabase.from('comments').insert(
+        uris.map(uri => ({
+          content: uri,
+          author: session?.user?.id,
+          parent: projectId, // Associate with project ID
+        }))
+      );
+
+      if (error) {
+        console.error("Error inserting data into Supabase:", error.message);
+        return;
+      };
+
+      console.log("Data inserted successfully:", data);
+
+      setUris(uris);
+    } catch (error) {
+      console.error("Error uploading files and adding to Supabase:", error);
+    }
+  }, [upload, supabase, session?.user?.id, projectId]);
+
+  const fetchAndRenderFromSupabase = useCallback(async () => {
+    try {
+      const { data, error } = await supabase
+        .from("comments")
+        .select("content")
+        .gte("id", 23)
+        .lt("id", 29)
+        .eq("author", session?.user?.id)
+        .eq("parent", projectId); // Fetch files associated with project ID
+
+      if (error) {
+        console.error("Error fetching files from Supabase:", error.message);
+        return;
+      }
+      
+      if (data) {
+        const urisFromSupabase = data.map((row: any) => row.content);
+        setUris(urisFromSupabase);
+      }
+    } catch (error: any) {
+      console.error("Error fetching files from Supabase:", error.message);
+    }
+  }, [session?.user?.id, supabase, projectId]);
+
+  useEffect(() => {
+    fetchAndRenderFromSupabase();
+  }, [fetchAndRenderFromSupabase]);
+
+  const onDrop = useCallback(async (acceptedFiles: File[]) => {
+    await uploadAndAddToSupabase(acceptedFiles);
+  }, [uploadAndAddToSupabase]);
+
+  const { getRootProps, getInputProps } = useDropzone({ onDrop });
+
+  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>
+  );
+};
+
+export default UploadFileToRepo;

package.json

@@ -29,6 +29,7 @@
     "@thirdweb-dev/sdk": "^4",
     "axios": "^1.6.2",
     "clsx": "^2.1.0",
+    "dayjs": "^1.11.10",
     "ethers": "^5",
     "lucide-react": "^0.293.0",
     "next": "^13.0.2",

pages/index.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/router";
 import { Metadata } from "next";
 import FileUpload from "../components/Content/FileUpload";
 import CreateNode from "../components/Content/CreateRepo";
+import CheckPostsOld from "../components/Content/CheckUserData";
 
 export const metadata: Metadata = {
   title: "Star Sailors",
@@ -27,6 +28,7 @@ export default function Home() {
         {/* {userId} */}
         <div className="flex flex-col gap-4">
           <CreateNode />
+          <CheckPostsOld />
           <FileUpload />
         </div>
       </Layout>

pages/project/[id].tsx

@@ -0,0 +1,69 @@
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
+import Layout from "../../components/Section/Layout";
+import UploadFileToRepo from "../../components/Content/UploadToProject";
+
+interface Post {
+  id: number;
+  content: string;
+  author: string;  
+  created_at: string;
+  media: any[]; 
+  planets: string;
+}
+
+const ProjectDetailPage = () => {
+  const router = useRouter();
+  const { id } = router.query;
+  const supabase = useSupabaseClient();
+  const [post, setPost] = useState<Post | null>(null);
+
+  useEffect(() => {
+    const fetchPost = async () => {
+      try {
+        if (!id || Array.isArray(id)) return;
+
+        const postId = parseInt(id as string);   
+
+        const { data, error } = await supabase
+          .from("posts_old")
+          .select("*")
+          .eq("id", postId)
+          .single();   
+
+        if (error) {
+          console.error("Error fetching post:", error.message);
+          return;
+        }
+
+        if (data) {
+          setPost(data);
+        }
+      } catch (error) {
+        console.error("Error fetching post:", error.message);
+      }
+    };
+
+    fetchPost();
+  }, [id, supabase]);
+
+  if (!post) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <Layout>
+        <div>
+        <h1>Project Detail</h1>
+        <p>ID: {post.id}</p>
+        <p>Content: {post.content}</p>
+        <p>Author: {post.author}</p>
+        <p>Created At: {post.created_at}</p>
+        <UploadFileToRepo projectId={post.id} />
+        </div>
+    </Layout>
+  );
+};
+
+export default ProjectDetailPage;

yarn.lock

@@ -4380,6 +4380,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+dayjs@^1.11.10:
+  version "1.11.10"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
+  integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
+
 death@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/death/-/death-1.1.0.tgz"