diff --git a/client/homebrew/pages/archivePage/archivePage.jsx b/client/homebrew/pages/archivePage/archivePage.jsx index b5ec1f8d6..657837392 100644 --- a/client/homebrew/pages/archivePage/archivePage.jsx +++ b/client/homebrew/pages/archivePage/archivePage.jsx @@ -1,7 +1,7 @@ require('./archivePage.less'); const React = require('react'); -const createClass = require('create-react-class'); +const { useState, useEffect, useRef } = React; const cx = require('classnames'); const Nav = require('naturalcrit/nav/nav.jsx'); @@ -11,270 +11,234 @@ const Account = require('../../navbar/account.navitem.jsx'); const NewBrew = require('../../navbar/newbrew.navitem.jsx'); const HelpNavItem = require('../../navbar/help.navitem.jsx'); const BrewItem = require('../basePages/listPage/brewItem/brewItem.jsx'); -//const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx'); const request = require('../../utils/request-middleware.js'); -const ArchivePage = createClass({ - displayName: 'ArchivePage', - getDefaultProps: function () { - return {}; - }, +const ArchivePage = (props) => { + const [title, setTitle] = useState(props.query.title || ''); + const [legacy, setLegacy] = useState(props.query.legacy !== 'false'); + const [v3, setV3] = useState(props.query.v3 !== 'false'); + const [count, setCount] = useState(props.query.count || 10); + const [page, setPage] = useState(parseInt(props.query.page) || 1); + const [brewCollection, setBrewCollection] = useState(null); + const [totalBrews, setTotalBrews] = useState(null); + const [searching, setSearching] = useState(false); + const [error, setError] = useState(null); - getInitialState: function () { - return { - //# request - title: this.props.query.title || '', - //tags: {}, - legacy: this.props.query.legacy !== 'false', - v3: this.props.query.v3 !== 'false', - count: this.props.query.count || 10, - page: parseInt(this.props.query.page) || 1, + const titleRef = useRef(null); + const countRef = useRef(null); + const v3Ref = useRef(null); + const legacyRef = useRef(null); - //# response - brewCollection: null, - totalBrews: null, - - searching: false, - error: null, - }; - }, - - componentDidMount: function () { - console.log(this.props.query); - console.log(this.state); - - this.validateInput(); - if (this.state.title) { - this.loadPage(this.state.page, false); + useEffect(() => { + validateInput(); + if (title) { + loadPage(page, false); } - this.state.totalBrews || this.loadTotal(); // Load total if not already loaded - }, + !totalBrews && loadTotal(); + }, []); - updateStateWithBrews: function (brews, page) { - this.setState({ - brewCollection: brews || null, - page: parseInt(page) || 1, - searching: false, - }); - }, + const updateStateWithBrews = (brews, page) => { + setBrewCollection(brews || null); + setPage(parseInt(page) || 1); + setSearching(false); + }; - updateUrl: function (title, page, count, v3, legacy) { + const updateUrl = (title, page, count, v3, legacy) => { const url = new URL(window.location.href); const urlParams = new URLSearchParams(); - - Object.entries({ title, page, count, v3, legacy }).forEach(([key, value]) => urlParams.set(key, value)); - + + Object.entries({ title, page, count, v3, legacy }).forEach( + ([key, value]) => urlParams.set(key, value) + ); + url.search = urlParams.toString(); window.history.replaceState(null, null, url); - }, - - loadPage: async function (page, update) { - this.setState({ searching: true, error: null }); - - + }; + + const loadPage = async (page, update) => { + setSearching(true); + setError(null); + const performSearch = async ({ title, count, v3, legacy }) => { - this.updateUrl(title, page, count, v3, legacy); + updateUrl(title, page, count, v3, legacy); if (title !== '') { try { const response = await request.get( `/api/archive?title=${title}&page=${page}&count=${count}&v3=${v3}&legacy=${legacy}` ); if (response.ok) { - this.updateStateWithBrews(response.body.brews, page); - + updateStateWithBrews(response.body.brews, page); } else { throw new Error(`Error: ${response.status}`); } } catch (error) { console.log('error at loadPage: ', error); - this.setState({ error: `${error.response ? error.response.status : error.message}` }); - this.updateStateWithBrews([], 1); + setError( + `${ + error.response + ? error.response.status + : error.message + }` + ); + updateStateWithBrews([], 1); } } else { - this.setState({ error: '404' }); + setError('404'); } }; - - if (update === true) { - const title = document.getElementById('title').value || ''; - const count = document.getElementById('count').value || 10; - const v3 = document.getElementById('v3').checked; - const legacy = document.getElementById('legacy').checked; - - this.setState( - { - title: title, - count: count, - v3: v3, - legacy: legacy, - }, - () => { - // State is updated, now perform the search - performSearch({ title, count, v3, legacy }); - } - ); + + if (update) { + const title = titleRef.current.value || ''; + const count = countRef.current.value || 10; + const v3 = v3Ref.current.checked; + const legacy = legacyRef.current.checked; + + setTitle(title); + setCount(count); + setV3(v3); + setLegacy(legacy); + + performSearch({ title, count, v3, legacy }); } else { - const { title, count, v3, legacy } = this.state; performSearch({ title, count, v3, legacy }); } - }, - - loadTotal: async function () { - const {title, v3, legacy} = this.state; + }; + + const loadTotal = async () => { + setTotalBrews(null); + setError(null); - this.setState({ - totalBrews: null, - error: null - }); - if (title) { try { const response = await request.get( `/api/archive/total?title=${title}&v3=${v3}&legacy=${legacy}` ); - + if (response.ok) { - this.setState({ - totalBrews: response.body.totalBrews, - }); + setTotalBrews(response.body.totalBrews); } else { - throw new Error(`Failed to load total brews: ${response.statusText}`); + throw new Error( + `Failed to load total brews: ${response.statusText}` + ); } } catch (error) { console.log('error at loadTotal: ', error); - this.setState({ error: `${error.response.status}` }); - this.updateStateWithBrews([], 1); + setError(`${error.response.status}`); + updateStateWithBrews([], 1); } } - }, + }; - renderNavItems: function () { - return ( - - - - Archive: Search for brews - - - - - - - - - - ); - }, + const renderNavItems = () => ( + + + + Archive: Search for brews + + + + + + + + + + ); - validateInput: function () { - const textInput = document.getElementById('title'); + const validateInput = () => { + const textInput = titleRef.current; const submitButton = document.getElementById('searchButton'); if (textInput.validity.valid && textInput.value) { submitButton.disabled = false; } else { submitButton.disabled = true; } - }, + }; - renderForm: function () { - return ( -
-

Brew Lookup

-
-
+ ); - renderPaginationControls: function () { - if (!this.state.totalBrews) { - return null; - } + const renderPaginationControls = () => { + if (!totalBrews) return null; - const count = parseInt(this.state.count); - const { page, totalBrews } = this.state; - const totalPages = Math.ceil(totalBrews / count); + const countInt = parseInt(count); + const totalPages = Math.ceil(totalBrews / countInt); let startPage, endPage; if (page <= 6) { @@ -296,7 +260,7 @@ const ArchivePage = createClass({ className={`pageNumber ${ page === startPage + index ? 'currentPage' : '' }`} - onClick={() => this.loadPage(startPage + index, false)} + onClick={() => loadPage(startPage + index, false)} > {startPage + index} @@ -307,7 +271,7 @@ const ArchivePage = createClass({ {page > 1 && ( @@ -315,8 +279,8 @@ const ArchivePage = createClass({
    {startPage > 1 && ( this.loadPage(1, false)} + className="firstPage" + onClick={() => loadPage(1, false)} > 1 ... @@ -324,8 +288,8 @@ const ArchivePage = createClass({ {pagesAroundCurrent} {endPage < totalPages && ( this.loadPage(totalPages, false)} + className="lastPage" + onClick={() => loadPage(totalPages, false)} > ... {totalPages} @@ -334,18 +298,16 @@ const ArchivePage = createClass({ {page < totalPages && ( )}
); - }, - - renderFoundBrews() { - const { title, brewCollection, error, searching } = this.state; + }; + const renderFoundBrews = () => { if (searching) { return (
@@ -395,43 +357,45 @@ const ArchivePage = createClass({
); } - console.log('state when rendering '); - console.table(this.state); + return (
{`Brews found: `} - {title === '' ? '0' : this.state.totalBrews ? this.state.totalBrews : } + {title === '' ? ( + '0' + ) : totalBrews ? ( + totalBrews + ) : ( + + )} {brewCollection.map((brew, index) => ( ))} - {this.renderPaginationControls()} + {renderPaginationControls()}
); - - }, + }; - render: function () { - return ( -
- - - {this.renderNavItems()} + return ( +
+ + + {renderNavItems()} +
+
{renderForm()}
-
-
{this.renderForm()}
-
- {this.renderFoundBrews()} -
+
+ {renderFoundBrews()}
- ); - }, -}); +
+ ); +}; module.exports = ArchivePage;