From da699e999f6513c65b0e63fd8d5ee765fd004e0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Mon, 22 Jan 2024 23:20:36 +0100
Subject: [PATCH] basic looks

---
 client/homebrew/homebrew.jsx                  |   2 +
 .../pages/archivePage/archivePage.jsx         | 133 ++++++++++++++++++
 .../pages/archivePage/archivePage.less        |  74 ++++++++++
 3 files changed, 209 insertions(+)
 create mode 100644 client/homebrew/pages/archivePage/archivePage.jsx
 create mode 100644 client/homebrew/pages/archivePage/archivePage.less

diff --git a/client/homebrew/homebrew.jsx b/client/homebrew/homebrew.jsx
index a08a39ea0..257128766 100644
--- a/client/homebrew/homebrew.jsx
+++ b/client/homebrew/homebrew.jsx
@@ -11,6 +11,7 @@ const SharePage = require('./pages/sharePage/sharePage.jsx');
 const NewPage = require('./pages/newPage/newPage.jsx');
 const ErrorPage = require('./pages/errorPage/errorPage.jsx');
 const PrintPage = require('./pages/printPage/printPage.jsx');
+const ArchivePage = require('./pages/archivePage/archivePage.jsx');
 const AccountPage = require('./pages/accountPage/accountPage.jsx');
 
 const WithRoute = (props)=>{
@@ -74,6 +75,7 @@ const Homebrew = createClass({
 						<Route path='/user/:username' element={<WithRoute el={UserPage} brews={this.props.brews} />} />
 						<Route path='/print/:id' element={<WithRoute el={PrintPage} brew={this.props.brew} />} />
 						<Route path='/print' element={<WithRoute el={PrintPage} />} />
+						<Route path='/archive' element={<WithRoute el={ArchivePage}/>}/>
 						<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
 						<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
 						<Route path='/account' element={<WithRoute el={AccountPage} brew={this.props.brew} uiItems={this.props.brew.uiItems} />} />
diff --git a/client/homebrew/pages/archivePage/archivePage.jsx b/client/homebrew/pages/archivePage/archivePage.jsx
new file mode 100644
index 000000000..29243eeb9
--- /dev/null
+++ b/client/homebrew/pages/archivePage/archivePage.jsx
@@ -0,0 +1,133 @@
+require('./archivePage.less');
+const React = require('react');
+const createClass = require('create-react-class');
+const _         = require('lodash');
+const cx        = require('classnames');
+const moment = require('moment');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+const Navbar = require('../../navbar/navbar.jsx');
+
+const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
+const Account = require('../../navbar/account.navitem.jsx');
+const NewBrew = require('../../navbar/newbrew.navitem.jsx');
+const HelpNavItem = require('../../navbar/help.navitem.jsx');
+
+const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
+
+const ArchivePage = createClass({
+    displayName : 'ArchivePage',
+    getDefaultProps : function() {
+        return {
+            query     : '',
+			foundBrew : null,
+			searching : false,
+			error     : null
+        };
+    },
+    getInitialState : function() {
+        return {
+            uiItems : this.props.uiItems
+        };
+    },
+    handleChange(e){
+		this.setState({ query: e.target.value });
+	},
+	lookup(){
+		this.setState({ searching: true, error: null });
+
+		request.get(`/admin/lookup/${this.state.query}`)
+			.then((res)=>this.setState({ foundBrew: res.body }))
+			.catch((err)=>this.setState({ error: err }))
+			.finally(()=>this.setState({ searching: false }));
+	},
+    renderFoundBrew(){
+		const brew = this.state.foundBrew;
+		return <div className='foundBrew'>
+			<dl>
+				<dt>Title</dt>
+				<dd>{brew.title}</dd>
+
+				<dt>Authors</dt>
+				<dd>{brew.authors.join(', ')}</dd>
+
+				<dt>Edit Link</dt>
+				<dd><a href={`/edit/${brew.editId}`} target='_blank' rel='noopener noreferrer'>/edit/{brew.editId}</a></dd>
+
+				<dt>Share Link</dt>
+				<dd><a href={`/share/${brew.shareId}`} target='_blank' rel='noopener noreferrer'>/share/{brew.shareId}</a></dd>
+
+				<dt>Last Updated</dt>
+				<dd>{Moment(brew.updatedAt).fromNow()}</dd>
+
+				<dt>Num of Views</dt>
+				<dd>{brew.views}</dd>
+			</dl>
+		</div>;
+	},
+
+    renderForm: function() {
+        return <div className='brewLookup'>
+            <h2>Brew Lookup</h2>
+            <label>Title of the brew</label><input type='text' value={this.state.query} onChange={this.handleChange} placeholder='v3 Reference Document'/>
+            {/* In the future, we should be able to filter the results by adding tags.
+            <label>Tags</label><input type="text" value={this.state.query} placeholder='add a tag to filter'/>
+            */}
+            <button onClick={this.lookup}>
+                <i className={cx('fas', {
+                    'fa-search'          : !this.state.searching,
+                    'fa-spin fa-spinner' : this.state.searching,
+                })} />
+            </button>
+
+            {this.state.error
+                && <div className='error'>{this.state.error.toString()}</div>
+            }
+
+            {this.state.foundBrew
+                ? this.renderFoundBrew()
+                : <div className='noBrew'>No brew found.</div>
+            }
+        </div>;
+    },
+
+    renderResults : function() {
+
+    },
+    
+    renderNavItems : function() {
+		return <Navbar>
+			<Nav.section>
+				<NewBrew />
+				<HelpNavItem />
+				<RecentNavItem />
+				<Account />
+			</Nav.section>
+		</Navbar>;
+	},
+
+    render : function() {
+		return 	<div className='archivePage'>
+            {this.renderNavItems()}
+
+            <div className='content'>
+                <div className='welcome'>
+                    <h1>Welcome to the Archive</h1>
+                </div>
+                <div className='flexGroup'>
+                    <div className='form dataGroup'>
+                        {this.renderForm()}
+                    </div>
+                    <div className='resultsContainer dataGroup'>
+                        <div className='title'>
+                            <h2>Your results, my lordship</h2>
+                            {this.renderResults()}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+	}
+});
+
+module.exports = ArchivePage;
\ No newline at end of file
diff --git a/client/homebrew/pages/archivePage/archivePage.less b/client/homebrew/pages/archivePage/archivePage.less
new file mode 100644
index 000000000..50ddf4de1
--- /dev/null
+++ b/client/homebrew/pages/archivePage/archivePage.less
@@ -0,0 +1,74 @@
+
+
+.archivePage {
+    height:100%;
+    background-color: #2C3E50;
+    .content {
+        display:grid;
+        grid-template-rows: 20vh 1fr;
+        
+        .welcome {
+            background: url('https://i.imgur.com/MJ4YHu7.jpg');
+            background-size:100%;
+            background-position:center;
+            height:20vh;
+    
+            h1 {
+                font-size:40px;
+                font-weight:900;
+                color:white;
+                filter: drop-shadow(0 0 5px black);
+            }
+        }
+    
+        .flexGroup {
+            height:100%;
+            display:grid;
+            grid-template-columns:1fr 2fr;
+        
+            .dataGroup {
+                width:100%;
+                height:100%;
+                background:white;
+                
+                &.form .brewLookup {
+                    padding:100px;
+                    
+                    h2 {
+                        font-size:20px;
+                        font-weight: 900;
+                        border-bottom:2px solid;
+                        margin-block: 20px;
+                    }
+                    
+                    label {
+                        margin-right:10px;
+                    }
+                    input+button {
+                        margin-left:20px;
+                    }
+                }
+                
+                &.resultsContainer {
+                    display:flex;
+                    flex-direction: column;
+                    border-left:2px solid;
+                    height:76.8vh;
+                    
+                    .title {
+                        height:20%;
+                        background-color: #333;
+                        display:grid;
+                        place-items: center;
+                        
+                        h2 {
+                            font-size:20px;
+                            color:white;
+                            font-weight:900;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file