Renaming search to browseArchives and updating components

assets/styles/base/variables.scss

@@ -18,5 +18,5 @@ $secondary-font: 'bebas_neuebold', sans-serif;
 
 // layout
 $container-width: 600;
-$desktop-related-interviews-width: 180;
+$browse-left-width: 180;
 $container-padding: 24;

components/browseArchives/index.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import RelatedInterviewsList from '../interviews/relatedInterviewsList'
+import InterviewsList from '../interviews/interviewsList';
+import SingleInterview from '../interviews/singleInterview';
+import TopicsList from '../topicsList';
+import ProjectsList from '../projectsList';
+import SearchResults from '../searchResults';
+import Data from '../../data/archives/interviews';
+import './style.scss';
+
+class Search extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      term: '',
+      isSingleInterviewModalOpen: false,
+      isInterviewsListModalOpen: false,
+      activeSingleInterview: 1,
+      isSearchActive: false,
+    };
+    this.onInputChange = this.onInputChange.bind(this);
+    this.toggleSingleInterview = this.toggleSingleInterview.bind(this);
+    this.toggleInterviewsListModal = this.toggleInterviewsListModal.bind(this);
+  }
+
+  onInputChange(event) {
+    this.setState({
+      term: event.target.value,
+      isSearchActive: true,
+    });
+
+    if (event.target.value.length === 0) {
+      this.setState({isSearchActive: false});
+    }
+  }
+
+  toggleInterviewsListModal() {
+    const { isInterviewsListModalOpen } = this.state;
+    this.setState({
+      isInterviewsListModalOpen: !isInterviewsListModalOpen,
+      isSingleInterviewModalOpen: false,
+    });
+  }
+
+  toggleSingleInterview(event) {
+    const { isSingleInterviewModalOpen } = this.state;
+    this.setState({
+      isSingleInterviewModalOpen: !isSingleInterviewModalOpen,
+      isInterviewsListModalOpen: false,
+      activeSingleInterview: Number(event.target.id),
+    });
+  }
+
+  getSelectedInterview() {
+    const { activeSingleInterview } = this.state;
+    const selectedInterview = Data.find( item => item.id === activeSingleInterview);
+    return selectedInterview;
+  }
+
+  render() {
+    const { isSingleInterviewModalOpen, isInterviewsListModalOpen, isSearchActive, activeSingleInterview } = this.state;
+
+    return (
+      <div className="browse-wrap">
+        <div className="search-bar">
+          <div className="container">
+            <h3>Browse Archives</h3>
+            <input
+              className="search-input"
+              type="search"
+              placeholder="Search archives"
+              value={this.state.term}
+              onChange={this.onInputChange}
+            />
+          </div>
+        </div>
+        <div className="browse-content-wrap container">
+          <div className="browse-content-left">
+            {isSearchActive && <RelatedInterviewsList data={Data} toggleSingleInterview={this.toggleSingleInterview} />}
+          </div>
+          <div className="browse-content-right">
+            {isSearchActive ? <SearchResults /> :
+             (
+                <React.Fragment>
+                  <InterviewsList
+                    data={Data}
+                    isInterviewsListModalOpen={isInterviewsListModalOpen}
+                    toggleSingleInterview={this.toggleSingleInterview}
+                    toggleInterviewsListModal={this.toggleInterviewsListModal}
+                  />
+                  <TopicsList />
+                  <ProjectsList />
+                </React.Fragment>
+              )
+            }
+          </div>
+          {isSingleInterviewModalOpen &&
+            (<SingleInterview
+              activeSingleInterview={activeSingleInterview}
+              selectedInterview={this.getSelectedInterview()}
+              toggleSingleInterview={this.toggleSingleInterview}
+            />)
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Search;

components/browseArchives/style.scss

@@ -28,12 +28,12 @@
   }
 }
 
-.search-results-wrap.container {
+.browse-content-wrap.container {
   margin-bottom: calculateRem(48);
 
   @media (min-width: $desktop) {
     display: flex;
-    max-width: calculateRem($container-width + $desktop-related-interviews-width*2 + $container-padding*2);
+    max-width: calculateRem($container-width + $browse-left-width*2 + $container-padding*2);
   }
 
   h4 {
@@ -41,10 +41,25 @@
   }
 }
 
-.search-results {
+.browse-content-left {
+  display: none;
 
   @media (min-width: $desktop) {
-    width: calculateRem($container-width);
-    padding: 0 calculateRem($container-padding);
+    display: block;
+    width: calculateRem($browse-left-width);
+  }
+}
+
+.browse-content-right {
+
+  @media (min-width: $desktop) {
+    display: flex;
+    flex-direction: column;
+    width: calculateRem($container-width);
+    padding: 0 calculateRem($container-padding);
+
+    .interviews-wrap {
+      order: 1;
+    }
   }
 }

components/interviews/interviewsList/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import Modal from '../../modal';
+import './style.scss';
+
+const InterviewsList = props => (
+  <div className="interviews-wrap">
+    <div className="mob-interviews-link">
+      <span role="button" tabIndex="0" onClick={props.toggleInterviewsListModal}>Interviews ({ props.data.length })</span> {/* eslint-disable-line */}
+      <span role="button" tabIndex="0" onClick={props.toggleInterviewsListModal}>View</span> {/* eslint-disable-line */}
+    </div>
+    <Modal
+      isModalOpen={props.isInterviewsListModalOpen}
+      closeModal={props.toggleInterviewsListModal}
+      modalOnMobileOnly
+    >
+      <div className="interviews-list">
+        <h4>Interviews ({ props.data.length })</h4>
+        <ul>
+          {
+            props.data.map(interview =>
+              (<li
+                id={interview.id}
+                key={interview.id}
+                role="button"
+                tabIndex="0"
+                onClick={props.toggleSingleInterview}
+              >
+                { interview.name }
+              </li>))
+          }
+        </ul>
+      </div>
+    </Modal>
+  </div>
+);
+
+InterviewsList.propTypes = {
+  isInterviewsListModalOpen: PropTypes.bool.isRequired,
+  data: PropTypes.array.isRequired,
+  toggleSingleInterview: PropTypes.func.isRequired,
+  toggleInterviewsListModal: PropTypes.func.isRequired,
+}
+
+export default InterviewsList;

components/interviews/interviewsList/style.scss

@@ -19,19 +19,14 @@
   }
 }
 
-.interviews-list-wrap .modal {
-
-  @media (min-width: $desktop) {
-    display: block;
-    width: calculateRem($desktop-related-interviews-width);
-  }
+.interviews-list {
 
   li {
-    font-size: calculateRem(14);
     cursor: pointer;
+    outline: none;
 
     &:hover {
       text-decoration: underline;
     }
   }
-}
+}

components/interviews/relatedInterviewsList/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import './style.scss';
+
+const RelatedInterviewsList = props => (
+  <div className="related-interviews-list">
+    <h4>Related <br />Interviews</h4>
+    <ul>
+      {
+        props.data.map(interview =>
+          (<li
+            id={interview.id}
+            key={interview.id}
+            role="button"
+            tabIndex="0"
+            onClick={props.toggleSingleInterview}
+          >
+            { interview.name }
+          </li>))
+      }
+    </ul>
+  </div>
+);
+
+RelatedInterviewsList.propTypes = {
+  data: PropTypes.array.isRequired,
+  toggleSingleInterview: PropTypes.func.isRequired,
+}
+
+export default RelatedInterviewsList;

components/interviews/relatedInterviewsList/style.scss

@@ -0,0 +1,15 @@
+@import './assets/styles/global.scss';
+
+.related-interviews-list {
+  margin-bottom: calculateRem(24);
+
+  li {
+    font-size: calculateRem(14);
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

components/interviews/singleInterview/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import Parser from 'html-react-parser';
+import Modal from '../../modal';
+import './style.scss';
+
+const SingleInterview = props => (
+  <Modal
+    isModalOpen={true}
+    closeModal={props.toggleSingleInterview}
+  >
+    <div className="single-interview">
+      <span className="number">{ props.activeSingleInterview }</span>
+      <div>{ Parser(props.selectedInterview.content) }</div>
+    </div>
+  </Modal>
+);
+
+SingleInterview.propTypes = {
+  activeSingleInterview: PropTypes.number.isRequired,
+  selectedInterview: PropTypes.shape({}).isRequired,
+  toggleSingleInterview: PropTypes.func.isRequired,
+};
+
+export default SingleInterview;

components/interviewsList/index.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import Modal from '../../components/modal';
-import Data from '../../data/archives/interviews';
-import './style.scss';
-
-class InterviewsList extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { isInterviewsListModalOpen: false };
-    this.toggleInterviewsListModal = this.toggleInterviewsListModal.bind(this);
-  }
-
-  toggleInterviewsListModal() {
-    const { isInterviewsListModalOpen } = this.state;
-    this.setState({ isInterviewsListModalOpen: !isInterviewsListModalOpen });
-  }
-
-  render() {
-    const { isInterviewsListModalOpen } = this.state;
-
-    return (
-      <div className="interviews-list-wrap">
-        <div className="mob-interviews-link">
-          <span role="button" tabIndex="0" onClick={this.toggleInterviewsListModal}>Interviews ({ Data.length })</span> {/* eslint-disable-line */}
-          <span role="button" tabIndex="0" onClick={this.toggleInterviewsListModal}>View</span> {/* eslint-disable-line */}
-        </div>
-        <Modal
-          isModalOpen={isInterviewsListModalOpen}
-          closeModal={this.toggleInterviewsListModal}
-          modalOnMobileOnly
-        >
-          {
-            (
-              <React.Fragment>
-                <h4>Interviews</h4>
-                <ul>
-                  {
-                    Data.map(interview => <li key={interview.id}>{ `${interview.name} ${interview.surname}` }</li>)
-                  }
-                </ul>
-              </React.Fragment>
-            )
-          }
-        </Modal>
-      </div>
-    );
-  }
-}
-
-export default InterviewsList;

components/search/index.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import TopicsList from '../../components/topicsList';
-import ProjectsList from '../../components/projectsList';
-import InterviewsList from '../interviewsList';
-import './style.scss';
-
-class Search extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { term: '' };
-    this.onInputChange = this.onInputChange.bind(this);
-  }
-
-  onInputChange(event) {
-    this.setState({ term: event.target.value });
-  }
-
-  render() {
-    return (
-      <div className="search-wrap">
-        <div className="search-bar">
-          <div className="container">
-            <h3>Browse Archives</h3>
-            <input
-              className="search-input"
-              type="search"
-              placeholder="Search archives"
-              value={this.state.term}
-              onChange={this.onInputChange}
-            />
-          </div>
-        </div>
-        <div className="search-results-wrap container">
-          <InterviewsList />
-          <div className="search-results">
-            <TopicsList />
-            <ProjectsList />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Search;

pages/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PageHeader from '../components/pageHeader';
 import PageFooter from '../components/pageFooter';
 import Resources from '../components/resources';
-import Search from '../components/search';
+import BrowseArchives from '../components/browseArchives';
 import '../styles.scss';
 
 class PageWrapper extends React.Component {
@@ -12,7 +12,7 @@ class PageWrapper extends React.Component {
       <div className="page-wrapper">
         <PageHeader />
         <Resources />
-        <Search />
+        <BrowseArchives />
         <PageFooter />
       </div>
     );