Changes for removing warnings during npm run build

src/AdDetailsContent.js

@@ -150,7 +150,7 @@ const AdDetailsContent = (params) => {
         <tbody>
           <tr><td>Ad Type:</td><td>{params.details.type}</td></tr>
           <tr><td>Entities:</td><td>{params.details.entities}</td></tr>
-          <tr><td>Cluster Topics:</td><td>{params.details.topics}<br /><a href='#' onClick={handleShow}>Suggest more topics?</a></td></tr>
+          <tr><td>Cluster Topics:</td><td>{params.details.topics}<br /><a href='# ' onClick={handleShow}>Suggest more topics?</a></td></tr>
           <tr><td>Number of ads in cluster:</td><td>{params.details.cluster_size}</td></tr>
           <tr><td>Canonical ad archive ID:</td><td>{params.details.canonical_archive_id}</td></tr>
         </tbody>

src/AdDetailsPage.js

@@ -7,31 +7,31 @@ import AdDetailsContent from "./AdDetailsContent.js";
 const getClusterURL = "/archive-id";
 
 function AdDetailsPage() {
+	/* eslint-disable-next-line */
 	const [adIdParam, setAdIdParam] = useQueryParam('ad_id', StringParam);
 	const [adClusterData, setAdClusterData] = useState([]);
 	const [isAdClusterDataLoaded, setIsAdClusterDataLoaded] = useState(false);
 	const [isAdClusterDataEmpty, setIsAdClusterDataEmpty] = useState(false);
-
-	const getAdClusterData = () => {
-		axios
-		  .get(getClusterURL + '/' + adIdParam + '/cluster')
-		  .then((response) => {
-		    console.log(response.data);
-		    setAdClusterData(response.data);
-		    setIsAdClusterDataLoaded(true);
-		  })
-		  .catch((error) => {
-		    console.log(error);
-		    if (error.response.status === 404) {
-		      setIsAdClusterDataEmpty(true);
-		    }
-		  })
-		  .finally(() => {});
-	};
 
 	useEffect(() => {
+		const getAdClusterData = () => {
+			axios
+			  .get(getClusterURL + '/' + adIdParam + '/cluster')
+			  .then((response) => {
+			    console.log(response.data);
+			    setAdClusterData(response.data);
+			    setIsAdClusterDataLoaded(true);
+			  })
+			  .catch((error) => {
+			    console.log(error);
+			    if (error.response.status === 404) {
+			      setIsAdClusterDataEmpty(true);
+			    }
+			  })
+			  .finally(() => {});
+		};
 		getAdClusterData();
-	}, []);
+	}, [adIdParam]);
 
 	if (isAdClusterDataEmpty) {
 		return (<div><br /><br /><br /><h3 align="center">No results found</h3></div>);

src/AdScreenerTool.js

@@ -5,8 +5,7 @@ import Tabs from "react-bootstrap/Tabs";
 import Tab from "react-bootstrap/Tab";
 import axios from "axios";
 import { addDays } from "date-fns";
-import { useQueryParam, StringParam, NumberParam } from 'use-query-params';
-import { Link } from 'react-router-dom';
+import { useQueryParam, StringParam } from 'use-query-params';
 import ReactLoading from 'react-loading';
 import { AsyncTypeahead } from 'react-bootstrap-typeahead';
 
@@ -131,6 +130,10 @@ const AdClustersDisplay = (params) => {
 }
 
 const AdScreener = (params) => {
+  /*Disabling lint for setParam variables as they are required to set values in the tool even though they are not 
+  explicitly invoked.
+  Disabling argument check to prevent error raised for not using props in renderMenuItemChildren in AsyncTypeahead*/
+  /*eslint no-unused-vars: ["error", { "varsIgnorePattern": "set", "args": "none"}]*/
 
   const [startDateParam, setStartDateParam] = useQueryParam('Start Date', StringParam);
   const [endDateParam, setEndDateParam] = useQueryParam('End Date', StringParam);
@@ -246,11 +249,11 @@ const AdScreener = (params) => {
 
   const handleSelect = (k) => {
   	setSelectedTopicOrFullTextSearchTab(k);
-  	if(k=='topics') {
+  	if(k==='topics') {
   		setFullTextSearchQuery(null);
 		setPageId(null);
   	}
-	else if(k=='advertiser') {
+	else if(k==='advertiser') {
 		setFullTextSearchQuery(null);
 		setTopic({ selectedOption: ""});
 		setTopicParam(undefined);
@@ -297,7 +300,7 @@ const AdScreener = (params) => {
       <p>
         Please select filters below and click 'Get Ads' to load content.{" "}
         {/* eslint-disable-next-line */}
-        <a href="#" onClick={handleShow}>
+        <a href="# " onClick={handleShow}>
           Click here for more information.
         </a>
       </p>
@@ -403,7 +406,7 @@ const AdScreener = (params) => {
         <Button variant="primary" onClick={getFirstPageOfAds}>Get Ads</Button>
       </div>
 
-      <a href="#" onClick={handleShowTopicModal}>
+      <a href="# " onClick={handleShowTopicModal}>
         Click here to suggest topics.
       </a>
 

src/AdUnit.js

@@ -117,8 +117,6 @@ const AdDetails = (params) => {
   if (!(params.details && params.details.length !== 0)) {
     return(<div></div>);
   }
-  var ad_url =
-    "https://www.facebook.com/ads/library/?id=" + params.details.canonical_archive_id;
 
   return (
     <Modal

src/FilterSelector.js

@@ -8,6 +8,7 @@ const FilterSelector = params => {
   const handleChange = selectedOption => {
     params.setState({ selectedOption });
     setParam(selectedOption.value);
+    console.log(param);
     console.log(`Option selected:`, selectedOption);
   };
   console.log(params.option)

src/NewTopicSuggestionForAdClusterForm.js

@@ -10,8 +10,6 @@ import axios from "axios";
 
 
 const NewTopicSuggestionForAdClusterForm = params => {
-	var labelName = "";
-	const [validated, setValidated] = useState(false);
 	const [showSubmitStatusMessage, setShowSubmitStatusMessage] = useState(false);
 	const [message, setMessage] = useState("");
 	const [style, setStyle] = useState({});
@@ -25,19 +23,19 @@ const NewTopicSuggestionForAdClusterForm = params => {
 		event.preventDefault();
 
 		var topicName = form.user_suggested_topic.value;
-		var comments = form.comments.value != "" ? form.comments.value : "None"
+		var comments = form.comments.value !== "" ? form.comments.value : "None"
 		var topics = form.topic_options;
 		var selected_topics = [];
 		for (var i = 0; i < topics.length; i++) {
 		    if (topics.options[i].selected) selected_topics.push(topics.options[i].value);
 		}
-		if(topicName != ""){
+		if(topicName !== ""){
 			selected_topics.push(topicName);
 		}
 		console.log(comments);
 		console.log(selected_topics);
 
-		if(selected_topics.length == 0) {
+		if(selected_topics.length === 0) {
 			setShowSubmitStatusMessage(true);
 			setMessage("Please select or enter a topic name!");
 			setStyle({color: 'red'});

src/TimePeriodPicker.js

@@ -4,6 +4,7 @@ import "react-datepicker/dist/react-datepicker.css";
 import { useQueryParam, StringParam } from 'use-query-params';
 
 const TimePeriodPicker = (params) => {
+  /*eslint no-unused-vars: ["error", { "varsIgnorePattern": "Date"}]*/
   const [startingDate, setStartingDate] = useQueryParam('Start Date', StringParam);
   const [endingDate, setEndingDate] = useQueryParam('End Date', StringParam);
   const updateStartTime = (date) => {
@@ -16,7 +17,6 @@ const TimePeriodPicker = (params) => {
   };
   console.log(params.startDate);
   console.log(params.endDate);
-
   return (
     <div>
       <div>