variant with preact instead of vanilla js

2 years ago · a1502eb2da
parent 6e98443bb9
commit a1502eb2da
6 changed files with 1465 additions and 37 deletions
--- a/index.html
+++ b/index.html
@ -6,11 +6,7 @@
  </head>
  <body>
    <h1>GDG Counter Website</h1>
-    <div class="app">
+    <div id="app"></div>
-      <div id="counter-value">???</div>
+    <script type="module" src="/src/main.jsx"></script>
      <button id="btn-decrement">Decrementa</button>  
      <button id="btn-increment">Incrementa</button>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -6,6 +6,10 @@
        "build": "vite build"
    },
    "devDependencies": {
        "@preact/preset-vite": "^2.5.0",
        "vite": "^3.2.3"
    },
    "dependencies": {
        "preact": "^10.13.0"
    }
 }
--- a/src/main.js
+++ b/src/main.js
@ -1,27 +0,0 @@
 const counterElement = document.querySelector('#counter-value')
 const incrementButton = document.querySelector('#btn-increment')
 const decrementButton = document.querySelector('#btn-decrement')
 function updateCounter(value) {
    counterElement.textContent = `Counter: ${value}`
 }
 incrementButton.addEventListener('click', async () => {
    const res = await fetch('/api/increment', { method: 'POST' })
    const data = await res.json()
    updateCounter(data)
 })
 decrementButton.addEventListener('click', async () => {
    const res = await fetch('/api/decrement', { method: 'POST' })
    const data = await res.json()
    updateCounter(data)
 })
 async function main() {
    const res = await fetch('/api/value')
    const data = await res.json()
    updateCounter(data)
 }
 main()
--- a/src/main.jsx
+++ b/src/main.jsx
@ -0,0 +1,38 @@
 import { render } from 'preact'
 import { useState, useEffect } from 'preact/hooks'
 const App = ({}) => {
    const [counter, setCounter] = useState(0)
    useEffect(() => {
        fetch('/api/value')
            .then(res => res.json())
            .then(count => setCounter(count))
    }, [])
    return (
        <>
            <div>{counter}</div>
            <button
                onClick={() => {
                    fetch('/api/decrement', { method: 'POST' })
                        .then(res => res.json())
                        .then(count => setCounter(count))
                }}
            >
                Decrementa
            </button>
            <button
                onClick={() => {
                    fetch('/api/increment', { method: 'POST' })
                        .then(res => res.json())
                        .then(count => setCounter(count))
                }}
            >
                Incrementa
            </button>
        </>
    )
 }
 render(<App />, document.querySelector('#app'))
--- a/vite.config.js
+++ b/vite.config.js
@ -1,3 +1,4 @@
 import preactPlugin from '@preact/preset-vite'
 import { defineConfig } from 'vite'
 export default defineConfig({
@ -7,4 +8,5 @@ export default defineConfig({
            '/api': 'http://localhost:4000/',
        },
    },
    plugins: [preactPlugin()],
 })