2018-07-06 11:45:36 +00:00
|
|
|
import React from 'react';
|
2018-07-09 14:29:57 +00:00
|
|
|
import _ from 'lodash';
|
2018-07-06 12:36:22 +00:00
|
|
|
import RelatedInterviewsList from '../interviews/relatedInterviewsList';
|
2018-07-06 11:45:36 +00:00
|
|
|
import InterviewsList from '../interviews/interviewsList';
|
|
|
|
import SingleInterview from '../interviews/singleInterview';
|
|
|
|
import TopicsList from '../topicsList';
|
|
|
|
import ProjectsList from '../projectsList';
|
2018-07-09 08:22:48 +00:00
|
|
|
import SearchBar from '../searchBar';
|
2018-07-06 11:45:36 +00:00
|
|
|
import SearchResults from '../searchResults';
|
2018-07-16 15:13:29 +00:00
|
|
|
import { InterviewsData, Questions } from '../../data/archives/interviews';
|
2018-07-06 11:45:36 +00:00
|
|
|
import './style.scss';
|
|
|
|
|
2018-07-09 08:22:48 +00:00
|
|
|
class BrowseArchives extends React.Component {
|
2018-07-06 11:45:36 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
term: '',
|
2018-07-13 10:43:51 +00:00
|
|
|
debounceTerm: '',
|
2018-07-13 11:39:01 +00:00
|
|
|
searchResults: [null],
|
2018-07-06 11:45:36 +00:00
|
|
|
isSingleInterviewModalOpen: false,
|
|
|
|
isInterviewsListModalOpen: false,
|
2018-07-06 12:03:08 +00:00
|
|
|
activeSingleInterviewId: 1,
|
2018-07-06 11:45:36 +00:00
|
|
|
isSearchActive: false,
|
2018-07-13 09:11:32 +00:00
|
|
|
interviewData: this.transformInterviews(InterviewsData),
|
2018-07-06 11:45:36 +00:00
|
|
|
};
|
2018-07-06 13:49:24 +00:00
|
|
|
|
2018-07-09 14:29:57 +00:00
|
|
|
this.onSearchInputChange = this.onSearchInputChange.bind(this);
|
2018-07-06 11:45:36 +00:00
|
|
|
this.toggleSingleInterview = this.toggleSingleInterview.bind(this);
|
|
|
|
this.toggleInterviewsListModal = this.toggleInterviewsListModal.bind(this);
|
2018-07-09 14:29:57 +00:00
|
|
|
this.setSearchTerm = this.setSearchTerm.bind(this);
|
|
|
|
this.clearSearchInput = this.clearSearchInput.bind(this);
|
2018-07-13 09:11:32 +00:00
|
|
|
this.transformInterviews = this.transformInterviews.bind(this);
|
|
|
|
this.termIsInInterview = this.termIsInInterview.bind(this);
|
|
|
|
this.getSearchResultsDebounce = this.getSearchResultsDebounce.bind(this);
|
2018-07-06 11:45:36 +00:00
|
|
|
}
|
|
|
|
|
2018-07-09 14:29:57 +00:00
|
|
|
onSearchInputChange = (event) => {
|
2018-07-06 11:45:36 +00:00
|
|
|
this.setState({
|
|
|
|
term: event.target.value,
|
|
|
|
isSearchActive: true,
|
2018-07-13 11:39:01 +00:00
|
|
|
searchResults: [null],
|
2018-07-06 11:45:36 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
if (event.target.value.length === 0) {
|
2018-07-06 12:36:22 +00:00
|
|
|
this.setState({ isSearchActive: false });
|
2018-07-06 11:45:36 +00:00
|
|
|
}
|
2018-07-09 14:29:57 +00:00
|
|
|
|
2018-07-09 15:01:51 +00:00
|
|
|
// Throttle search result frequency with debounce while typing
|
2018-07-13 09:11:32 +00:00
|
|
|
this.getSearchResultsDebounce();
|
2018-07-06 11:45:36 +00:00
|
|
|
}
|
|
|
|
|
2018-07-09 14:29:57 +00:00
|
|
|
getSearchResults = (term) => {
|
2018-07-13 09:11:32 +00:00
|
|
|
const { interviewData } = this.state;
|
|
|
|
|
|
|
|
const searchResults = interviewData.reduce((filtered, interview) => {
|
|
|
|
const findTerm = this.termIsInInterview(term, interview);
|
|
|
|
const matchedIndex = findTerm.foundIndex;
|
|
|
|
|
|
|
|
if (findTerm.found) {
|
|
|
|
filtered.push({ ...interview, matchedIndex });
|
|
|
|
}
|
|
|
|
|
|
|
|
return filtered;
|
|
|
|
}, []);
|
|
|
|
|
2018-07-09 14:29:57 +00:00
|
|
|
this.setState({
|
2018-07-13 09:11:32 +00:00
|
|
|
searchResults,
|
2018-07-13 11:25:13 +00:00
|
|
|
debounceTerm: term,
|
2018-07-09 14:29:57 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
getSelectedInterview = () => {
|
2018-07-13 10:43:51 +00:00
|
|
|
const { activeSingleInterviewId, interviewData } = this.state;
|
|
|
|
const selectedInterview = interviewData
|
2018-07-13 09:11:32 +00:00
|
|
|
.find(item => item.id === activeSingleInterviewId);
|
2018-07-06 12:36:22 +00:00
|
|
|
return selectedInterview;
|
|
|
|
}
|
|
|
|
|
2018-07-09 14:29:57 +00:00
|
|
|
setSearchTerm = (event) => {
|
|
|
|
this.setState({
|
|
|
|
term: event.target.innerText,
|
|
|
|
isSearchActive: true,
|
|
|
|
});
|
2018-07-09 15:01:51 +00:00
|
|
|
|
2018-07-13 09:11:32 +00:00
|
|
|
this.getSearchResults(event.target.innerText);
|
2018-07-09 14:29:57 +00:00
|
|
|
}
|
|
|
|
|
2018-07-13 09:11:32 +00:00
|
|
|
getSearchResultsDebounce = _.debounce(() => {
|
|
|
|
const { term } = this.state;
|
|
|
|
this.getSearchResults(term);
|
|
|
|
}, 700);
|
|
|
|
|
2018-07-09 14:29:57 +00:00
|
|
|
clearSearchInput = () => {
|
|
|
|
this.setState({
|
|
|
|
isSearchActive: false,
|
|
|
|
term: '',
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-07-13 09:11:32 +00:00
|
|
|
transformInterviews = (interviews) => {
|
|
|
|
// eslint-disable-next-line
|
|
|
|
const length = Object.keys(interviews).length;
|
|
|
|
const betterInterviews = [];
|
|
|
|
|
|
|
|
for (let i = 0; i < length; i++) {
|
|
|
|
const interview = interviews[i];
|
|
|
|
const qKeys = Object.keys(interview);
|
|
|
|
const interviewFormatted = [];
|
|
|
|
|
|
|
|
qKeys.forEach((key, index) => {
|
2018-07-16 07:39:44 +00:00
|
|
|
if (key !== 'Name' && interview[key] !== null) {
|
2018-07-13 09:11:32 +00:00
|
|
|
interviewFormatted.push({
|
|
|
|
question: index,
|
|
|
|
answer: interview[key],
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
betterInterviews.push({
|
2018-07-16 07:39:44 +00:00
|
|
|
id: i + 1,
|
2018-07-13 09:11:32 +00:00
|
|
|
tags: 'tag1, tag2, tag3',
|
|
|
|
name: interview.Name,
|
|
|
|
matchedIndex: -1,
|
|
|
|
interview: interviewFormatted,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
return betterInterviews;
|
|
|
|
}
|
|
|
|
|
2018-07-09 14:29:57 +00:00
|
|
|
toggleInterviewsListModal = () => {
|
2018-07-06 11:45:36 +00:00
|
|
|
const { isInterviewsListModalOpen } = this.state;
|
2018-07-06 13:49:24 +00:00
|
|
|
|
2018-07-06 11:45:36 +00:00
|
|
|
this.setState({
|
|
|
|
isInterviewsListModalOpen: !isInterviewsListModalOpen,
|
|
|
|
isSingleInterviewModalOpen: false,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-07-09 14:29:57 +00:00
|
|
|
toggleSingleInterview = (event) => {
|
2018-07-06 12:03:08 +00:00
|
|
|
const { isSingleInterviewModalOpen, isInterviewsListModalOpen } = this.state;
|
2018-07-06 13:49:24 +00:00
|
|
|
|
2018-07-09 14:29:57 +00:00
|
|
|
let clickedInterview = event.target;
|
|
|
|
while (clickedInterview.id === '') {
|
|
|
|
clickedInterview = clickedInterview.parentNode;
|
|
|
|
}
|
|
|
|
const clickedSingleInterviewId = clickedInterview.id;
|
|
|
|
|
2018-07-06 11:45:36 +00:00
|
|
|
this.setState({
|
2018-07-06 12:03:08 +00:00
|
|
|
isInterviewsListModalOpen: !isInterviewsListModalOpen,
|
2018-07-06 11:45:36 +00:00
|
|
|
isSingleInterviewModalOpen: !isSingleInterviewModalOpen,
|
2018-07-09 14:29:57 +00:00
|
|
|
activeSingleInterviewId: Number(clickedSingleInterviewId),
|
2018-07-06 11:45:36 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-07-13 09:11:32 +00:00
|
|
|
termIsInInterview = (term, interview) => {
|
|
|
|
const lcTerm = term.toLowerCase();
|
|
|
|
const matchesName = interview.name.toLowerCase().includes(lcTerm);
|
|
|
|
const { interviewData } = this.state;
|
|
|
|
let foundIndex = 0;
|
|
|
|
|
|
|
|
if (matchesName) {
|
|
|
|
return {
|
|
|
|
found: true,
|
|
|
|
foundIndex: 0,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
const matchesTag = interview.tags.toLowerCase().indexOf(lcTerm) !== -1;
|
|
|
|
|
|
|
|
if (matchesTag) {
|
|
|
|
return {
|
|
|
|
found: true,
|
|
|
|
foundIndex: 0,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
const matchingQuestions = interview.interview
|
|
|
|
.filter((question, questionIndex) => {
|
|
|
|
if (question.answer === null) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
const index = question.answer.toLowerCase().indexOf(lcTerm);
|
|
|
|
|
|
|
|
if (index !== -1 && interview.activeIndex !== -1) {
|
|
|
|
foundIndex = questionIndex;
|
|
|
|
}
|
|
|
|
|
|
|
|
return index !== -1;
|
|
|
|
});
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
interviewData,
|
|
|
|
});
|
|
|
|
|
|
|
|
if (matchingQuestions.length > 0) {
|
|
|
|
return {
|
|
|
|
found: true,
|
|
|
|
foundIndex,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2018-07-06 11:45:36 +00:00
|
|
|
render() {
|
2018-07-06 12:36:22 +00:00
|
|
|
const {
|
|
|
|
isSingleInterviewModalOpen,
|
|
|
|
isInterviewsListModalOpen,
|
|
|
|
isSearchActive,
|
|
|
|
activeSingleInterviewId,
|
2018-07-09 08:22:48 +00:00
|
|
|
term,
|
2018-07-09 14:29:57 +00:00
|
|
|
searchResults,
|
2018-07-13 10:43:51 +00:00
|
|
|
interviewData,
|
|
|
|
debounceTerm,
|
2018-07-06 12:36:22 +00:00
|
|
|
} = this.state;
|
2018-07-06 11:45:36 +00:00
|
|
|
|
|
|
|
return (
|
2018-07-10 12:32:06 +00:00
|
|
|
<div className="browse-wrap" id="browse">
|
2018-07-09 14:29:57 +00:00
|
|
|
<SearchBar
|
|
|
|
onSearchInputChange={this.onSearchInputChange}
|
|
|
|
clearSearchInput={this.clearSearchInput}
|
|
|
|
isSearchActive={isSearchActive}
|
|
|
|
term={term}
|
|
|
|
/>
|
2018-07-06 11:45:36 +00:00
|
|
|
<div className="browse-content-wrap container">
|
|
|
|
<div className="browse-content-left">
|
2018-07-06 12:36:22 +00:00
|
|
|
{isSearchActive &&
|
|
|
|
(<RelatedInterviewsList
|
2018-07-13 12:02:09 +00:00
|
|
|
data={searchResults}
|
2018-07-06 12:36:22 +00:00
|
|
|
toggleSingleInterview={this.toggleSingleInterview}
|
|
|
|
/>)
|
|
|
|
}
|
2018-07-06 11:45:36 +00:00
|
|
|
</div>
|
|
|
|
<div className="browse-content-right">
|
2018-07-09 14:29:57 +00:00
|
|
|
{isSearchActive ? (
|
|
|
|
<SearchResults
|
|
|
|
data={searchResults}
|
2018-07-13 09:11:32 +00:00
|
|
|
questions={Questions}
|
2018-07-13 10:43:51 +00:00
|
|
|
term={debounceTerm}
|
2018-07-09 14:29:57 +00:00
|
|
|
toggleSingleInterview={this.toggleSingleInterview}
|
|
|
|
/>) :
|
2018-07-06 12:36:22 +00:00
|
|
|
(
|
2018-07-06 11:45:36 +00:00
|
|
|
<React.Fragment>
|
|
|
|
<InterviewsList
|
2018-07-13 10:43:51 +00:00
|
|
|
data={interviewData}
|
2018-07-06 11:45:36 +00:00
|
|
|
isInterviewsListModalOpen={isInterviewsListModalOpen}
|
|
|
|
toggleSingleInterview={this.toggleSingleInterview}
|
|
|
|
toggleInterviewsListModal={this.toggleInterviewsListModal}
|
|
|
|
/>
|
2018-07-09 14:29:57 +00:00
|
|
|
<TopicsList setSearchTerm={this.setSearchTerm} />
|
|
|
|
<ProjectsList setSearchTerm={this.setSearchTerm} />
|
2018-07-06 11:45:36 +00:00
|
|
|
</React.Fragment>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
{isSingleInterviewModalOpen &&
|
|
|
|
(<SingleInterview
|
2018-07-06 12:03:08 +00:00
|
|
|
activeSingleInterviewId={activeSingleInterviewId}
|
2018-07-06 11:45:36 +00:00
|
|
|
selectedInterview={this.getSelectedInterview()}
|
|
|
|
toggleSingleInterview={this.toggleSingleInterview}
|
2018-07-13 09:11:32 +00:00
|
|
|
questions={Questions}
|
2018-07-06 11:45:36 +00:00
|
|
|
/>)
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-07-09 08:22:48 +00:00
|
|
|
export default BrowseArchives;
|