updating states

src/css/main.css

@@ -8,7 +8,7 @@ code {
 }
 
 .container {
-    margin: 4em auto;
+    margin: 2em auto 0 auto;
     text-align: center;
 }
 

src/index.js

@@ -1,9 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import ReactDOM from 'react-dom/client';
+import { render } from 'react-dom';
+import ImageViewer from 'react-simple-image-viewer';
+
+import Chevron from './chevron.png';
 import './css/normalize.css';
 import './css/skeleton.css';
 import './css/main.css';
-import Chevron from './chevron.png';
 
 const startToken = 1;
 const endToken = 5555;
@@ -14,7 +17,7 @@ function getRandomToken() {
 }
 
 function Metadata(token) {
-  fetch(url + 'metadata/' + token + '.json')
+  fetch(url + 'metadata/' + token.token + '.json')
     .then((res) => res.json())
     .then((data) => console.log(data))
   return (
@@ -24,7 +27,14 @@ function Metadata(token) {
 }
 
 function App() {
-  const [token, setToken] = useState(0);
+  const [token, setToken] = useState(() => {
+      return localStorage.getItem('token') || 0;
+  });
+
+  useEffect(() => {
+      localStorage.setItem('token', token);
+  }, [token]);
+
   if (token === 0) {
     setToken(getRandomToken());
   }
@@ -41,7 +51,7 @@ function App() {
         </span>
       </div>
       <div className="row">
-        {token < endToken && (<img src={Chevron} onClick={() => setToken(Number(token) - 1)} alt="previous token" className="arrow previousToken" />)}
+        {token > startToken && (<img src={Chevron} onClick={() => setToken(Number(token) - 1)} alt="previous token" className="arrow previousToken" />)}
         <input type="number" value={token} step="1" onChange={(v) => setToken(v.target.value)} max={endToken} min={startToken} />
         {token < endToken && (<img src={Chevron} onClick={() => setToken(Number(token) + 1)} alt="next token" className="arrow nextToken" />)}
       </div>