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() {
- {token < endToken && ( setToken(Number(token) - 1)} alt="previous token" className="arrow previousToken" />)} + {token > startToken && ( setToken(Number(token) - 1)} alt="previous token" className="arrow previousToken" />)} setToken(v.target.value)} max={endToken} min={startToken} /> {token < endToken && ( setToken(Number(token) + 1)} alt="next token" className="arrow nextToken" />)}