refactor

src/components/Filters/CompanyReceivedFilter.js

@@ -1,5 +1,5 @@
 /* eslint complexity: ["error", 7] */
-import './DateFilter.scss';
+import './Date/DateFilter.scss';
 import { DATE_VALIDATION_FORMAT, maxDate, minDate } from '../../constants';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import {

src/components/Filters/DateFilter.js → src/components/Filters/Date/DateFilter.js

@@ -1,21 +1,21 @@
 /* eslint complexity: ["error", 8] */
 import './DateFilter.scss';
-import { DATE_VALIDATION_FORMAT, maxDate, minDate } from '../../constants';
+import { DATE_VALIDATION_FORMAT, maxDate, minDate } from '../../../constants';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   selectQueryDateReceivedMax,
   selectQueryDateReceivedMin,
-} from '../../reducers/query/selectors';
+} from '../../../reducers/query/selectors';
 import { useDispatch, useSelector } from 'react-redux';
-import { datesChanged } from '../../reducers/query/querySlice';
-import { CollapsibleFilter } from './CollapsibleFilter/CollapsibleFilter';
+import { datesChanged } from '../../../reducers/query/querySlice';
+import { CollapsibleFilter } from '../CollapsibleFilter/CollapsibleFilter';
 import { DateRanges } from './DateRanges';
 import dayjs from 'dayjs';
 import dayjsCustomParseFormat from 'dayjs/plugin/customParseFormat';
 import dayjsIsBetween from 'dayjs/plugin/isBetween';
 import dayjsUtc from 'dayjs/plugin/utc';
-import { formatDateModel } from '../../utils/formatDate';
-import getIcon from '../iconMap';
+import { formatDateModel } from '../../../utils/formatDate';
+import getIcon from '../../iconMap';
 
 dayjs.extend(dayjsCustomParseFormat);
 dayjs.extend(dayjsIsBetween);

src/components/Filters/DateFilter.spec.js → src/components/Filters/Date/DateFilter.spec.js

@@ -1,6 +1,6 @@
-import { testRender as render, screen } from '../../testUtils/test-utils';
-import { merge } from '../../testUtils/functionHelpers';
-import { queryState } from '../../reducers/query/querySlice';
+import { testRender as render, screen } from '../../../testUtils/test-utils';
+import { merge } from '../../../testUtils/functionHelpers';
+import { queryState } from '../../../reducers/query/querySlice';
 import { DateFilter } from './DateFilter';
 
 const renderComponent = (newQueryState = {}) => {

src/components/Filters/DateRanges.js → src/components/Filters/Date/DateRanges.js

@@ -1,10 +1,10 @@
 import './DateRanges.scss';
-import { selectQueryDateRange } from '../../reducers/query/selectors';
-import { selectViewTab } from '../../reducers/view/selectors';
+import { selectQueryDateRange } from '../../../reducers/query/selectors';
+import { selectViewTab } from '../../../reducers/view/selectors';
 import { useDispatch, useSelector } from 'react-redux';
-import { dateRanges } from '../../constants';
-import { dateRangeChanged } from '../../reducers/query/querySlice';
-import { sendAnalyticsEvent } from '../../utils';
+import { dateRanges } from '../../../constants';
+import { dateRangeChanged } from '../../../reducers/query/querySlice';
+import { sendAnalyticsEvent } from '../../../utils';
 
 export const DateRanges = () => {
   const dispatch = useDispatch();

src/components/Filters/DateRanges.spec.js → src/components/Filters/Date/DateRanges.spec.js

@@ -1,11 +1,11 @@
-import { testRender as render, screen } from '../../testUtils/test-utils';
+import { testRender as render, screen } from '../../../testUtils/test-utils';
 import userEvent from '@testing-library/user-event';
-import { merge } from '../../testUtils/functionHelpers';
-import { queryState } from '../../reducers/query/querySlice';
-import * as queryActions from '../../reducers/query/querySlice';
-import * as utils from '../../utils';
+import { merge } from '../../../testUtils/functionHelpers';
+import { queryState } from '../../../reducers/query/querySlice';
+import * as queryActions from '../../../reducers/query/querySlice';
+import * as utils from '../../../utils';
 import { DateRanges } from './DateRanges';
-import { dateRanges } from '../../constants';
+import { dateRanges } from '../../../constants';
 
 const renderComponent = (newQueryState = {}) => {
   merge(newQueryState, queryState);

src/components/Filters/FederalState.js → src/components/Filters/FederalState/FederalState.js

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { normalize } from '../../utils';
-import { multipleFiltersAdded } from '../../reducers/filters/filtersSlice';
-import { CollapsibleFilter } from './CollapsibleFilter/CollapsibleFilter';
-import { THESE_UNITED_STATES } from '../../constants';
-import { Typeahead } from '../Typeahead/Typeahead/Typeahead';
+import { normalize } from '../../../utils';
+import { multipleFiltersAdded } from '../../../reducers/filters/filtersSlice';
+import { CollapsibleFilter } from '../CollapsibleFilter/CollapsibleFilter';
+import { THESE_UNITED_STATES } from '../../../constants';
+import { Typeahead } from '../../Typeahead/Typeahead/Typeahead';
 
 export const FederalState = () => {
   const dispatch = useDispatch();

src/components/Filters/FederalState.spec.js → src/components/Filters/FederalState/FederalState.spec.js

@@ -2,10 +2,10 @@ import {
   testRender as render,
   screen,
   waitFor,
-} from '../../testUtils/test-utils';
+} from '../../../testUtils/test-utils';
 import userEvent from '@testing-library/user-event';
 import { FederalState } from './FederalState';
-import * as filterActions from '../../reducers/filters/filtersSlice';
+import * as filterActions from '../../../reducers/filters/filtersSlice';
 
 describe('FederalState', () => {
   const user = userEvent.setup({ delay: null });

src/components/Filters/FilterPanel.js → src/components/Filters/FilterPanel/FilterPanel.js

@@ -1,20 +1,20 @@
 import './FilterPanel.scss';
-import { Company } from './Company/Company';
-import { CompanyReceivedFilter } from './CompanyReceivedFilter';
+import { Company } from '../Company/Company';
+import { CompanyReceivedFilter } from '../CompanyReceivedFilter';
 import { useDispatch, useSelector } from 'react-redux';
-import { DateFilter } from './DateFilter';
-import { FederalState } from './FederalState';
-import { HasNarrative } from './HasNarrative';
-import getIcon from '../iconMap';
-import { Issue } from './Issue';
-import { Product } from './Product/Product';
-import { SimpleFilter } from './SimpleFilter/SimpleFilter';
-import { ZipCode } from './ZipCode';
-import { updateFilterVisibility } from '../../reducers/view/viewSlice';
+import { DateFilter } from '../Date/DateFilter';
+import { FederalState } from '../FederalState/FederalState';
+import { HasNarrative } from '../HasNarrative/HasNarrative';
+import getIcon from '../../iconMap';
+import { Issue } from '../Issue/Issue';
+import { Product } from '../Product/Product';
+import { SimpleFilter } from '../SimpleFilter/SimpleFilter';
+import { ZipCode } from '../ZipCode/ZipCode';
+import { updateFilterVisibility } from '../../../reducers/view/viewSlice';
 import {
   selectViewHasFilters,
   selectViewWidth,
-} from '../../reducers/view/selectors';
+} from '../../../reducers/view/selectors';
 
 export const FilterPanel = () => {
   const dispatch = useDispatch();

src/components/Filters/FilterPanel.scss → src/components/Filters/FilterPanel/FilterPanel.scss

@@ -1,4 +1,4 @@
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/abstracts/index' as *;
 @use 'css/base' as *;
 
 .filter-panel {

src/components/Filters/FilterPanel.spec.js → src/components/Filters/FilterPanel/FilterPanel.spec.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { FilterPanel } from '../Filters/FilterPanel';
-import { merge } from '../../testUtils/functionHelpers';
-import { viewState } from '../../reducers/view/viewSlice';
-import { testRender as render, screen } from '../../testUtils/test-utils';
+import { FilterPanel } from './FilterPanel';
+import { merge } from '../../../testUtils/functionHelpers';
+import { viewState } from '../../../reducers/view/viewSlice';
+import { testRender as render, screen } from '../../../testUtils/test-utils';
 import userEvent from '@testing-library/user-event';
 
 const renderComponent = (newViewState) => {

src/components/Filters/FilterPanelToggle.js → src/components/Filters/FilterPanel/FilterPanelToggle.js

@@ -1,7 +1,7 @@
 import './FilterPanelToggle.scss';
 import { useDispatch, useSelector } from 'react-redux';
-import { updateFilterVisibility } from '../../reducers/view/viewSlice';
-import { selectViewHasFilters } from '../../reducers/view/selectors';
+import { updateFilterVisibility } from '../../../reducers/view/viewSlice';
+import { selectViewHasFilters } from '../../../reducers/view/selectors';
 
 export const FilterPanelToggle = () => {
   const dispatch = useDispatch();

src/components/Filters/FilterPanelToggle.spec.js → src/components/Filters/FilterPanel/FilterPanelToggle.spec.js

@@ -1,7 +1,7 @@
 import { FilterPanelToggle } from './FilterPanelToggle';
-import { merge } from '../../testUtils/functionHelpers';
-import { viewState } from '../../reducers/view/viewSlice';
-import { testRender as render, screen } from '../../testUtils/test-utils';
+import { merge } from '../../../testUtils/functionHelpers';
+import { viewState } from '../../../reducers/view/viewSlice';
+import { testRender as render, screen } from '../../../testUtils/test-utils';
 import userEvent from '@testing-library/user-event';
 
 const renderComponent = (newViewState) => {

src/components/Filters/HasNarrative.js → src/components/Filters/HasNarrative/HasNarrative.js

@@ -1,8 +1,8 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { NARRATIVE_SEARCH_FIELD } from '../../constants';
-import { toggleFlagFilter } from '../../reducers/filters/filtersSlice';
-import { selectFiltersHasNarrative } from '../../reducers/filters/selectors';
-import { selectQuerySearchField } from '../../reducers/query/selectors';
+import { NARRATIVE_SEARCH_FIELD } from '../../../constants';
+import { toggleFlagFilter } from '../../../reducers/filters/filtersSlice';
+import { selectFiltersHasNarrative } from '../../../reducers/filters/selectors';
+import { selectQuerySearchField } from '../../../reducers/query/selectors';
 
 const FIELD_NAME = 'has_narrative';
 

src/components/Filters/HasNarrative.spec.js → src/components/Filters/HasNarrative/HasNarrative.spec.js

@@ -1,9 +1,9 @@
 import { HasNarrative } from './HasNarrative';
-import { merge } from '../../testUtils/functionHelpers';
-import { testRender as render, screen } from '../../testUtils/test-utils';
-import { filtersState } from '../../reducers/filters/filtersSlice';
-import * as filtersActions from '../../reducers/filters/filtersSlice';
-import { queryState } from '../../reducers/query/querySlice';
+import { merge } from '../../../testUtils/functionHelpers';
+import { testRender as render, screen } from '../../../testUtils/test-utils';
+import { filtersState } from '../../../reducers/filters/filtersSlice';
+import * as filtersActions from '../../../reducers/filters/filtersSlice';
+import { queryState } from '../../../reducers/query/querySlice';
 import userEvent from '@testing-library/user-event';
 
 const renderComponent = (newFiltersState, newQueryState) => {

src/components/Filters/Issue.js → src/components/Filters/Issue/Issue.js

@@ -1,14 +1,14 @@
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { sortSelThenCount } from '../../utils';
-import { CollapsibleFilter } from './CollapsibleFilter/CollapsibleFilter';
-import { filtersReplaced } from '../../reducers/filters/filtersSlice';
-import { SLUG_SEPARATOR } from '../../constants';
-import { Typeahead } from '../Typeahead/Typeahead/Typeahead';
-import { selectFiltersIssue } from '../../reducers/filters/selectors';
-import { MoreOrLess } from './MoreOrLess/MoreOrLess';
-import { AggregationBranch } from './Aggregation/AggregationBranch/AggregationBranch';
-import { useGetAggregations } from '../../hooks/useGetAggregations';
+import { sortSelThenCount } from '../../../utils';
+import { CollapsibleFilter } from '../CollapsibleFilter/CollapsibleFilter';
+import { filtersReplaced } from '../../../reducers/filters/filtersSlice';
+import { SLUG_SEPARATOR } from '../../../constants';
+import { Typeahead } from '../../Typeahead/Typeahead/Typeahead';
+import { selectFiltersIssue } from '../../../reducers/filters/selectors';
+import { MoreOrLess } from '../MoreOrLess/MoreOrLess';
+import { AggregationBranch } from '../Aggregation/AggregationBranch/AggregationBranch';
+import { useGetAggregations } from '../../../hooks/useGetAggregations';
 
 // eslint-disable-next-line react/prop-types
 export const Issue = () => {

src/components/Filters/Issue.spec.js → src/components/Filters/Issue/Issue.spec.js

@@ -2,14 +2,14 @@ import {
   testRender as render,
   screen,
   waitFor,
-} from '../../testUtils/test-utils';
+} from '../../../testUtils/test-utils';
 import userEvent from '@testing-library/user-event';
-import { merge } from '../../testUtils/functionHelpers';
+import { merge } from '../../../testUtils/functionHelpers';
 import { aggsState } from '../../reducers/aggs/aggsSlice';
 import { Issue } from './Issue';
-import { listOfIssues } from '../../testUtils/aggsConstants';
-import * as filterActions from '../../reducers/filters/filtersSlice';
-import { filtersState } from '../../reducers/filters/filtersSlice';
+import { listOfIssues } from '../../../testUtils/aggsConstants';
+import * as filterActions from '../../../reducers/filters/filtersSlice';
+import { filtersState } from '../../../reducers/filters/filtersSlice';
 
 describe('Issue', () => {
   const user = userEvent.setup({ delay: null });

src/components/Filters/ZipCode.js → src/components/Filters/ZipCode/ZipCode.js

@@ -1,14 +1,14 @@
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { CollapsibleFilter } from './CollapsibleFilter/CollapsibleFilter';
-import { stateToQS } from '../../reducers/query/querySlice';
-import { API_PLACEHOLDER } from '../../constants';
-import { selectQueryRoot } from '../../reducers/query/selectors';
-import { AsyncTypeahead } from '../Typeahead/AsyncTypeahead/AsyncTypeahead';
-import { handleFetchSearch } from '../Typeahead/utils';
-import { multipleFiltersAdded } from '../../reducers/filters/filtersSlice';
-import { selectFiltersRoot } from '../../reducers/filters/selectors';
+import { CollapsibleFilter } from '../CollapsibleFilter/CollapsibleFilter';
+import { stateToQS } from '../../../reducers/query/querySlice';
+import { API_PLACEHOLDER } from '../../../constants';
+import { selectQueryRoot } from '../../../reducers/query/selectors';
+import { AsyncTypeahead } from '../../Typeahead/AsyncTypeahead/AsyncTypeahead';
+import { handleFetchSearch } from '../../Typeahead/utils';
+import { multipleFiltersAdded } from '../../../reducers/filters/filtersSlice';
+import { selectFiltersRoot } from '../../../reducers/filters/selectors';
 
 const FIELD_NAME = 'zip_code';
 

src/components/Filters/ZipCode.spec.js → src/components/Filters/ZipCode/ZipCode.spec.js

@@ -2,10 +2,10 @@ import {
   testRender as render,
   screen,
   waitFor,
-} from '../../testUtils/test-utils';
+} from '../../../testUtils/test-utils';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'jest-fetch-mock';
-import * as filterActions from '../../reducers/filters/filtersSlice';
+import * as filterActions from '../../../reducers/filters/filtersSlice';
 import { ZipCode } from './ZipCode';
 
 fetchMock.enableMocks();

src/components/List/ListPanel/ListPanel.js

@@ -6,8 +6,8 @@ import { ActionBar } from '../../ActionBar/ActionBar';
 import { ComplaintCard } from '../ComplaintCard/ComplaintCard';
 import { useDispatch, useSelector } from 'react-redux';
 import ErrorBlock from '../../Warnings/Error';
-import { FilterPanel } from '../../Filters/FilterPanel';
-import { FilterPanelToggle } from '../../Filters/FilterPanelToggle';
+import { FilterPanel } from '../../Filters/FilterPanel/FilterPanel';
+import { FilterPanelToggle } from '../../Filters/FilterPanel/FilterPanelToggle';
 import { Loading } from '../../Loading/Loading';
 import { NarrativesButtons } from '../../RefineBar/NarrativesButtons';
 import { Pagination } from '../Pagination/Pagination';

src/components/Map/MapPanel.js

@@ -2,8 +2,8 @@ import '../RefineBar/RefineBar.scss';
 import { ActionBar } from '../ActionBar/ActionBar';
 import { useDispatch, useSelector } from 'react-redux';
 import ErrorBlock from '../Warnings/Error';
-import { FilterPanel } from '../Filters/FilterPanel';
-import { FilterPanelToggle } from '../Filters/FilterPanelToggle';
+import { FilterPanel } from '../Filters/FilterPanel/FilterPanel';
+import { FilterPanelToggle } from '../Filters/FilterPanel/FilterPanelToggle';
 import { Loading } from '../Loading/Loading';
 import { MapToolbar } from './MapToolbar';
 import { mapWarningDismissed } from '../../reducers/filters/filtersSlice';

src/components/Search/RefinePanel.js

@@ -1,5 +1,5 @@
 import { useSelector } from 'react-redux';
-import { FilterPanel } from '../Filters/FilterPanel';
+import { FilterPanel } from '../Filters/FilterPanel/FilterPanel';
 import { selectViewTab } from '../../reducers/view/selectors';
 import { selectViewWidth } from '../../reducers/view/selectors';
 

src/components/Trends/TrendsPanel/TrendsPanel.js

@@ -30,8 +30,8 @@ import { showCompanyOverLay, getIntervals } from '../../../utils/trends';
 import { ActionBar } from '../../ActionBar/ActionBar';
 import { TabbedNavigation } from '../../TabbedNavigation';
 import Warning from '../../Warnings/Warning';
-import { FilterPanel } from '../../Filters/FilterPanel';
-import { FilterPanelToggle } from '../../Filters/FilterPanelToggle';
+import { FilterPanel } from '../../Filters/FilterPanel/FilterPanel';
+import { FilterPanelToggle } from '../../Filters/FilterPanel/FilterPanelToggle';
 import Select from '../../RefineBar/Select';
 import { Separator } from '../../RefineBar/Separator';
 import { ChartToggles } from '../../RefineBar/ChartToggles';