From 0a855eb52a2aaed3ab299c6cd0415c21539cceda Mon Sep 17 00:00:00 2001
From: "Juan P. Prieto" <juanpablo.prieto@shopify.com>
Date: Fri, 21 Jul 2023 07:37:54 -0700
Subject: [PATCH] fix skeleton inter-route imports

---
 templates/skeleton/app/components/Search.tsx  | 58 ++++++++++++++-----
 .../app/routes/api.predictive-search.tsx      | 54 +++++------------
 2 files changed, 58 insertions(+), 54 deletions(-)

diff --git a/templates/skeleton/app/components/Search.tsx b/templates/skeleton/app/components/Search.tsx
index 6fd67d8844..6ffa2124df 100644
--- a/templates/skeleton/app/components/Search.tsx
+++ b/templates/skeleton/app/components/Search.tsx
@@ -9,21 +9,45 @@ import {Pagination} from '@shopify/hydrogen';
 import React, {useRef, useEffect} from 'react';
 import {Image, Money} from '@shopify/hydrogen-react';
 import {useFetchers} from '@remix-run/react';
-import {
-  type NormalizedPredictiveSearch,
-  type NormalizedPredictiveSearchResults,
-  type NormalizedPredictiveSearchResultItem,
-} from '~/routes/api.predictive-search';
 
-import type {SearchQuery} from 'storefrontapi.generated';
+import type {
+  PredictiveProductFragment,
+  PredictiveCollectionFragment,
+  PredictiveArticleFragment,
+  SearchQuery,
+} from 'storefrontapi.generated';
+
+type PredicticeSearchResultItemImage =
+  | PredictiveCollectionFragment['image']
+  | PredictiveArticleFragment['image']
+  | PredictiveProductFragment['variants']['nodes'][0]['image'];
+
+type PredictiveSearchResultItemPrice =
+  | PredictiveProductFragment['variants']['nodes'][0]['price'];
+
+export type NormalizedPredictiveSearchResultItem = {
+  __typename: string | undefined;
+  handle: string;
+  id: string;
+  image?: PredicticeSearchResultItemImage;
+  price?: PredictiveSearchResultItemPrice;
+  styledTitle?: string;
+  title: string;
+  url: string;
+};
 
-export const NO_PREDICTIVE_SEARCH_RESULTS: NormalizedPredictiveSearchResults = [
-  {type: 'queries', items: []},
-  {type: 'products', items: []},
-  {type: 'collections', items: []},
-  {type: 'pages', items: []},
-  {type: 'articles', items: []},
-];
+export type NormalizedPredictiveSearchResults = Array<
+  | {type: 'queries'; items: Array<NormalizedPredictiveSearchResultItem>}
+  | {type: 'products'; items: Array<NormalizedPredictiveSearchResultItem>}
+  | {type: 'collections'; items: Array<NormalizedPredictiveSearchResultItem>}
+  | {type: 'pages'; items: Array<NormalizedPredictiveSearchResultItem>}
+  | {type: 'articles'; items: Array<NormalizedPredictiveSearchResultItem>}
+>;
+
+export type NormalizedPredictiveSearch = {
+  results: NormalizedPredictiveSearchResults;
+  totalResults: number;
+};
 
 type FetchSearchResultsReturn = {
   searchResults: {
@@ -33,6 +57,14 @@ type FetchSearchResultsReturn = {
   searchTerm: string;
 };
 
+export const NO_PREDICTIVE_SEARCH_RESULTS: NormalizedPredictiveSearchResults = [
+  {type: 'queries', items: []},
+  {type: 'products', items: []},
+  {type: 'collections', items: []},
+  {type: 'pages', items: []},
+  {type: 'articles', items: []},
+];
+
 export function SearchForm({searchTerm}: {searchTerm: string}) {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
diff --git a/templates/skeleton/app/routes/api.predictive-search.tsx b/templates/skeleton/app/routes/api.predictive-search.tsx
index 4c497116bd..9927fbcfab 100644
--- a/templates/skeleton/app/routes/api.predictive-search.tsx
+++ b/templates/skeleton/app/routes/api.predictive-search.tsx
@@ -1,65 +1,37 @@
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
+import type {
+  NormalizedPredictiveSearch,
+  NormalizedPredictiveSearchResults,
+} from '~/components/Search';
 import {NO_PREDICTIVE_SEARCH_RESULTS} from '~/components/Search';
 
 import type {
-  PredictiveSearchQuery,
+  PredictiveArticleFragment,
+  PredictiveCollectionFragment,
   PredictivePageFragment,
   PredictiveProductFragment,
-  PredictiveCollectionFragment,
-  PredictiveArticleFragment,
   PredictiveQueryFragment,
+  PredictiveSearchQuery,
 } from 'storefrontapi.generated';
 
 type PredictiveSearchResultItem =
-  | PredictiveProductFragment
+  | PredictiveArticleFragment
   | PredictiveCollectionFragment
   | PredictivePageFragment
-  | PredictiveArticleFragment;
-
-type PredicticeSearchResultItemImage =
-  | PredictiveCollectionFragment['image']
-  | PredictiveArticleFragment['image']
-  | PredictiveProductFragment['variants']['nodes'][0]['image'];
-
-type PredictiveSearchResultItemPrice =
-  | PredictiveProductFragment['variants']['nodes'][0]['price'];
-
-export type NormalizedPredictiveSearchResultItem = {
-  __typename: string | undefined;
-  handle: string;
-  id: string;
-  image?: PredicticeSearchResultItemImage;
-  price?: PredictiveSearchResultItemPrice;
-  styledTitle?: string;
-  title: string;
-  url: string;
-};
-
-export type NormalizedPredictiveSearchResults = Array<
-  | {type: 'queries'; items: Array<NormalizedPredictiveSearchResultItem>}
-  | {type: 'products'; items: Array<NormalizedPredictiveSearchResultItem>}
-  | {type: 'collections'; items: Array<NormalizedPredictiveSearchResultItem>}
-  | {type: 'pages'; items: Array<NormalizedPredictiveSearchResultItem>}
-  | {type: 'articles'; items: Array<NormalizedPredictiveSearchResultItem>}
->;
-
-export type NormalizedPredictiveSearch = {
-  results: NormalizedPredictiveSearchResults;
-  totalResults: number;
-};
+  | PredictiveProductFragment;
 
 type PredictiveSearchTypes =
-  | 'PRODUCT'
+  | 'ARTICLE'
   | 'COLLECTION'
   | 'PAGE'
-  | 'ARTICLE'
+  | 'PRODUCT'
   | 'QUERY';
 
 const DEFAULT_SEARCH_TYPES: PredictiveSearchTypes[] = [
-  'PRODUCT',
+  'ARTICLE',
   'COLLECTION',
   'PAGE',
-  'ARTICLE',
+  'PRODUCT',
   'QUERY',
 ];