🧺🍎 ↝ Can now upload images/media to classification posts

components/Content/ClassificationFeed.tsx

@@ -85,7 +85,7 @@ export function ClassificationFeedForIndividualPlanet(planetId) {
       const postsResponse = await supabase
         .from("classifications")
         // .select("id, content, created_at, author, anomaly, basePlanets, profiles(id, avatar_url, full_name, username)")
-        .select("id, created_at, content, anomaly, profiles(id, avatar_url, full_name, username)")
+        .select("id, created_at, content, anomaly, media, profiles(id, avatar_url, full_name, username)")
         .eq('anomaly', planetId.planetId.id)
         .order('created_at', { ascending: false });
 

components/Content/Classify/AnomalyPostFormCard.tsx

@@ -1,6 +1,7 @@
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import { ClimbingBoxLoader } from "react-spinners";
 
 export default function PostFormCardAnomalyTag({ onPost, planetId }) {
     const supabase = useSupabaseClient();
@@ -9,9 +10,9 @@ export default function PostFormCardAnomalyTag({ onPost, planetId }) {
     const [content, setContent] = useState('');
     const profile = session?.user?.id;
     const [avatar_url, setAvatarUrl] = useState(null);
-    /* const [uploads, setUploads] = useState([]);
+    const [uploads, setUploads] = useState([]);
     const [isUploading, setIsUploading] = useState(false);
-    const [userExperience, setUserExperience] = useState();
+    /* const [userExperience, setUserExperience] = useState();
     const [hasRequiredItem, setHasRequiredItem] = useState(false); */
 
     const router = useRouter();
@@ -28,7 +29,7 @@ export default function PostFormCardAnomalyTag({ onPost, planetId }) {
             .insert({
                 author: profile,
                 content,
-                // media: uploads
+                media: uploads,
                 // planets2: planetId,   
                 anomaly: planetId, // Set this to multiple anomaly types/foreign key options            
             }).then(response => {
@@ -57,6 +58,26 @@ export default function PostFormCardAnomalyTag({ onPost, planetId }) {
     }, [session]); */
 
     // Function to add media to the publication
+    async function addMedia ( e ) {
+        const files = e.target.files;
+        if (files.length > 0) {
+            setIsUploading(true);
+            for (const file of files) {
+                const fileName = Date.now() + session?.user?.id + file.name;
+                const result = await supabase.storage
+                    .from('media')
+                    .upload(fileName, file);
+
+                if (result.data) {
+                    const url = process.env.NEXT_PUBLIC_SUPABASE_URL + '/storage/v1/object/public/media/' + result.data.path;
+                    setUploads(prevUploads => [...prevUploads, url]);
+                } else {
+                    console.log(result);
+                }
+            }
+            setIsUploading(false);
+        };
+    };
 
     // Frontend output
     return (
@@ -71,6 +92,30 @@ export default function PostFormCardAnomalyTag({ onPost, planetId }) {
                     className="grow p-3 h-24 rounded-xl"
                     placeholder={`What do you think about this planet candidate, ${profile}?`}
                 />
+                {isUploading && (
+                    <div><ClimbingBoxLoader /></div>
+                )}
+                {isUploading && (
+                    <div className="flex gap-2 mt-4">
+                        {uploads.map(upload => (
+                            <div className=""><img src={upload} className="w-auto h-48 rounded-md" /></div>
+                        ))}
+                    </div>
+                )}
+                <div className="flex gap-5 items-center mt-2">
+                    <div>
+                        <label className="flex gap-1">
+                            <input type="file" className="hidden" onChange={addMedia} />
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" />
+                            </svg>
+                            <span className="hidden md:block">Media</span>
+                        </label>
+                    </div>
+                    <div className="grow text-right">
+                        <button onClick={createPost} className="bg-socialBlue text-white px-6 py-1 rounded-md">Share</button>
+                    </div>
+                </div>
                 <div className="text-center">
                     <button onClick={createPost} className="text-black px-2 py-1 rounded-md">Share</button>
                 </div>
@@ -119,7 +164,7 @@ export function PostFormCardAnomalyTagOldSchema({ onPost, planetId }) {
                 }
             });
 
-            // .then (update user experience/currency)
+            // .then (update user experience/currency)                                                                        
     }
 
     /* Get user avatar & other data

components/Content/DiscussCard.tsx

@@ -7,6 +7,7 @@ import { getMetaData } from "../../lib/helper/str.helper";
 import { Megaphone, MessagesSquare, Share2 } from "lucide-react";
 import Link from "next/link";
 import React, { useEffect, useState } from "react";
+import { useSession } from "@supabase/auth-helpers-react";
 
 type TProps = {
   id: number;
@@ -17,6 +18,7 @@ type TProps = {
     avatar_url: string;
     username: string;
   };
+  media: string[];
   planets2?: string;
   comments?: Comment[];
   _count: {
@@ -60,6 +62,7 @@ const CardForum: React.FC<TProps> = ({
   profiles,
   planets2,
   comments,
+  media,
   _count,
 }) => {
   const [reason, setReason] = useState("");
@@ -68,6 +71,12 @@ const CardForum: React.FC<TProps> = ({
     message: "",
   });
 
+  const session = useSession();
+
+  useEffect(() => {
+    console.log(media);
+  }, [session]);
+
   const [showComments, setShowComments] = useState(false);
 
   const { toast } = useToast();
@@ -145,6 +154,15 @@ const CardForum: React.FC<TProps> = ({
           <p className="mt-1 break-all max-w-full">
             {content}
           </p>
+          <div>
+            {media?.length > 0 && (
+              <div className="flex gap-4">
+                {media?.length > 0 && media.map(media => (
+                  <div key={media} className="rounded-md overflow-hidden"><img src={media} /></div>
+                ))}
+              </div>
+            )}
+          </div>
         </CardContent>
         <CardFooter className="p-0 flex-col items-start pb-2">
           <Separator className="mb-2" />

package.json

@@ -56,6 +56,7 @@
     "react": "^18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.48.2",
+    "react-spinners": "^0.13.8",
     "tailwind-merge": "^2.0.0",
     "tailwindcss": "^3.2.4",
     "tailwindcss-animate": "^1.0.7"

yarn.lock

@@ -4995,6 +4995,11 @@ react-is@^18.2.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-spinners@^0.13.8:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.13.8.tgz#5262571be0f745d86bbd49a1e6b49f9f9cb19acc"
+  integrity sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"