Added more filtering options for search

pages/search.tsx

@@ -22,17 +22,63 @@ enum sortingOptions {
 function SearchRoute(props: Props) {
   const [sortingOption, setSortingOption] = useState<sortingOptions>(sortingOptions.Relevance);
   const [sortedArticles, setSortedArticles] = useState<ReceivedArticle[]>(props.articles);
+  const [filterIssue, setFilterIssue] = useState<number | null>(null);
+
+  const [filterVolume, setFilterVolume] = useState<number | null>(null);
 
   useEffect(() => {
     sortArticles();
   }, [sortingOption]);
 
+  useEffect(() => {
+    sortArticles();
+  }, [filterIssue]);
+
+  useEffect(() => {
+    sortArticles();
+  }, [filterVolume]);
+
   const handleSortChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     setSortingOption(event.target.value as sortingOptions);
   };
 
+  const handleIssueChange = (event: { target: { value: string } }) => {
+    let selectedIssue = parseInt(event.target.value, 10);
+    setFilterIssue(selectedIssue !== -1 ? selectedIssue : null);
+  };
+
+  const handleVolumeChange = (event: { target: { value: string } }) => {
+    let selectedVolume = parseInt(event.target.value, 10);
+    setFilterVolume(selectedVolume !== -1 ? selectedVolume : null);
+  };
+
   const sortArticles = () => {
     const articlesCopy = [...props.articles];
+    if (Number.isNaN(filterIssue) || filterIssue == null) {
+      if (Number.isNaN(filterVolume) || filterVolume == null) {
+        setSortedArticles(articlesCopy);
+      } else {
+        const filteredArticles = articlesCopy.filter(
+          (article) => article.volume === filterVolume
+        );
+        setSortedArticles(filteredArticles);
+      }
+    } else if (!(Number.isNaN(filterIssue) || filterIssue == null)) {
+      if (!(Number.isNaN(filterVolume) || filterVolume == null)) {
+        const filteredArticles = articlesCopy.filter(
+          (article) => article.volume === filterVolume
+        );
+        const filteredArticles2 = filteredArticles.filter(
+          (article) => article.issue === filterIssue
+        );
+        setSortedArticles(filteredArticles2);
+      } else {
+        const filteredArticles = articlesCopy.filter(
+          (article) => article.issue === filterIssue
+        );
+        setSortedArticles(filteredArticles);
+      }
+    }
 
     if (sortingOption === sortingOptions.Newest) {
       articlesCopy.sort((a, b) => {
@@ -49,8 +95,6 @@ function SearchRoute(props: Props) {
         return a.volume - b.volume;
       });
     }
-
-    setSortedArticles(articlesCopy);
   };
 
   return (
@@ -70,6 +114,17 @@ function SearchRoute(props: Props) {
             <option value={sortingOptions.Oldest}>Oldest</option>
           </select>
         </div>
+        <div>
+          <label htmlFor="filter-issue-select">Filter by Issue: </label>
+          <input id="filter-issue-select" placeholder="Issue number" onChange={handleIssueChange}>
+          </input>
+        </div>
+        <div>
+          <label htmlFor="filter-issue-select">Filter by Volume: </label>
+          <input id="filter-volume-select" placeholder="Volume number" onChange={handleVolumeChange}>
+          </input>
+        </div>
+
         {props.staff.length > 0 && (
           <>
             <h2>{props.staff.length} staff members found:</h2>
@@ -97,7 +152,7 @@ function SearchRoute(props: Props) {
       </main>
     </div>
   );
-};
+}
 
 export default SearchRoute;