fix(client): daily-coding-challenge routing (freeCodeCamp#65942)

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>

Author: ojeytonwilliams

client/src/client-only-routes/show-daily-coding-challenge.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { useParams } from '@gatsbyjs/reach-router';
 import store from 'store';
 import ShowClassic from '../templates/Challenges/classic/show';
 import { Loader } from '../components/helpers';
@@ -140,9 +139,7 @@ function formatChallengeData({
   return props;
 }
 
-function ShowDailyCodingChallenge(): JSX.Element {
-  const { date } = useParams<{ date?: string }>();
-
+function ShowDailyCodingChallenge({ date }: { date: string }): JSX.Element {
   const initLanguage =
     (store.get(
       'dailyCodingChallengeLanguage'

client/src/pages/learn/daily-coding-challenge/[...].tsx

@@ -1,30 +1,22 @@
 /* eslint-disable filenames-simple/naming-convention */
-import { Router } from '@gatsbyjs/reach-router';
-import { withPrefix } from 'gatsby';
 import React from 'react';
 
 import ShowDailyCodingChallenge from '../../../client-only-routes/show-daily-coding-challenge';
 import RedirectToArchive from '../../../components/redirect-daily-challenge-archive';
+import { isValidDateString } from '../../../components/daily-coding-challenge/helpers';
 
-const inlineStyles = {
-  minHeight: 0,
-  height: '100%'
-};
+interface Props {
+  params: {
+    '*': string;
+  };
+}
 
-function DailyCodingChallengeAll(): JSX.Element {
-  return (
-    // Router adds an element around the editor, messing with the layout because the editor is a flex item
-    // These few inline styles fix it.
-    <Router style={inlineStyles}>
-      <ShowDailyCodingChallenge
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        path={withPrefix('/learn/daily-coding-challenge/:date')}
-      />
+function DailyCodingChallengeAll(props: Props): JSX.Element {
+  if (!isValidDateString(props.params['*'])) {
+    return <RedirectToArchive />;
+  }
 
-      <RedirectToArchive default />
-    </Router>
-  );
+  return <ShowDailyCodingChallenge date={props.params['*']} />;
 }
 
 DailyCodingChallengeAll.displayName = 'DailyCodingChallengeAll';

e2e/daily-coding-challenge.spec.ts

@@ -66,11 +66,9 @@ const mockApiAllChallenges = [
 const mockDaysInMonth = new Date(year, month, 0).getDate();
 
 test.describe('Daily Coding Challenges', () => {
-  test('should show not found page for invalid date', async ({ page }) => {
+  test('should redirect to archive for invalid date', async ({ page }) => {
     await page.goto('/learn/daily-coding-challenge/invalid-date');
-    await expect(
-      page.getByText(/daily coding challenge not found\./i)
-    ).toBeVisible();
+    await expect(page).toHaveURL('/learn/daily-coding-challenge/archive');
   });
 
   test('should show not found page for date without challenge', async ({
@@ -252,5 +250,10 @@ test.describe('Daily Coding Challenge Archive', () => {
     await expect(page.getByTestId('calendar-day-completed')).toHaveCount(1);
 
     await expect(page.getByTestId('calendar-day-not-completed')).toHaveCount(3);
+
+    await page.getByTestId('calendar-day-completed').click();
+    await expect(page).toHaveURL(
+      `/learn/daily-coding-challenge/${todayUsCentral}`
+    );
   });
 });