Able to selectively search in title/body/comments

Looks ugly but works
jeffslofish · Jun 12, 2020 · 9f75942 · 9f75942
1 parent d7930e9
commit 9f75942
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 33 deletions.
diff --git a/client/src/components/Main.js b/client/src/components/Main.js
@@ -13,14 +13,16 @@ export default function Main() {
   const [sortType, setSortType] = useState('created');
   const [sortDesc, setSortDesc] = useState(true);
   const [issueAssigned, setIssueAssigned] = useState(false);
+  const [inTitle, setInTitle] = useState(true);
+  const [inBody, setInBody] = useState(true);
+  const [inComments, setInComments] = useState(true);
 
   const handleNextButton = () => {
-
     window.scroll({
-      top:0,
-      left:0,
-      behavior: 'smooth'
-    })
+      top: 0,
+      left: 0,
+      behavior: 'smooth',
+    });
 
     githubContext.search(
       githubContext.page + 1,
@@ -30,15 +32,18 @@ export default function Main() {
       language,
       sortType,
       sortDesc,
-      issueAssigned
+      issueAssigned,
+      inTitle,
+      inBody,
+      inComments
     );
-  }
+  };
   const handlePrevButton = () => {
     window.scroll({
-      top:0,
-      left:0,
-      behavior: 'smooth'
-  })
+      top: 0,
+      left: 0,
+      behavior: 'smooth',
+    });
     githubContext.search(
       githubContext.page > 1 ? githubContext.page - 1 : githubContext.page,
       githubContext.resultsPerPage,
@@ -47,14 +52,20 @@ export default function Main() {
       language,
       sortType,
       sortDesc,
-      issueAssigned
+      issueAssigned,
+      inTitle,
+      inBody,
+      inComments
     );
-  }
-  const onSortTypeChange = e => setSortType(e.target.value);
-  const onSortDescChange = e => setSortDesc(e.target.value);
-  const onIssueAssignedChange = e => setIssueAssigned(e.target.value);
+  };
+  const onSortTypeChange = (e) => setSortType(e.target.value);
+  const onSortDescChange = (e) => setSortDesc(e.target.value);
+  const onIssueAssignedChange = (e) => setIssueAssigned(e.target.value);
+  const onInTitleChange = (e) => setInTitle(e.target.checked);
+  const onInBodyChange = (e) => setInBody(e.target.checked);
+  const onInCommentsChange = (e) => setInComments(e.target.checked);
 
-  const handleSubmit = e => {
+  const handleSubmit = (e) => {
     e.preventDefault();
 
     githubContext.search(
@@ -65,7 +76,10 @@ export default function Main() {
       language,
       sortType,
       sortDesc,
-      issueAssigned
+      issueAssigned,
+      inTitle,
+      inBody,
+      inComments
     );
   };
 
@@ -110,12 +124,20 @@ export default function Main() {
               <option value={'updated'}>Sort by updated time</option>
               <option value={'comments'}>Sort by number of comments</option>
               <option value={'reactions'}>Sort by number of reactions</option>
-              <option value={'interactions'}>Sort by number of interactions</option>
+              <option value={'interactions'}>
+                Sort by number of interactions
+              </option>
               <option value={'reactions-+1'}>Sort by number of +1s</option>
               <option value={'reactions--1'}>Sort by number of -1s</option>
-              <option value={'reactions-smile'}>Sort by number of smiles</option>
-              <option value={'reactions-thinking_face'}>Sort by number of thinking faces</option>
-              <option value={'reactions-heart'}>Sort by number of hearts</option>
+              <option value={'reactions-smile'}>
+                Sort by number of smiles
+              </option>
+              <option value={'reactions-thinking_face'}>
+                Sort by number of thinking faces
+              </option>
+              <option value={'reactions-heart'}>
+                Sort by number of hearts
+              </option>
               <option value={'reactions-tada'}>Sort by number of tadas</option>
             </select>
             <select value={sortDesc} onChange={onSortDescChange}>
@@ -127,6 +149,33 @@ export default function Main() {
               <option value={true}>Possibly Assigned</option>
             </select>
           </div>
+          <fieldset>
+            <legend>Search in: </legend>
+            <label>
+              <input
+                type="checkbox"
+                checked={inTitle}
+                onChange={onInTitleChange}
+              />
+              title
+            </label>
+            <label>
+              <input
+                type="checkbox"
+                checked={inBody}
+                onChange={onInBodyChange}
+              />
+              body
+            </label>
+            <label>
+              <input
+                type="checkbox"
+                checked={inComments}
+                onChange={onInCommentsChange}
+              />
+              comments
+            </label>
+          </fieldset>
         </form>
       </div>
       <div className="app-body">

diff --git a/client/src/context/github/GithubState.js b/client/src/context/github/GithubState.js
@@ -3,13 +3,13 @@ import GithubContext from './GithubContext';
 import GithubReducer from './githubReducer';
 import { SEARCH_ISSUES, SET_LOADING } from '../types';
 
-const GithubState = props => {
+const GithubState = (props) => {
   const initialState = {
     issues: [],
     totalCount: 0,
     resultsPerPage: 25,
     page: 1,
-    loading: false
+    loading: false,
   };
 
   const [state, dispatch] = useReducer(GithubReducer, initialState);
@@ -24,7 +24,10 @@ const GithubState = props => {
     language,
     sortType,
     sortDesc,
-    issueAssigned
+    issueAssigned,
+    inTitle,
+    inBody,
+    inComments
   ) => {
     setLoading();
 
@@ -38,15 +41,22 @@ const GithubState = props => {
       maybePlus = '';
     }
 
+    const inTitleQuery = inTitle ? ' in:title ' : '';
+    const inBodyQuery = inBody ? ' in:body ' : '';
+    const inCommentsQuery = inComments ? 'in:comments ' : '';
+
     // Prevent issues that were somehow created or updated "in the future" to show up in results: only show past issues
-    const today = new Date().toISOString().slice(0,10);
+    const today = new Date().toISOString().slice(0, 10);
     const pastIssueQuery = ` created:<=${today} updated:<=${today} `;
 
     let sortOrder = JSON.parse(sortDesc) ? 'desc' : 'asc';
     let issueAssignedState = JSON.parse(issueAssigned) ? '' : '+no:assignee';
     let searchQuery =
       keywordQuery +
-      pastIssueQuery + 
+      pastIssueQuery +
+      inTitleQuery +
+      inBodyQuery +
+      inCommentsQuery +
       maybePlus +
       labelQuery +
       languageQuery +
@@ -64,20 +74,20 @@ const GithubState = props => {
     let myRequest = new Request('/api/github/rest?q=' + searchQuery);
 
     fetch(myRequest)
-      .then(function(response) {
+      .then(function (response) {
         return response.json();
       })
-      .then(function(data) {
+      .then(function (data) {
         dispatch({
           type: SEARCH_ISSUES,
           payload: {
             issues: data.items,
             totalCount: Number.parseInt(data.total_count, 10),
-            page: page
-          }
+            page: page,
+          },
         });
       })
-      .catch(function(err) {
+      .catch(function (err) {
         console.log(err); //TODO: proper error handling
       });
   };
@@ -90,7 +100,7 @@ const GithubState = props => {
         resultsPerPage: state.resultsPerPage,
         page: state.page,
         loading: state.loading,
-        search
+        search,
       }}
     >
       {props.children}