From 2bc6b98d65eed69c0ea9a6768ad8c5e81617ce8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pavel=20Zbytovsk=C3=BD?= <zbytovsky@gmail.com>
Date: Tue, 8 Oct 2024 12:23:05 +0200
Subject: [PATCH] general: fix SSR + add e2e test (#648)

---
 .github/workflows/ssr-check.yml             | 19 ++++++++++++++++
 src/components/App/App.tsx                  | 15 +++++--------
 src/components/SearchBox/SearchBox.tsx      | 25 +++++++++------------
 src/services/__tests__/osmToFeature.test.ts |  2 +-
 src/services/osmApiTestItems.tsx            |  2 +-
 5 files changed, 37 insertions(+), 26 deletions(-)
 create mode 100644 .github/workflows/ssr-check.yml

diff --git a/.github/workflows/ssr-check.yml b/.github/workflows/ssr-check.yml
new file mode 100644
index 000000000..f7a3e94ad
--- /dev/null
+++ b/.github/workflows/ssr-check.yml
@@ -0,0 +1,19 @@
+name: Check server-side rendering
+on:
+  deployment_status:
+jobs:
+  check-ssr:
+    if: github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check if node/6 is ssr rendered
+        run: |
+          URL=$(echo ${{ github.event.deployment_status.environment_url }})/node/6
+          echo "Fetch the URL: $URL"
+          curl -s $URL | grep -q "Originally Detonátor route (this message used for SSR check)"
+          if [ $? -eq 0 ]; then
+              echo "Server-side rendering is working"
+          else
+              echo "Server-side rendering broken"
+              exit 1
+          fi
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 7b68d2c04..6f8e73c60 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -138,21 +138,18 @@ const IndexWithProviders = ({ climbingAreas }: IndexWithProvidersProps) => {
   const isMyTicksVisible = router.pathname === '/my-ticks';
   const isInstallVisible = router.pathname === '/install';
 
-  const isSearchInPanel =
-    (!featureShown &&
-      !isMyTicksVisible &&
-      !isInstallVisible &&
-      !homepageShown) ||
-    isMobileMode;
+  const withShadow =
+    isMobileMode ||
+    (!featureShown && !isMyTicksVisible && !isInstallVisible && !homepageShown);
 
   return (
     <>
       <Loading />
-      {featureShown && !isMobileMode && isMounted && (
+      {directions && <DirectionsBox />}
+      {!directions && <SearchBox withShadow={withShadow} />}
+      {featureShown && !isMobileMode && (
         <FeaturePanelOnSide scrollRef={scrollRef} />
       )}
-      {directions && <DirectionsBox />}
-      {!directions && <SearchBox isSearchInPanel={isSearchInPanel} />}
       {featureShown && isMobileMode && (
         <FeaturePanelInDrawer scrollRef={scrollRef} />
       )}
diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
index 019267733..f70f89618 100644
--- a/src/components/SearchBox/SearchBox.tsx
+++ b/src/components/SearchBox/SearchBox.tsx
@@ -21,10 +21,7 @@ const TopPanel = styled.div`
   box-sizing: border-box;
 
   top: 0;
-  z-index: 10;
-  @media ${isDesktopResolution} {
-    z-index: 1200; // 1100 is PanelWrapper
-  }
+  z-index: 1200; // 1100 is PanelWrapper
 
   width: 100%;
   @media ${isDesktop} {
@@ -32,19 +29,21 @@ const TopPanel = styled.div`
   }
 `;
 
-const StyledPaper = styled(Paper)<{ $isSearchInPanel: boolean }>`
+const StyledPaper = styled(Paper, {
+  shouldForwardProp: (prop) => prop !== '$withShadow',
+})<{ $withShadow: boolean }>`
   padding: 2px 4px;
   display: flex;
   align-items: center;
-  background-color: ${({ $isSearchInPanel, theme }) =>
-    $isSearchInPanel
+  background-color: ${({ $withShadow, theme }) =>
+    $withShadow
       ? theme.palette.background.searchInput
       : theme.palette.background.searchInputPanel};
   -webkit-backdrop-filter: blur(35px);
   backdrop-filter: blur(35px);
   transition: box-shadow 0s !important;
-  box-shadow: ${({ $isSearchInPanel }) =>
-    $isSearchInPanel ? '0 0 20px rgba(0, 0, 0, 0.4)' : 'none'} !important;
+  box-shadow: ${({ $withShadow }) =>
+    $withShadow ? '0 0 20px rgba(0, 0, 0, 0.4)' : 'none'} !important;
 
   .MuiAutocomplete-root {
     flex: 1;
@@ -75,7 +74,7 @@ const useOnClosePanel = () => {
   };
 };
 
-const SearchBox = ({ isSearchInPanel = false }) => {
+const SearchBox = ({ withShadow = false }) => {
   const isMobileMode = useMobileMode();
   const { featureShown } = useFeatureContext();
   const [overpassLoading, setOverpassLoading] = useState(false);
@@ -84,11 +83,7 @@ const SearchBox = ({ isSearchInPanel = false }) => {
 
   return (
     <TopPanel>
-      <StyledPaper
-        $isSearchInPanel={isSearchInPanel}
-        elevation={1}
-        ref={autocompleteRef}
-      >
+      <StyledPaper $withShadow={withShadow} elevation={1} ref={autocompleteRef}>
         <SearchIconButton disabled aria-label={t('searchbox.placeholder')}>
           <SearchIcon />
         </SearchIconButton>
diff --git a/src/services/__tests__/osmToFeature.test.ts b/src/services/__tests__/osmToFeature.test.ts
index 86bd61693..1d3816782 100644
--- a/src/services/__tests__/osmToFeature.test.ts
+++ b/src/services/__tests__/osmToFeature.test.ts
@@ -16,7 +16,7 @@ const nodeResponse = {
     climbing: 'route_bottom',
     'climbing:grade:uiaa': '5',
     name: 'Test item for images',
-    description: 'Originally Detonátor route',
+    description: 'Originally Detonátor route (this message used for SSR check)',
     sport: 'climbing',
     wikimedia_commons: 'File:Lomy nad Velkou - Borová věž.jpg',
     'wikimedia_commons:path': '0.32,0.902|0.371,0.537B|0.406,0.173A',
diff --git a/src/services/osmApiTestItems.tsx b/src/services/osmApiTestItems.tsx
index 394fd2d99..8323771d2 100644
--- a/src/services/osmApiTestItems.tsx
+++ b/src/services/osmApiTestItems.tsx
@@ -17,7 +17,7 @@ const nodeResponse = {
     climbing: 'route_bottom',
     'climbing:grade:uiaa': '5',
     name: 'Test item for images',
-    description: 'Originally Detonátor route',
+    description: 'Originally Detonátor route (this message used for SSR check)',
     sport: 'climbing',
     image: 'http://localhost:3000/images/Lomy_nad_Velkou_-_Borová_věž.jpg',
     'image:path':