Improved dropdown to filter visits, adding support to filter out bots

src/visits/VisitsStats.tsx

@@ -20,10 +20,10 @@ import SortableBarGraph from './helpers/SortableBarGraph';
 import GraphCard from './helpers/GraphCard';
 import LineChartCard from './helpers/LineChartCard';
 import VisitsTable from './VisitsTable';
-import { NormalizedOrphanVisit, NormalizedVisit, OrphanVisitType, VisitsInfo } from './types';
+import { NormalizedOrphanVisit, NormalizedVisit, VisitsInfo } from './types';
 import OpenMapModalBtn from './helpers/OpenMapModalBtn';
 import { processStatsFromVisits } from './services/VisitsParser';
-import { OrphanVisitTypeDropdown } from './helpers/OrphanVisitTypeDropdown';
+import { VisitsFilter, VisitsFilterDropdown } from './helpers/VisitsFilterDropdown';
 import { HighlightableProps, highlightedVisitsToStats, normalizeAndFilterVisits } from './types/helpers';
 import './VisitsStats.scss';
 
@@ -85,7 +85,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({
   const [ dateRange, setDateRange ] = useState<DateRange>(intervalToDateRange(initialInterval));
   const [ highlightedVisits, setHighlightedVisits ] = useState<NormalizedVisit[]>([]);
   const [ highlightedLabel, setHighlightedLabel ] = useState<string | undefined>();
-  const [ orphanVisitType, setOrphanVisitType ] = useState<OrphanVisitType | undefined>();
+  const [ visitsFilter, setVisitsFilter ] = useState<VisitsFilter>({});
 
   const buildSectionUrl = (subPath?: string) => {
     const query = domain ? `?domain=${domain}` : '';
@@ -93,10 +93,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({
     return !subPath ? `${baseUrl}${query}` : `${baseUrl}${subPath}${query}`;
   };
   const { visits, loading, loadingLarge, error, errorData, progress } = visitsInfo;
-  const normalizedVisits = useMemo(
-    () => normalizeAndFilterVisits(visits, orphanVisitType),
-    [ visits, orphanVisitType ],
-  );
+  const normalizedVisits = useMemo(() => normalizeAndFilterVisits(visits, visitsFilter), [ visits, visitsFilter ]);
   const { os, browsers, referrers, countries, cities, citiesForMap, visitedUrls } = useMemo(
     () => processStatsFromVisits(normalizedVisits),
     [ normalizedVisits ],
@@ -282,14 +279,12 @@ const VisitsStats: FC<VisitsStatsProps> = ({
                   onDatesChange={setDateRange}
                 />
               </div>
-              {isOrphanVisits && (
-                <OrphanVisitTypeDropdown
-                  text="Filter by type"
-                  className="ml-0 ml-md-2 mt-3 mt-md-0"
-                  selected={orphanVisitType}
-                  onChange={setOrphanVisitType}
-                />
-              )}
+              <VisitsFilterDropdown
+                className="ml-0 ml-md-2 mt-3 mt-md-0"
+                isOrphanVisits={isOrphanVisits}
+                selected={visitsFilter}
+                onChange={setVisitsFilter}
+              />
             </div>
           </div>
           {visits.length > 0 && (