refactor: Rename the [filterName] query to more accurate naming in `/…

…pages` routes (#1753)

Co-authored-by: Brandon Roberts <[email protected]>

components/molecules/ContributorHoverCard/contributor-hover-card.tsx

@@ -31,8 +31,7 @@ const ContributorHoverCard = ({
   isMaintainer,
 }: ContributorHoverCardProps) => {
   const router = useRouter();
-  const { filterName } = router.query;
-  const topic = filterName as string;
+  const topic = router.query.pageId as string;
 
   const calculatedDateFromToday = dateOfFirstPr
     ? calcDistanceFromToday(new Date(parseInt(dateOfFirstPr).toString()))

components/molecules/FilterHeader/filter-header.tsx

@@ -22,17 +22,17 @@ const HeaderFilter = () => {
   const topicOptions = getInterestOptions();
 
   const { filterValues } = useFilterPrefetch();
-  const { filterName, toolName, selectedFilter } = router.query;
+  const { pageId, toolName, selectedFilter } = router.query;
   const { user } = useSupabaseAuth();
   const { data: userInfo } = useFetchUser(user?.user_metadata.user_name);
 
   const filterBtnRouting = (filter: string) => {
     captureAnalytics({ title: "Filters", property: "toolsFilter", value: `${filter} applied`, userInfo });
-    return router.push(`/${filterName}/${toolName}/filter/${filter.toLocaleLowerCase()}`);
+    return router.push(`/${pageId}/${toolName}/filter/${filter.toLocaleLowerCase()}`);
   };
 
   const cancelFilterRouting = () => {
-    return router.push(`/${filterName}/${toolName}`);
+    return router.push(`/${pageId}/${toolName}`);
   };
 
   const topicRouting = (topic: string) => {
@@ -44,19 +44,19 @@ const HeaderFilter = () => {
       <div className="header-image mr-2 p-2 min-w-[130px] ">
         <ContextThumbnail
           size={120}
-          ContextThumbnailURL={getTopicThumbnail(filterName as interestsType)}
+          ContextThumbnailURL={getTopicThumbnail(pageId as interestsType)}
         ></ContextThumbnail>
       </div>
       <div className="header-info md:truncate flex flex-col grow justify-center p-2">
         <Title level={1} className="!text-3xl font-semibold tracking-tight text-slate-900">
-          {topicNameFormatting(filterName as string)}
+          {topicNameFormatting(pageId as string)}
         </Title>
         <Text className="mt-1 !text-base   text-slate-500">
-          {`Insights on GitHub repositories using the ${topicNameFormatting(filterName as string)} topic.`}
+          {`Insights on GitHub repositories using the ${topicNameFormatting(pageId as string)} topic.`}
         </Text>
         <div className="flex mt-4 items-center gap-2">
           <FilterCardSelect
-            selected={filterName as string}
+            selected={pageId as string}
             options={topicOptions as unknown as []}
             icon="topic"
             handleFilterClick={topicRouting}

components/molecules/HoverCardWrapper/hover-card-wrapper.tsx

@@ -11,8 +11,7 @@ interface HoverCardWrapperProps {
 }
 const HoverCardWrapper = ({ username, repositories }: HoverCardWrapperProps) => {
   const router = useRouter();
-  const { filterName } = router.query;
-  const topic = filterName as string;
+  const topic = router.query.pageId as string;
   const { data: contributor } = useFetchUser(username);
   const { repoList } = useContributorPullRequestsChart(username, "*", repositories);
 

components/molecules/StackedAvatar/stacked-avatar.tsx

@@ -15,8 +15,8 @@ declare interface StackedAvatarProps {
 
 const StackedAvatar = ({ contributors, visibleQuantity = 5, classNames }: StackedAvatarProps) => {
   const router = useRouter();
-  const { filterName } = router.query;
-  const insightId = Number.isInteger(parseInt(filterName as string, 10)) ? (filterName as string) : "";
+  const { pageId } = router.query;
+  const insightId = Number.isInteger(parseInt(pageId as string, 10)) ? (pageId as string) : "";
   const { data: insight, isError } = useInsight(insightId);
   const repositories = insight ? insight.repos.map((repo) => repo.repo_id) : [];
 

components/molecules/TableHeader/table-header.tsx

@@ -41,15 +41,16 @@ const TableHeader = ({
   onLayoutToggle,
 }: TableHeaderProps): JSX.Element => {
   const router = useRouter();
-  const { filterName } = router.query;
   const [searchTerm, setSearchTerm] = React.useState<string>("");
   const [suggestions, setSuggestions] = React.useState<string[]>([]);
   const [selected, setSelected] = React.useState<null | number>(null);
   const { providerToken } = useSupabaseAuth();
 
   const updateSuggestionsDebounced = useDebounce(async () => {
     const req = await fetch(
-      `https://api.github.com/search/repositories?q=${encodeURIComponent(`${searchTerm} topic:${filterName} in:name`)}`,
+      `https://api.github.com/search/repositories?q=${encodeURIComponent(
+        `${searchTerm} topic:${router.query.pageId} in:name`
+      )}`,
       {
         ...(providerToken
           ? {

components/organisms/Contributors/contributors.tsx

@@ -24,8 +24,7 @@ interface ContributorProps {
 
 const Contributors = ({ repositories }: ContributorProps): JSX.Element => {
   const router = useRouter();
-  const { filterName } = router.query;
-  const topic = filterName as string;
+  const topic = router.query.pageId as string;
   const store = useStore();
   const range = useStore((state) => state.range);
   const [layout, setLayout] = useState<ToggleValue>("grid");

components/organisms/Repositories/repositories.tsx

@@ -24,9 +24,9 @@ interface RepositoriesProps {
 const Repositories = ({ repositories }: RepositoriesProps): JSX.Element => {
   const { user, signIn } = useSupabaseAuth();
   const router = useRouter();
-  const { filterName, toolName, selectedFilter, userOrg } = router.query;
+  const { pageId, toolName, selectedFilter, userOrg } = router.query;
   const username = userOrg ? user?.user_metadata.user_name : undefined;
-  const topic = filterName as string;
+  const topic = pageId as string;
   const store = useStore();
   const range = useStore((state) => state.range);
   const {

layouts/hub-page.tsx

@@ -15,8 +15,8 @@ import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper";
 const HubPageLayout = ({ children }: { children: React.ReactNode }) => {
   const router = useRouter();
   const { userId } = useSupabaseAuth();
-  const { filterName } = router.query;
-  const insightId = filterName as string;
+  const { pageId } = router.query;
+  const insightId = pageId as string;
   const { data: insight, isLoading, isError } = useInsight(insightId);
   const repositories = insight?.repos.map((repo) => repo.repo_id);
 
@@ -54,7 +54,7 @@ const HubPageLayout = ({ children }: { children: React.ReactNode }) => {
           <Nav
             toolList={toolList}
             selectedTool={selectedTool && selectedTool.toString()}
-            filterName={filterName}
+            filterName={pageId}
             selectedFilter={selectedFilter}
             username={userOrg}
           />

lib/hooks/api/useContributors.ts

@@ -22,8 +22,8 @@ const useContributors = (intialLimit = 10, repoIds: number[] = [], range = 30) =
   const router = useRouter();
   const [page, setPage] = useState(1);
   const [limit, setLimit] = useState(intialLimit);
-  const { filterName, selectedFilter } = router.query;
-  const topic = filterName as string;
+  const { pageId, selectedFilter } = router.query;
+  const topic = pageId as string;
   const filterQuery = getFilterQuery(selectedFilter);
   const query = new URLSearchParams(filterQuery);
 

lib/hooks/api/useInsights.ts

@@ -63,8 +63,8 @@ const getInsights = (insights: DbInsight[], intervalDay = 0): Insight => {
 
 const useInsights = (repoIds: number[] = []) => {
   const router = useRouter();
-  const { filterName, selectedFilter } = router.query;
-  const topic = filterName as string;
+  const { pageId, selectedFilter } = router.query;
+  const topic = pageId as string;
   const filterQuery = getFilterQuery(selectedFilter);
   const query = new URLSearchParams(filterQuery);
 

lib/hooks/api/usePullRequests.ts

@@ -14,8 +14,8 @@ const usePullRequests = (intialLimit = 1000, repoIds: number[] = [], range = 30)
   const router = useRouter();
   const [page, setPage] = useState(1);
   const [limit, setLimit] = useState(intialLimit);
-  const { filterName, selectedFilter } = router.query;
-  const topic = filterName as string;
+  const { pageId, selectedFilter } = router.query;
+  const topic = pageId as string;
   const filterQuery = getFilterQuery(selectedFilter);
   const query = new URLSearchParams(filterQuery);
 

lib/hooks/api/useRepositories.ts

@@ -14,8 +14,8 @@ const useRepositories = (repoIds: number[] = [], range = 30) => {
   const router = useRouter();
   const [page, setPage] = useState(1);
   const [limit, setLimit] = useState(10);
-  const { filterName, selectedFilter } = router.query;
-  const topic = filterName as string;
+  const { pageId, selectedFilter } = router.query;
+  const topic = pageId as string;
   const filterQuery = getFilterQuery(selectedFilter);
   const query = new URLSearchParams(filterQuery);
 

lib/hooks/api/useRepositoryPullRequests.ts

@@ -11,8 +11,8 @@ interface PaginatedResponse {
 
 const useRepositoryPullRequests = (fullName: string, limit = 10, range = 30) => {
   const router = useRouter();
-  const { filterName, selectedFilter } = router.query;
-  const topic = filterName as string;
+  const { pageId, selectedFilter } = router.query;
+  const topic = pageId as string;
   const filterQuery = getFilterQuery(selectedFilter);
   const query = new URLSearchParams(filterQuery);
 

lib/hooks/useFilterPrefetch.ts

@@ -12,7 +12,7 @@ const useFilterPrefetch = () => {
   const { mutate } = useSWRConfig();
   const filterOptions = useFilterOptions();
   const [filterValues, setFilterValues] = useState<FilterValues>({});
-  const { filterName: topic } = router.query;
+  const { pageId: topic } = router.query;
 
   useEffect(() => {
     if (topic) {

lib/hooks/useNav.ts

@@ -26,15 +26,15 @@ const useNav = (repositories: number[] = []) => {
     },
   ];
 
-  const { filterName, toolName: selectedTool, selectedFilter, userOrg } = router.query;
+  const { pageId, toolName: selectedTool, selectedFilter, userOrg } = router.query;
 
   const toolList = defaultTools;
 
   return {
     toolList,
     selectedTool,
     selectedFilter,
-    filterName,
+    filterName: pageId,
     userOrg,
   };
 };

pages/[filterName]/[toolName].tsx → pages/[pageId]/[toolName].tsx

@@ -8,9 +8,9 @@ import { WithPageLayout } from "../../interfaces/with-page-layout";
 const Filter: WithPageLayout = () => {
   const router = useRouter();
 
-  const { filterName, toolName } = router.query;
+  const { pageId, toolName } = router.query;
 
-  const title = `Open Sauced Insights ${filterName ? ` - ${changeCapitalization(filterName!.toString(), true)}` : ""} ${
+  const title = `Open Sauced Insights ${pageId ? ` - ${changeCapitalization(pageId!.toString(), true)}` : ""} ${
     toolName ? ` / ${changeCapitalization(toolName.toString(), true)}` : ""
   }`;
 

pages/[filterName]/[toolName]/filter/[...selectedFilter].tsx → pages/[pageId]/[toolName]/filter/[...selectedFilter].tsx

@@ -9,9 +9,9 @@ import changeCapitalization from "lib/utils/change-capitalization";
 const SelectedFilter: WithPageLayout = () => {
   const router = useRouter();
 
-  const { toolName, filterName } = router.query;
+  const { toolName, pageId } = router.query;
 
-  const title = `Open Sauced Insights ${filterName ? ` - ${changeCapitalization(filterName!.toString(), true)}` : ""} ${
+  const title = `Open Sauced Insights ${pageId ? ` - ${changeCapitalization(pageId!.toString(), true)}` : ""} ${
     toolName ? ` / ${changeCapitalization(toolName.toString(), true)}` : ""
   }`;
 

pages/pages/[userOrg]/[filterName]/[toolName].tsx → pages/pages/[userOrg]/[pageId]/[toolName].tsx

@@ -56,7 +56,7 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   const {
     data: { session },
   } = await supabase.auth.getSession();
-  const insightId = ctx.params!["filterName"] as string;
+  const insightId = ctx.params!["pageId"] as string;
   const pageName = ctx.params!["toolName"] as string;
   const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/insights/${insightId}`);
   const insight = response.ok ? ((await response.json()) as DbUserInsight) : null;

pages/pages/[userOrg]/[filterName]/[toolName]/filter/[...selectedFilter].tsx → pages/pages/[userOrg]/[pageId]/[toolName]/filter/[...selectedFilter].tsx

@@ -33,7 +33,7 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   const {
     data: { session },
   } = await supabase.auth.getSession();
-  const insightId = ctx.params!["filterName"] as string;
+  const insightId = ctx.params!["pageId"] as string;
   const pageName = ctx.params!["toolName"] as string;
   const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/insights/${insightId}`);
   const insight = response.ok ? ((await response.json()) as DbUserInsight) : null;