fix(client): sci-py layout to grid (#52680)

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

client/src/templates/Introduction/components/block.tsx

@@ -22,6 +22,7 @@ import { makeExpandedBlockSelector, toggleBlock } from '../redux';
 import {
   isCollegeAlgebraPyCert,
   isNewJsCert,
+  isSciCompPyCert,
   isNewRespCert
 } from '../../../utils/is-a-cert';
 import {
@@ -104,12 +105,9 @@ class Block extends Component<BlockProps> {
       t
     } = this.props;
 
-    const isNewResponsiveWebDesign = isNewRespCert(superBlock);
-    const isNewJsAlgos = isNewJsCert(superBlock);
     const isOdinProject = blockDashedName == 'the-odin-project';
-    const isCollegeAlgebraPy = isCollegeAlgebraPyCert(superBlock);
-
     let completedCount = 0;
+
     const challengesWithCompleted = challenges.map(({ challenge }) => {
       const { id } = challenge;
       const isCompleted = completedChallengeIds.some(
@@ -352,23 +350,23 @@ class Block extends Component<BlockProps> {
       </ScrollableAnchor>
     );
 
+    const shouldBeGrid = [
+      isNewRespCert(superBlock),
+      isNewJsCert(superBlock),
+      isCollegeAlgebraPyCert(superBlock),
+      isSciCompPyCert(superBlock) && !isProjectBlock
+    ].some(Boolean);
+
     const blockrenderer = () => {
       if (isProjectBlock && !isOdinProject)
-        return isNewResponsiveWebDesign || isNewJsAlgos || isCollegeAlgebraPy
-          ? GridProjectBlock
-          : ProjectBlock;
-      return isNewResponsiveWebDesign || isNewJsAlgos || isCollegeAlgebraPy
-        ? GridBlock
-        : Block;
+        return shouldBeGrid ? GridProjectBlock : ProjectBlock;
+      return shouldBeGrid ? GridBlock : Block;
     };
 
     return (
       <>
         {blockrenderer()}
-        {(isNewResponsiveWebDesign || isNewJsAlgos || isCollegeAlgebraPy) &&
-        !isProjectBlock ? null : (
-          <Spacer size='medium' />
-        )}
+        {shouldBeGrid && !isProjectBlock ? null : <Spacer size='medium' />}
       </>
     );
   }

client/src/templates/Introduction/components/challenges.tsx

@@ -10,7 +10,11 @@ import GreenPass from '../../../assets/icons/green-pass';
 import { executeGA } from '../../../redux/actions';
 import { SuperBlocks } from '../../../../../shared/config/superblocks';
 import { ChallengeWithCompletedNode } from '../../../redux/prop-types';
-import { isNewJsCert, isNewRespCert } from '../../../utils/is-a-cert';
+import {
+  isNewJsCert,
+  isSciCompPyCert,
+  isNewRespCert
+} from '../../../utils/is-a-cert';
 
 const mapDispatchToProps = (dispatch: Dispatch) =>
   bindActionCreators({ executeGA }, dispatch);
@@ -33,7 +37,11 @@ function Challenges({
 }: Challenges): JSX.Element {
   const { t } = useTranslation();
 
-  const isGridMap = isNewRespCert(superBlock) || isNewJsCert(superBlock);
+  const isGridMap = [
+    isNewRespCert(superBlock),
+    isNewJsCert(superBlock),
+    isSciCompPyCert(superBlock) && !isProjectBlock
+  ].some(Boolean);
 
   const firstIncompleteChallenge = challengesWithCompleted.find(
     challenge => !challenge.isCompleted

client/src/utils/is-a-cert.ts

@@ -19,3 +19,7 @@ export function isRelationalDbCert(superBlock: string): boolean {
 export function isCollegeAlgebraPyCert(superBlock: string): boolean {
   return superBlock === String(SuperBlocks.CollegeAlgebraPy);
 }
+
+export function isSciCompPyCert(superBlock: string): boolean {
+  return superBlock === String(SuperBlocks.SciCompPy);
+}