Add public draft display

app/(userpages)/layout.tsx

@@ -8,7 +8,6 @@ import { useAuth } from '@clerk/nextjs'
 import { UserPageHeader } from '@/app/components/(userpages)/profile/UserPageHeader'
 
 import { Aside } from '../components/(userpages)/profile/aside'
-import { UserContext } from '../resources/contexts/usercontext'
 import { UserProviderWrapper } from '../resources/contexts/UserProviderWrapper'
 
 export default function ProfileBaseLayout({

app/(weaver)/weaver/library/page.scss

@@ -0,0 +1,9 @@
+.library-content {
+    margin: 2rem;
+
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 2rem;
+}

app/(weaver)/weaver/library/page.tsx

@@ -0,0 +1,60 @@
+'use client'
+import './page.scss'
+
+import { useEffect, useState } from 'react'
+
+import { PublicDraftCard } from '@/app/components/library/publicDraftCard'
+import { Header } from '@/app/components/zSharedComponents/Header'
+
+export default function LibraryPage() {
+
+    const [publicDrafts, setPublicDrafts]=useState<PublicDraftList|null>(null)
+
+//TODO: Add second state and components for filtering/sorting
+
+    useEffect(()=>{
+        const getPublicDrafts = async () => {
+
+            try {
+                let response = await fetch('/api/public/drafts')
+
+                if (response.status == 200) {
+
+                    const body = await response.json();
+                    const { publicDraftList } = body
+                    setPublicDrafts(publicDraftList)
+                }
+            } catch (error) {
+            console.log(error)
+            }
+        }
+
+        getPublicDrafts()
+
+    },[])
+
+
+
+    return (
+        <div id='library-page'>
+            <Header title="You are in the library" text="Browse awailable drafts to be inspired" />
+
+                {publicDrafts ?
+                    <div className='library-content'>
+                        {publicDrafts.map((draft, index) => {
+                            if (!draft) return (null)
+                            else {
+                                return (<PublicDraftCard key={index} draft={draft} />)
+                            }
+                        })}
+                    </div> : <div>Loading drafts</div>}
+
+
+                {publicDrafts && publicDrafts.length == 0 ?
+                    <div >
+                        No public drafts to show
+                    </div> : null}
+
+        </div>
+    )
+}

app/api/[userId]/draft/[id]/route.ts

@@ -18,7 +18,7 @@ export async function GET(
 
     try {
         const db = await dbConnection() as Db
-        let dbResponse = await db.collection('drafts').findOne({ _id, userId })
+        let dbResponse = await db.collection('drafts').findOne({ _id, owner:userId })
 
         if (!dbResponse) {
             return new NextResponse(null, { status: 204 });
@@ -50,7 +50,7 @@ export async function DELETE(
 
     try {
         const db = await dbConnection() as Db
-        let dbResponse = await db.collection('drafts').deleteOne({ _id, userId })
+        let dbResponse = await db.collection('drafts').deleteOne({ _id, owner:userId })
 
         if (dbResponse.deletedCount !== 1) {
             return new NextResponse('No weave to update found', { status: 204 });
@@ -86,7 +86,7 @@ export async function PATCH(
         const body = await req.json();
         const { weaveObject, publicStatus } = body.values
 
-        let dbResponse = await db.collection('drafts').updateOne({ _id, userId }, { $set: { weave: weaveObject, updated: Date.now(), public: publicStatus } })
+        let dbResponse = await db.collection('drafts').updateOne({ _id, owner:userId }, { $set: { weave: weaveObject, updated: Date.now(), public: publicStatus } })
 
         if (dbResponse.modifiedCount !== 1) {
             return new NextResponse('No weave to update found', { status: 204 });

app/api/[userId]/draft/route.ts

@@ -18,7 +18,7 @@ export async function GET(
 
     try {
         const db = await dbConnection() as Db
-        let dbResponse = await db.collection('drafts').findOne({ userId: userId })
+        let dbResponse = await db.collection('drafts').findOne({ owner: userId })
 
         if (dbResponse) {
             const draftDocument = dbResponse
@@ -59,7 +59,7 @@ export async function POST(
         const db = await dbConnection() as Db
         const body = await req.json();
         const { weaveObject, name } = body.values
-        let newDocument: DraftDocument = { userId, name, weave: weaveObject, created: Date.now(), updated: Date.now(), public: false }
+        let newDocument: DraftDocument = { owner:userId, name, weave: weaveObject, created: Date.now(), updated: Date.now(), public: false }
         let dbResponse = await db.collection('drafts').insertOne(newDocument)
 
         console.log(dbResponse)
@@ -87,7 +87,7 @@ export async function DELETE(
 
     try {
         const db = await dbConnection() as Db
-        let dbResponse = await db.collection('drafts').deleteOne({ _id, userId })
+        let dbResponse = await db.collection('drafts').deleteOne({ _id, owner:userId })
 
         if (dbResponse.deletedCount !== 1) {
             return new NextResponse('No draft to delete found', { status: 200 });

app/api/[userId]/drafts/route.ts

@@ -15,7 +15,7 @@ export async function GET(
 
     try {
         const db = await dbConnection() as Db
-        let dbResponse = await db.collection('drafts').find({ userId: userId }).toArray()
+        let dbResponse = await db.collection('drafts').find({ owner: userId }).toArray()
 
         let draftList: DraftList = []
 

app/api/[userId]/loom/[id]/route.ts

@@ -18,7 +18,7 @@ export async function GET(
 
     try {
         const db = await dbConnection() as Db
-        let dbResponse = await db.collection('looms').findOne({ _id, userId })
+        let dbResponse = await db.collection('looms').findOne({ _id, owner:userId })
 
         //Return empty if no content is found in DB
         if (!dbResponse) {
@@ -60,7 +60,7 @@ export async function DELETE(
 
     try {
         const db = await dbConnection() as Db
-        let dbResponse = await db.collection('looms').deleteOne({ _id, userId })
+        let dbResponse = await db.collection('looms').deleteOne({ _id, owner:userId })
 
         if (dbResponse.deletedCount !== 1) {
             return new NextResponse('No loom to delete found', { status: 200 });
@@ -97,7 +97,7 @@ export async function PUT(
         const { loom } = body.values
         const { shafts, treadles, brand, type }:Loom=loom
 
-        let dbResponse = await db.collection('looms').updateOne({ _id, userId },  { $set:{shafts, treadles, brand, type} } )
+        let dbResponse = await db.collection('looms').updateOne({ _id, owner:userId },  { $set:{shafts, treadles, brand, type} } )
 
         if (dbResponse.modifiedCount !== 1) {
             return new NextResponse('No loom to update found', { status: 200 });

app/api/[userId]/loom/route.ts

@@ -20,7 +20,7 @@ export async function POST(
         const { loom } = body.values
         const { shafts, treadles, brand, type }:Loom=loom
 
-        let newDocument:LoomDocument  = { userId, shafts, treadles, brand, type}
+        let newDocument:LoomDocument  = { owner:userId, shafts, treadles, brand, type}
         let dbResponse = await db.collection('looms').insertOne(newDocument)
 
         return NextResponse.json({createdId:dbResponse.insertedId.toString()}, { status: 201 });

app/api/[userId]/looms/route.ts

@@ -17,7 +17,7 @@ export async function GET(
 
     try {
         const db = await dbConnection() as Db
-        let dbResponse = await db.collection('looms').find({ userId: userId }).toArray()
+        let dbResponse = await db.collection('looms').find({ owner: userId }).toArray()
 
         let loomList:LoomList=[]
 

app/api/[userId]/reed/[id]/route.tsx

@@ -18,7 +18,7 @@ export async function GET(
 
     try {
         const db = await dbConnection() as Db
-        let dbResponse = await db.collection('reeds').findOne({ _id, userId })
+        let dbResponse = await db.collection('reeds').findOne({ _id, owner:userId })
 
         //Return empty if no content is found in DB
         if (!dbResponse) {
@@ -59,7 +59,7 @@ export async function DELETE(
 
     try {
         const db = await dbConnection() as Db
-        let dbResponse = await db.collection('reeds').deleteOne({ _id, userId })
+        let dbResponse = await db.collection('reeds').deleteOne({ _id, owner:userId })
 
         if (dbResponse.deletedCount !== 1) {
             return new NextResponse('No reed to delete found', { status: 200 });
@@ -96,7 +96,7 @@ export async function PUT(
         const { reed } = body.values
         const { dents, section, unit, length}:Reed=reed
 
-        let dbResponse = await db.collection('reeds').updateOne({ _id, userId },  { $set:{dents, section, unit, length} } )
+        let dbResponse = await db.collection('reeds').updateOne({ _id, owner:userId },  { $set:{dents, section, unit, length} } )
 
         if (dbResponse.modifiedCount !== 1) {
             return new NextResponse('No reed to update found', { status: 200 });

app/api/[userId]/reed/route.ts

@@ -20,7 +20,7 @@ export async function POST(
         const { reed } = body.values
         const { dents, section, unit, length }: Reed = reed
 
-        let newDocument: ReedDocument = { userId, dents, section, unit, length }
+        let newDocument: ReedDocument = { owner:userId, dents, section, unit, length }
         let dbResponse = await db.collection('reeds').insertOne(newDocument)
 
         return NextResponse.json({ createdId: dbResponse.insertedId.toString() }, { status: 201 });

app/api/[userId]/reeds/route.ts

@@ -16,7 +16,7 @@ export async function GET(
 
     try {
         const db = await dbConnection() as Db
-        let dbResponse = await db.collection('reeds').find({ userId: userId }).toArray()
+        let dbResponse = await db.collection('reeds').find({ owner: userId }).toArray()
 
         let reedList:ReedList=[]
 

app/api/public/drafts/route.ts

@@ -0,0 +1,38 @@
+//Route for retrieving public drafts
+import { Db } from 'mongodb'
+import { NextResponse } from 'next/server'
+
+import { dbConnection } from '@/app/resources/db/mongodb'
+
+export async function GET(
+    req: Request
+    ) {
+
+    try {
+        const db = await dbConnection() as Db
+        let dbResponse = await db.collection('drafts').find({ public: true }).toArray()
+
+        let publicDraftList: PublicDraftList = []
+
+        if (dbResponse.length > 0) {
+            publicDraftList = dbResponse.map(draftDocument => {
+
+                const draft: PublicDraft = {
+
+                    weave:JSON.parse(JSON.stringify(draftDocument.weave)),
+                }
+                return draft
+            })
+        }
+
+        return NextResponse.json({ publicDraftList }, { status: 200 });
+
+    } catch (error) {
+        console.log('api/drafts/GET', error);
+        return new NextResponse(
+            'Ooops, something went very wrong on the server',
+            { status: 500 }
+        );
+    }
+}
+

app/components/library/publicDraftCard.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+import { DisplayCard } from '@/app/components/(userpages)/DisplayCard'
+import { useWeaveContext } from '@/app/resources/contexts/weavecontext'
+import { readWeaveObject } from '@/app/resources/functions/weaveObjHandling/readWeaveObj/readWeaveObject'
+import { createWeave } from '@/app/resources/functions/weaveObjHandling/readWeaveObj/writeDraftGrid'
+
+import { PreviewGrid } from '../zSharedComponents/PreviewGrid'
+
+
+export function PublicDraftCard(params: { draft: { weave: WeaveObject } }) {
+
+    const { weave } = params.draft
+    const gridSet= readWeaveObject(weave)
+    const weaveGrid=createWeave(gridSet, 50,30)
+    const { upSetGrids } = useWeaveContext()
+
+    const router = useRouter()
+
+    function useDraft() {
+        if (weave) {
+            upSetGrids(weave)
+            router.push('/weaver/draft')
+        } else {
+            alert('Ops, something went wrong, please try another one')
+        }
+    }
+
+    return (
+        <div id='draft-card-container'>
+            <DisplayCard >
+                <div >
+                    <div className='vertical draft-card' >
+
+                        <div className='draft-info-container'>
+                                <button type='button' onClick={useDraft}>Use</button>
+                        </div>
+                        <PreviewGrid content={weaveGrid} type='publicDraft' />
+
+                        <div className='draft-info-container'>
+                            <p> Treadles:<span>{weave.treadling?.count || '-'}</span></p>
+                            <p>  Shafts:<span>{weave.shafts?.count || '-'}</span></p>
+                        </div>
+                    </div>
+                </div>
+            </DisplayCard>
+
+        </div>
+    )
+
+}

app/components/zSharedComponents/Header.tsx

@@ -20,9 +20,10 @@ export function Header(params: { title: string, text: string }) {
             </div>
 
             <nav className="nav-bar">
-                <Link href="/weaver/calculator">Calculator</Link>
                 <Link href="/weaver">Settings</Link>
-                <Link href="/weaver/draft">Draft</Link>
+                <Link href="/weaver/calculator">Calculator</Link>
+                <Link href="/weaver/draft">Create Draft</Link>
+                <Link href="/weaver/library"> Draft Library</Link>
             </nav>
         </header>
     )

app/components/zSharedComponents/PreviewGrid.tsx

@@ -3,7 +3,7 @@
 //The prop type is used to keep track of the parentgrid of downstream components
 import '@/app/components/draft/draft/grid.scss'
 
-import { ReactElement, useContext } from 'react'
+import { ReactElement } from 'react'
 
 import { Row } from '@/app/components/draft/draft/Row'
 

app/resources/types/dbdocuments.ts

@@ -3,7 +3,7 @@ import * as mongoDB from 'mongodb'
 
 interface DraftDocument extends mongoDB.Document {
     _id?: ObjectId,
-    userId: string,
+    owner: string,
     weave: WeaveObject,
     created: number,
     updated: number,
@@ -12,7 +12,7 @@ interface DraftDocument extends mongoDB.Document {
 
 interface LoomDocument extends mongoDB.Document {
     _id?: ObjectId,
-    userId: string,
+    owner: string,
     shafts: number,
     treadles: number,
     brand: string,
@@ -23,7 +23,7 @@ interface LoomDocument extends mongoDB.Document {
 
 interface ReedDocument extends mongoDB.Document {
     _id?: ObjectId,
-    userId: string,
+    owner: string,
     dents: number,
     section: number,
     unit: 'cm' | 'in',

app/resources/types/draft.ts

@@ -7,6 +7,12 @@ type Draft = {
     public: Boolean
 }
 
+type PublicDraft= {
+    weave: WeaveObject
+}
+
 type DateString=string
 
-type DraftList=Draft[]
+type DraftList=Draft[]
+
+type PublicDraftList =PublicDraft[]