1  import { useEffect, useState } from "react";
 2  import { BlogCID } from "./BlogCID";
 3  import {NavBar} from "@ipfs-blog/common-app/src/navbar.tsx"
 4  import { getBlogDataSingleton } from "./renderer/App";
 5  
 6  function BlogAdmin() {
 7  
 8    const [dataCid, setDataCid] = useState<undefined|string>()
 9    const [name, setName] = useState<undefined|string>()
10  
11    useEffect(() => {
12      const cid =  new BlogCID()
13      setDataCid(cid.getCached())
14    })
15  
16    useEffect(() => {
17      getBlogDataSingleton().getName()
18        .then(setName)
19    }, [])
20  
21    function handleNameChange(event: React.ChangeEvent<HTMLInputElement>) {
22      setName(event.target.value)
23    }
24  
25    async function handleSave() {
26      const blogData = getBlogDataSingleton()
27      blogData.setName(name)
28  
29      console.log("saving admin")
30      const cid = await blogData.persistToIPFS()
31      await blogData.updateIPNSName(cid)
32    }
33  
34    return (
35      <div>
36        <h1>Blog Admin</h1>
37        <p>dataCid: {dataCid}</p>
38  
39        <p>Blog Name</p>
40        <input type="text" value={name}
41          onChange={handleNameChange} />
42  
43        <div>
44          <input type="button" value="Save" onClick={handleSave} />
45        </div>
46        <NavBar />
47      </div>
48    )
49  }
50  
51  export { BlogAdmin }