🥎🪁 ↝ Finished boilerplate of planet/anomaly profile index

components/AccountAvatar.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useSupabaseClient } from "@supabase/auth-helpers-react";
 import { Database } from "../utils/database.types";
 
-type Profiles = Database['public']['Tables']['profiles']['Row']
+type Profiles = Database['public']['Tables']['profiles']['Row'];
 
 export default function AccountAvatar ({
     uid,

components/Cover.tsx

@@ -25,7 +25,7 @@ export default function UserCoverImage ( { url, editable, onChange } ) {
                         cover: url,
                     })
                     .eq('id', session?.user?.id)
-                    .then(({data, error}) => {
+                    .then(({ data, error }) => {
                         if (error) throw error;
                         if (data && onChange) { onChange(); };
                     })

components/Generator/Subpage.tsx

@@ -7,7 +7,7 @@ export default function SubPage ( { header, children }: { header: string, childr
     return (
         <Layout>
             <Row>
-                <Col><h1 className="display-4">Hello {header}</h1></Col>
+                <Col><h1 className="display-4">{header}</h1></Col>
             </Row>
             {children}
         </Layout>

components/Planets/Cover.tsx

@@ -0,0 +1,51 @@
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
+
+import { useState } from "react";
+
+import { ClimbingBoxLoader } from "react-spinners";
+
+export default function PlanetCoverImage ( { url, editable, onChange } ) {
+    const supabase = useSupabaseClient();
+    const session = useSession(); // Users who "own" a dataset will be able to edit the datapoint. However, persistent & permanent history will be retained. Datasets CAN be forked separately/with articles/refs
+
+    const [isUploading, setIsUploading] = useState(false);
+
+    async function updateCover (e) {
+        const file = e.target.files?.[0];
+        if (file) {
+            setIsUploading(true);
+            const fileName = session?.user?.id + '_Planet_cover_' + Date.now(); // Include the planet name (from pages/planets/planet.tsx)
+            const { data, error } = await supabase.storage
+                .from('covers') // Should be changed to a planets/dataset>point buckets
+                .upload(fileName, file)
+
+                if (error) throw error;
+                if (data) {
+                    const url = process.env.NEXT_PUBLIC_SUPABASE_URL + '/storage/v1/object/public/covers/' + data.path;
+                    supabase.from('planets')
+                        .update({ cover: url, })
+                        .eq('id', session?.user?.id) // Should be set to the equivalent of `planet?.id`
+                        .then(({ data, error }) => {
+                            if (error) throw error;
+                            if (data && onChange) { onChange(); };
+                        });
+                    setIsUploading(false);
+                }
+        }
+    }
+
+    return (
+        <div className="h-60 overflow-hidden flex justify-center items-center relative">
+            <div><img src={url} alt="Planet's cover image"/></div>
+            {/*{isUploading && ( // Until the upload function goes to the correct bucket and refs the correct object, this should not be visible/interactable
+                <div className="absolute inset-0 bg-white bg-opacity-80% flex items-center z-10"><div className="inline-block mx-auto"><ClimbingBoxLoader /></div></div>
+            )}
+            {editable && (
+                <div className="items-center cursor-pointer absolute right-0 bottom-0 m-2"><label className="flex items-center gap-2 bg-white py-1 px-2 rounded-md shadow-md shadow-black cursor-pointer">
+                    <input type='file' onChange={updateCover} className='hidden' />
+                    <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="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" /><path strokeLinecap="round" strokeLinejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z" /></svg>Change cover image</label>
+                </div>
+            )}*/}
+        </div>
+    );
+}

components/Planets/PlanetAvatar.tsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from "react";
+
+import { Database } from "../../utils/database.types";
+import { useSupabaseClient } from "@supabase/auth-helpers-react";
+
+type Planets = Database['public']['Tables']['planets']['Row'];
+
+export default function PlanetAvatar ({ uid, url, size, /*onUpload*/ }: {
+    uid: string,
+    url: Planets['avatar_url'],
+    size: number,
+}) {
+    let width = 'w-12';
+    const [uploading, setUploading] = useState(false);
+
+    const supabase = useSupabaseClient<Database>();
+    const [avatarUrl, setAvatarUrl] = useState<Planets['avatar_url']>(null);
+
+    useEffect(() => {
+        if (url) downloadImage(url);
+    }, [url]);
+
+    async function downloadImage (path: string) {
+        try {
+            const { data, error } = await supabase.storage.from('avatars').download(path);
+            if (error) { throw error; };
+            const url = URL.createObjectURL(data);
+            setAvatarUrl(url);
+        } catch (error) {
+            console.log('Error download avatar: ', error);
+        };
+    };
+
+    const uploadAvatar: React.ChangeEventHandler<HTMLInputElement> = async (event) => { // Keep this function disabled until we've set up a differentiation between the upload behaviour (and backend structure) of profile avatars & planet/datapoint avatars
+        try {
+            setUploading(true);
+            if (!event.target.files || event.target.files.length === 0) { // If there is no file selected
+                throw new Error('You must select an image to upload');
+            };
+
+            const file = event.target.files[0];
+            const fileExt = file.name.split('.').pop();
+            const fileName = `${uid}.${fileExt}`;
+            const filePath = `${fileName}`;
+            let { error: uploadError } = await supabase.storage
+                .from('avatars')
+                .upload(filePath, file, { upsert: true })
+            if (uploadError) {
+                throw uploadError;
+            };
+
+            //onUpload(filePath);
+        } catch (error) {
+            alert('Error uploading avatar, check console');
+            console.log(error);
+        } finally {
+            setUploading(false);
+        }
+    }
+
+    return (
+        <div className="${width} rounded-full overflow-hidden">
+            {avatarUrl ? (
+                <img
+                    src={avatarUrl}
+                    alt='Avatar'
+                    className="avatar image"
+                    style={{ height: size, width: size }}
+                />
+            ) : (
+                <div className="avatar no-image" style={{ height: size, width: size }} />
+            )}
+            {/*
+            <div style={{ width: size }}>
+                <label className="button primary block" htmlFor='single'>
+                    {uploading ? 'Uploading ...': 'Upload'}
+                </label>
+                <input
+                    style={{
+                        visibility: 'hidden',
+                        position: 'absolute',
+                    }}
+                    type='file'
+                    id='single'
+                    accept='image/*'
+                    onChange={uploadAvatar}
+                    disabled={uploading} // Disabled once upload button/process clicked/initiated
+                />
+            </div>
+            */}
+        </div>
+    );
+}

components/Planets/PlanetCard.tsx

@@ -2,8 +2,10 @@ import React, { useEffect, useState } from "react";
 import Card from "../Card";
 
 import { useSupabaseClient } from "@supabase/auth-helpers-react";
+import { PlanetEditorFromData } from "../../pages/generator/planet-editor";
+import StakePlay from "../../pages/stake/play";
 
-export function PlanetCard ({ activeTab }) {
+export function PlanetCard ({ activeTab, planetId }) {
     const supabase = useSupabaseClient();
 
     return (
@@ -13,6 +15,25 @@ export function PlanetCard ({ activeTab }) {
                     Planet Name
                 </Card></div>
             )};
+            {activeTab === 'data' && (
+                <div><Card noPadding={false}>
+                    {/*<PlanetEditor />*/}
+                    <PlanetEditorFromData
+                        // temperature = planet?.temperature
+                    /> {/* Put inside pages/planets/planet.tsx underneath the tabs to see in action temporarily */}
+                </Card></div>
+            )}
+            {activeTab === 'refs' && (
+                <div><Card noPadding={false}>
+                    Planet Name
+                </Card></div>
+            )};
+            {activeTab === 'sandbox' && (
+                <div><Card noPadding={false}>
+                    Planet
+                    {/*<StakePlay />*/}
+                </Card></div>
+            )}
         </div>
     );
 };

components/Planets/PlanetNavigation.tsx

@@ -0,0 +1,36 @@
+import Link from "next/link";
+
+export default function PlanetTabs ({ planetId, activeTab }) {
+    const tabClasses = 'flex gap-1 px-4 py-1 items-center border-b-4 border-b-white';
+    const activeTabClasses = 'flex gap-1 px-4 py-1 items-center border-socialBlue border-b-4 text-socialBlue font-bold';
+
+    return (
+        <div className="mt-6 md:mt-10 flex gap-0">
+            <Link href={`/planets/${planetId}/`} className={activeTab === 'planet' ? activeTabClasses : tabClasses}>
+                <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="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
+                </svg>
+                <span className="hidden sm:block">Bio</span>
+            </Link>
+            <Link href={`/planets/${planetId}/data`} className={activeTab === 'data' ? activeTabClasses : tabClasses}>
+                <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="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25" />
+                </svg>
+                <span className="hidden sm:block">Datasets</span>
+            </Link>
+            <Link href={`/planets/${planetId}/refs`} className={activeTab === 'refs' ? activeTabClasses : tabClasses}> {/* Posts that mention/use the planetId */}
+                <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="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 6h.008v.008H6V6z" />
+                </svg>
+                <span className="hidden sm:block">Article Refs</span>
+            </Link>
+            <Link href={`/planets/${planetId}/sandbox`} className={activeTab === 'sandbox' ? activeTabClasses : tabClasses}>
+                <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="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
+                </svg>
+                <span className="hidden sm:block">Sandbox</span>
+            </Link>
+        </div>
+    )
+}

package.json

@@ -40,7 +40,7 @@
     "rc-slider": "^10.1.1",
     "rc-tooltip": "^6.0.1",
     "react": "18.2.0",
-    "react-bootstrap": "1.0.0-beta.12",
+    "react-bootstrap": "^2.7.2",
     "react-clickout-handler": "^1.2.1",
     "react-color": "^2.19.3",
     "react-dom": "18.2.0",