Sharing Projects

{
  "isPublic": false,
  "idPublic": null
}

{
  "isPublic": true,
  "idPublic": "a8f3j2k9x7q1"
}

export function ShareProjectDialog({ project }) {
  const handleSwitch = async (checked: boolean) => {
    const res = await fetch(`/api/projects/${project.id}/public`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ public: checked }),
    })
    
    const data = await res.json()
    updateProject(project.id, {
      isPublic: data.isPublic,
      idPublic: data.idPublic,
    })
  }
  
  return (
    <Dialog>
      <Switch
        checked={project.isPublic}
        onCheckedChange={handleSwitch}
      />
      
      {project.isPublic && (
        <Input
          readOnly
          value={`${window.location.origin}/public/${project.idPublic}`}
        />
      )}
    </Dialog>
  )
}

import { nanoid } from "nanoid"

export async function POST(req: NextRequest) {
  const { projectId } = await params
  const { public: makePublic } = await req.json()
  
  // Verify project ownership
  const project = await prisma.project.findUnique({
    where: { id: projectId, userId: session.user.id },
    include: { dbconnections: true },
  })
  
  // Count valid connections
  const validConnections = project.dbconnections.filter(
    (conn) => conn.isValid === true
  ).length
  
  let isPublic = makePublic
  let idPublic = project.idPublic
  
  // If no valid connections, force private
  if (validConnections === 0) {
    isPublic = false
    idPublic = null
  } else if (makePublic) {
    // Generate new 12-character ID
    idPublic = nanoid(12)
  } else {
    idPublic = null
  }
  
  // Update project
  const updated = await prisma.project.update({
    where: { id: projectId },
    data: { isPublic, idPublic },
  })
  
  return NextResponse.json(updated)
}

const handleRegenerate = async () => {
  try {
    const res = await fetch(`/api/projects/${project.id}/public`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ public: true }),
    })
    
    const data = await res.json()
    
    // Update UI with new idPublic
    updateProject(project.id, {
      isPublic: data.isPublic,
      idPublic: data.idPublic,
    })
  } catch {
    toast.error("Failed to regenerate public link")
  }
}

https://yourapp.com/public/{idPublic}

https://vizboard.com/public/a8f3j2k9x7q1

const validConnections = project.dbconnections.filter(
  (conn) => conn.isValid === true
).length

if (validConnections === 0) {
  isPublic = false
  idPublic = null
}

model Project {
  id                  String         @id @default(uuid())
  userId              String
  title               String
  description         String?
  isPublic            Boolean        @default(false)
  idPublic            String?        @unique
  createdAt           DateTime       @default(now())
  updatedAt           DateTime       @updatedAt
  lastIntrospectionAt DateTime?
  dbconnections       DbConnection[]
  user                User           @relation(...)
  widgets             Widget[]
  orderedWidgetIds    String[]
}

<iframe
  src="https://yourapp.com/public/a8f3j2k9x7q1"
  width="100%"
  height="600px"
  frameborder="0"
></iframe>

POST /api/projects/{projectId}/public

Body:
{
  "public": true | false
}

Response:
{
  "isPublic": boolean,
  "idPublic": string | null
}

import { updateProject } from "@/app/actions/project/crud"

const result = await updateProject({
  id: projectId,
  isPublic: true,
})