diff --git a/components/Content/ClassificationFeed.tsx b/components/Content/ClassificationFeed.tsx index 12d3c441..ac94f9d7 100644 --- a/components/Content/ClassificationFeed.tsx +++ b/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 }); diff --git a/components/Content/Classify/AnomalyPostFormCard.tsx b/components/Content/Classify/AnomalyPostFormCard.tsx index 5ea7ddb5..493359b2 100644 --- a/components/Content/Classify/AnomalyPostFormCard.tsx +++ b/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 && ( +
+ )} + {isUploading && ( +
+ {uploads.map(upload => ( +
+ ))} +
+ )} +
+
+ +
+
+ +
+
@@ -119,7 +164,7 @@ export function PostFormCardAnomalyTagOldSchema({ onPost, planetId }) { } }); - // .then (update user experience/currency) + // .then (update user experience/currency) } /* Get user avatar & other data diff --git a/components/Content/DiscussCard.tsx b/components/Content/DiscussCard.tsx index d7f6d75f..d7025624 100644 --- a/components/Content/DiscussCard.tsx +++ b/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 = ({ profiles, planets2, comments, + media, _count, }) => { const [reason, setReason] = useState(""); @@ -68,6 +71,12 @@ const CardForum: React.FC = ({ 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 = ({

{content}

+
+ {media?.length > 0 && ( +
+ {media?.length > 0 && media.map(media => ( +
+ ))} +
+ )} +
diff --git a/package.json b/package.json index b02224df..41eb7117 100644 --- a/package.json +++ b/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" diff --git a/yarn.lock b/yarn.lock index 70871fef..1ad511e7 100644 --- a/yarn.lock +++ b/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"