Merge branch 'master' into route-master-links

zbycz · Oct 8, 2024 · 03d9042 · 03d9042
2 parents 2f658ee + 2bc6b98
commit 03d9042
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 26 deletions.
diff --git a/.github/workflows/ssr-check.yml 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
@@ -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
@@ -21,30 +21,29 @@ 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} {
     width: 410px;
   }
 `;
 
-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
@@ -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
@@ -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':