From 7e6252aa82f05d872bc51fa0da1ee639aa6e5ac6 Mon Sep 17 00:00:00 2001
From: lza_menace <lza_menace@protonmail.com>
Date: Sat, 11 Mar 2023 22:20:56 -0800
Subject: [PATCH] updating states

---
 src/css/main.css |  2 +-
 src/index.js     | 20 +++++++++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/css/main.css b/src/css/main.css
index 1c20830..18b63ef 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -8,7 +8,7 @@ code {
 }
 
 .container {
-    margin: 4em auto;
+    margin: 2em auto 0 auto;
     text-align: center;
 }
 
diff --git a/src/index.js b/src/index.js
index 7a516ee..65808d3 100644
--- a/src/index.js
+++ b/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>