Edit content, Show maintenance in a specific page

Unanswered

Asiatic Lion posted this in #help-forum

Asiatic LionOP

2024-04-19T10:24:27.206Z

Hello guys, Hope you doing great!
I want to make a part in my Dashboard page that allows me to edit a page's content, How can i done that? i don't want to change the code and rebuild it every time
Also how can i add a part that allows me to block the page and show a Maintenance text?
I didn't really find any library allowing me to do these
So i would appreciate it if you could let me know the names of a few libraries 🙂

15 Replies

Asiatic LionOP

2024-04-24T19:03:55.193Z

bump

Komondor

2024-04-25T01:41:09.838Z

are you looking for something like this?

https://github.com/react-grid-layout/react-grid-layout

@Komondor https://github.com/react-grid-layout/react-grid-layout

Asiatic LionOP

2024-04-25T16:58:34.121Z

No i want to edit the content of for example a page

From the dashboard

And no need to rebuild it the project again

Komondor

2024-04-25T17:10:13.581Z

If the layout will stay the same then you could fetch the content from some remote source, and just edit the remote source

@Asiatic Lion Hello guys, Hope you doing great! I want to make a part in my Dashboard page that allows me to edit a page's content, How can i done that? i don't want to change the code and rebuild it every time Also how can i add a part that allows me to block the page and show a Maintenance text? I didn't really find any library allowing me to do these So i would appreciate it if you could let me know the names of a few libraries 🙂

American Crow

2024-04-25T18:52:42.424Z

I mean you can do that. To me it sounds a lot like you're in need of a (headless) CMS?
Anyway here is a minimum example

page.tsx

export default async function Page() {
    const data = await fetch('http://localhost:3000/api/cms')
   
    const {title, content} = await data.json()
   

  return (
    <div>
      <h1>{title}</h1>
        <p>{content}</p>
    </div>
  )
}

/admin/page.tsx

"use client"

import { FormEvent } from "react"

export default function AdminPage() {

    const handleSubmit = async (event:FormEvent) => {
        event.preventDefault()
        const data = {
            title: event.target[0].value,
            content: event.target[1].value
        }
      
        const response = await fetch('http://localhost:3000/api/cms', {
            method: 'POST',
            body: JSON.stringify(data)
        })        
    }
    
    return (
      <div>
        <h1>Admin Page</h1>
        {/* Form to change title and content from Admin Page */}
        <form className="bg-gray-900 p-8 text-white" onSubmit={(e) => handleSubmit(e)}>
            <input className="bg-gray-800" type="text" name="title" placeholder="New Title ..." />
            <textarea className="bg-gray-800" name="content" placeholder="New content ..."></textarea>
            <button type="submit">Submit</button>
        </form>
      </div>
    )
  }

/api/cms/route.ts

import { headers } from "next/headers"

let fakeData = {
    title: "Very Important Title",
    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
}

export async function GET(request: Request) {
    headers() // to opt out of default static chaching in GET endpoints
   return new Response(JSON.stringify(fakeData), {
      headers: {
         "Content-Type": "application/json",
      },
   })
}

export async function POST(request: Request) {
 
    const {title, content} = await request.json()    
  
    // overwrite fakeData
    fakeData.content = content
    fakeData.title = title

   return new Response(JSON.stringify(fakeData), {
      headers: {
         "Content-Type": "application/json",
      },
   })
}