Our415 44 Fix naming conventions throughout project

app/Router.tsx

@@ -3,15 +3,14 @@ import { Route, Routes } from "react-router-dom";
 import { HomePage } from "pages/HomePage";
 import { AboutPage } from "pages/AboutPage";
 import { FaqPage } from "pages/FaqPage/FaqPage";
-import { ListingDebugPage } from "pages/debug/ListingDemoPage";
-import { OrganizationListingPage } from "pages/OrganizationListingPage";
-import { PrivacyPolicyPage } from "pages/legal/PrivacyPolicy";
-import { ServiceListingPage } from "pages/ServiceListingPage/ServiceListingPage";
-import { TermsOfServicePage } from "pages/legal/TermsOfService";
-import { ServiceDiscoveryResults } from "pages/ServiceDiscoveryResults";
-import { SecondaryNavigationWrapper } from "components/navigation/SecondaryNavigationWrapper";
+import { OrganizationDetailPage } from "pages/OrganizationDetailPage";
+import { PrivacyPolicyPage } from "pages/LegalPage/PrivacyPolicy";
+import { ServiceDetailPage } from "pages/ServiceDetailPage/ServiceDetailPage";
+import { TermsOfServicePage } from "pages/LegalPage/TermsOfService";
+import { BrowseResultsPage } from "pages/BrowseResultsPage/BrowseResultsPage";
+import { PageHeader } from "components/ui/Navigation/PageHeader";
 import { BackButton } from "components/ui/BackButton";
-import { SearchHeaderSection } from "components/search/Header/SearchHeaderSection";
+import { SearchHeaderSection } from "components/SearchAndBrowse/Header/SearchHeaderSection";
 import { SearchResultsPage } from "pages/SearchResultsPage/SearchResultsPage";
 
 export const Router = () => {
@@ -20,17 +19,16 @@ export const Router = () => {
       <Route path="/" element={<HomePage />} />
       <Route path="/about" element={<AboutPage />} />
       <Route path="/faqs" element={<FaqPage />} />
-      <Route path="/demo/listing" element={<ListingDebugPage />} />
       {/* NB: /organizations/new must be listed before /organizations/:id or else the /new
                 step will be interpreted as an ID and will thus break the OrganizationEditPage */}
       <Route
         path="/organizations/:organizationListingId"
         element={
           <>
-            <SecondaryNavigationWrapper>
+            <PageHeader>
               <BackButton defaultReturnTo="/search">Back</BackButton>
-            </SecondaryNavigationWrapper>
-            <OrganizationListingPage />
+            </PageHeader>
+            <OrganizationDetailPage />
           </>
         }
       />
@@ -40,9 +38,9 @@ export const Router = () => {
         path="/search"
         element={
           <>
-            <SecondaryNavigationWrapper variant="secondary">
+            <PageHeader variant="secondary">
               <SearchHeaderSection descriptionText="Sign up for programs and access resources." />
-            </SecondaryNavigationWrapper>
+            </PageHeader>
             <SearchResultsPage />
           </>
         }
@@ -51,20 +49,17 @@ export const Router = () => {
         path="/services/:serviceListingId"
         element={
           <>
-            <SecondaryNavigationWrapper>
+            <PageHeader>
               <BackButton defaultReturnTo="/search">
                 Back to Services
               </BackButton>
-            </SecondaryNavigationWrapper>
-            <ServiceListingPage />
+            </PageHeader>
+            <ServiceDetailPage />
           </>
         }
       />
       <Route path="/terms-of-service" element={<TermsOfServicePage />} />
-      <Route
-        path="/:categorySlug/results"
-        element={<ServiceDiscoveryResults />}
-      />
+      <Route path="/:categorySlug/results" element={<BrowseResultsPage />} />
     </Routes>
   );
 };

app/components/listing/ListingPageWrapper.module.scss → app/components/DetailPage/DetailPageWrapper.module.scss

@@ -1,6 +1,6 @@
 @import "../../styles/utils/_helpers.scss";
 
-.listing-wrapper {
+.detail-wrapper {
   background: $color-grey1;
   padding: $section-padding-desktop-vertical $general-spacing-md;
   background: $color-white;
@@ -10,7 +10,7 @@
   }
 }
 
-.listing {
+.detail {
   color: $text-secondary;
 
   p {
@@ -37,7 +37,7 @@
   }
 }
 
-.listing--main {
+.detail--main {
   width: 100%;
   margin: auto;
   display: flex;
@@ -65,7 +65,7 @@
   }
 }
 
-.listing--aside {
+.detail--aside {
   max-height: 100vh;
   display: flex;
   flex-direction: column;

app/components/listing/ListingPageWrapper.tsx → app/components/DetailPage/DetailPageWrapper.tsx

@@ -1,33 +1,33 @@
 import React from "react";
 import { Helmet } from "react-helmet-async";
-import { ActionSidebar } from "components/listing";
-import styles from "./ListingPageWrapper.module.scss";
+import { ActionSidebar } from "components/DetailPage";
+import styles from "./DetailPageWrapper.module.scss";
 import { OrganizationAction } from "models";
 
-type ListingPageWrapperProps = {
+type DetailPageWrapperProps = {
   title: string;
   description: string;
   children: React.ReactNode;
   sidebarActions: OrganizationAction[];
   onClickAction: (action: OrganizationAction) => void;
 };
 
-const ListingPageWrapper = ({
+const DetailPageWrapper = ({
   title,
   description,
   children,
   sidebarActions,
   onClickAction,
-}: ListingPageWrapperProps) => (
-  <div className={styles[`listing-wrapper`]}>
+}: DetailPageWrapperProps) => (
+  <div className={styles[`detail-wrapper`]}>
     <Helmet>
       <title>{title}</title>
       <meta name="description" content={description} />
     </Helmet>
-    <article className={styles.listing} id="resource">
-      <div className={styles["listing--main"]}>
-        <div className={styles["listing--main--left"]}>{children}</div>
-        <aside className={`${styles["listing--aside"]} no-print`}>
+    <article className={styles.detail} id="resource">
+      <div className={styles["detail--main"]}>
+        <div className={styles["detail--main--left"]}>{children}</div>
+        <aside className={`${styles["detail--aside"]} no-print`}>
           <ActionSidebar
             actions={sidebarActions}
             onClickAction={onClickAction}
@@ -38,4 +38,4 @@ const ListingPageWrapper = ({
   </div>
 );
 
-export default ListingPageWrapper;
+export default DetailPageWrapper;

app/components/listing/ListingInfoTable.module.scss → app/components/DetailPage/InfoTable.module.scss

@@ -1,6 +1,6 @@
 @import "../../styles/utils/_helpers.scss";
 
-.listingInfoTable {
+.infoTable {
   width: 100%;
 
   tr {

app/components/listing/ListingInfoTable.tsx → app/components/DetailPage/InfoTable.tsx

@@ -1,21 +1,21 @@
 import React, { ReactNode } from "react";
-import styles from "./ListingInfoTable.module.scss";
+import styles from "./InfoTable.module.scss";
 
-interface ListingInfoTableProps<T = unknown> {
+interface InfoTableProps<T = unknown> {
   rows?: T[];
   rowRenderer?: (row: T) => JSX.Element;
   children?: ReactNode;
 }
 
-export const ListingInfoTable = <T,>({
+export const InfoTable = <T,>({
   rows,
   rowRenderer,
   children,
-}: ListingInfoTableProps<T>) => {
+}: InfoTableProps<T>) => {
   const useRowRenderer = !children && rows && rowRenderer;
 
   return (
-    <table className={styles.listingInfoTable}>
+    <table className={styles.infoTable}>
       <tbody>
         {children}
         {useRowRenderer && rows.map((row) => rowRenderer(row))}

app/components/listing/LabelTagRows.test.tsx → app/components/DetailPage/LabelTagRows.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import LabelTagRows from "components/listing/LabelTagRows";
+import LabelTagRows from "components/DetailPage/LabelTagRows";
 
 describe("<LabelTagRows />", () => {
   it("should show top level category labels if they exist", () => {

app/components/listing/ServiceDetails.scss → app/components/DetailPage/ServiceDetails.scss

@@ -1,17 +1,14 @@
 @import "../../styles/utils/_helpers.scss";
 
+// TODO: Check if these are being used:
+
 .attributed-service-icon-container {
   width: 17px;
   margin-right: 4px;
   display: inline-block;
   text-align: center;
 }
 
-.listing-menu--button-icon {
-  height: 14px;
-  width: auto;
-}
-
 .attributed-service-text {
   font-size: 13px;
   color: $color-grey5;

app/components/search/Refinements/BrowseRefinementList.test.tsx → app/components/SearchAndBrowse/Refinements/BrowseRefinementList.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { InstantSearch } from "react-instantsearch-core";
 import { render, screen, waitFor } from "@testing-library/react";
-import BrowseRefinementList from "components/search/Refinements/BrowseRefinementList";
+import BrowseRefinementList from "components/SearchAndBrowse/Refinements/BrowseRefinementList";
 import { createSearchClient } from "../../../../test/helpers/createSearchClient";
 import { createRandomCategories } from "../../../../test/helpers/createRandomCategories";
 

app/components/search/SearchMap/SearchEntry.tsx → app/components/SearchAndBrowse/SearchMap/SearchEntry.tsx

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import { Link } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
 import websiteConfig from "utils/websiteConfig";
-import { RelativeOpeningTime } from "components/listing/RelativeOpeningTime";
+import { RelativeOpeningTime } from "components/DetailPage/RelativeOpeningTime";
 import type { TransformedSearchHit } from "models/SearchHits";
 import "./SearchEntry.scss";
 

app/components/search/SearchMap/SearchMap.tsx → app/components/SearchAndBrowse/SearchMap/SearchMap.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, useState } from "react";
 import GoogleMap from "google-map-react";
 import { Tooltip } from "react-tippy";
 import "react-tippy/dist/tippy.css";
-import SearchEntry from "components/search/SearchMap/SearchEntry";
+import SearchEntry from "components/SearchAndBrowse/SearchMap/SearchEntry";
 import { useAppContext, useAppContextUpdater } from "utils";
 import { Button } from "components/ui/inline/Button/Button";
 import {
@@ -13,7 +13,7 @@ import {
 import "./SearchMap.scss";
 import { TransformedSearchHit } from "../../../models";
 import config from "../../../config";
-import { SearchMapActions } from "components/search/SearchResults/SearchResults";
+import { SearchMapActions } from "components/SearchAndBrowse/SearchResults/SearchResults";
 
 interface SearchMapProps {
   hits: TransformedSearchHit[];

app/components/search/SearchResults/SearchResults.tsx → app/components/SearchAndBrowse/SearchResults/SearchResults.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
-import { SearchMap } from "components/search/SearchMap/SearchMap";
-import { SearchResult } from "components/search/SearchResults/SearchResult";
+import { SearchMap } from "components/SearchAndBrowse/SearchMap/SearchMap";
+import { SearchResult } from "components/SearchAndBrowse/SearchResults/SearchResult";
 import {
   TransformedSearchHit,
   transformSearchResults,
@@ -13,7 +13,7 @@ import {
 import styles from "./SearchResults.module.scss";
 import ClearSearchButton from "../Refinements/ClearSearchButton";
 import { Loader } from "components/ui/Loader";
-import ResultsPagination from "components/search/Pagination/ResultsPagination";
+import ResultsPagination from "components/SearchAndBrowse/Pagination/ResultsPagination";
 
 export enum SearchMapActions {
   SearchThisArea,

app/components/search/Sidebar/Sidebar.tsx → app/components/SearchAndBrowse/Sidebar/Sidebar.tsx

@@ -4,10 +4,10 @@ import {
   eligibilitiesMapping,
   categoriesMapping,
 } from "utils/refinementMappings";
-import ClearAllFilters from "components/search/Refinements/ClearAllFilters";
-import OpenNowFilter from "components/search/Refinements/OpenNowFilter";
-import BrowseRefinementList from "components/search/Refinements/BrowseRefinementList";
-import SearchRefinementList from "components/search/Refinements/SearchRefinementList";
+import ClearAllFilters from "components/SearchAndBrowse/Refinements/ClearAllFilters";
+import OpenNowFilter from "components/SearchAndBrowse/Refinements/OpenNowFilter";
+import BrowseRefinementList from "components/SearchAndBrowse/Refinements/BrowseRefinementList";
+import SearchRefinementList from "components/SearchAndBrowse/Refinements/SearchRefinementList";
 import { Button } from "components/ui/inline/Button/Button";
 import {
   DEFAULT_AROUND_PRECISION,

app/components/ui/Cards/ListingInfoSection.module.scss → app/components/ui/Cards/DetailInfoSection.module.scss

@@ -1,6 +1,6 @@
 @import "~styles/utils/_helpers.scss";
 
-.listingInfoSection {
+.detailInfoSection {
   padding: $general-spacing-xl 0;
   display: flex;
   flex-direction: column;

app/components/ui/Cards/ListingInfoSection.tsx → app/components/ui/Cards/DetailInfoSection.tsx

@@ -1,20 +1,20 @@
 import React from "react";
 import classNames from "classnames";
-import styles from "./ListingInfoSection.module.scss";
+import styles from "./DetailInfoSection.module.scss";
 
-type ListingInfoSectionProps = {
+type DetailInfoSectionProps = {
   title: string;
   borderBottom?: boolean;
 } & React.HTMLProps<HTMLDivElement>;
 
-export const ListingInfoSection = ({
+export const DetailInfoSection = ({
   children,
   title,
   borderBottom = true,
   ...props
-}: ListingInfoSectionProps) => {
+}: DetailInfoSectionProps) => {
   const sectionClassnames = classNames(
-    styles.listingInfoSection,
+    styles.detailInfoSection,
     borderBottom && styles.borderBottom
   );
 

app/components/navigation/SecondaryNavigationWrapper.tsx → app/components/ui/Navigation/PageHeader.tsx

@@ -1,9 +1,9 @@
 import React, { ReactNode } from "react";
 import classNames from "classnames";
-import styles from "./SecondaryNavigationWrapper.module.scss";
+import styles from "./PageHeader.module.scss";
 
 // Provides page-level styling for the secondary navigation bar
-export const SecondaryNavigationWrapper = ({
+export const PageHeader = ({
   children,
   variant = "primary",
 }: {

app/components/ui/NoSearchResultsDisplay.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import styles from "components/search/SearchResults/SearchResults.module.scss";
-import ClearSearchButton from "components/search/Refinements/ClearSearchButton";
+import styles from "components/SearchAndBrowse/SearchResults/SearchResults.module.scss";
+import ClearSearchButton from "components/SearchAndBrowse/Refinements/ClearSearchButton";
 
 export const NoSearchResultsDisplay = ({ query }: { query: string | null }) => (
   <div className={`${styles.noResultsMessage}`}>

app/components/ui/SearchResultsHeader.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import styles from "components/search/SearchResults/SearchResults.module.scss";
+import styles from "components/SearchAndBrowse/SearchResults/SearchResults.module.scss";
 
 /**
  * Layout component for the header above the search results list that allows for

app/models/ChangeRequest.ts

@@ -9,7 +9,6 @@ export interface ChangeRequest {
 }
 
 export type ChangeRequestParams = ScheduleDayChangeRequestParams;
-
 interface ScheduleDayChangeRequestParams {
   schedule_id: number;
   type: "schedule_days";

app/pages/BrowseResultsPage/BrowseResultsPage.module.scss

@@ -0,0 +1 @@
+@use "~components/SearchAndBrowse/SearchAndBrowseResultsPage.module.scss";