Merge pull request #492 from CubeArtisan/migrations

Migrate Suspense and CardPreview

client/components/CubePreview.js

@@ -16,57 +16,38 @@
  *
  * Modified from the original version in CubeCobra. See LICENSE.CubeCobra for more information.
  */
-import React, { useCallback, useState } from 'react';
+import React from 'react';
+import { Card, CardActionArea, CardContent, CardMedia, Link, Typography } from '@mui/material';
 
 import CubePropType from '@cubeartisan/client/proptypes/CubePropType.js';
-
-import { Card } from 'reactstrap';
-
-import AspectRatioBox from '@cubeartisan/client/components/AspectRatioBox.js';
-
 import { getCubeDescription, getCubeId } from '@cubeartisan/client/utils/Util.js';
 
-const CubePreview = ({ cube }) => {
-  const [hover, setHover] = useState(false);
-  const handleMouseOver = useCallback((event) => setHover(!event.target.getAttribute('data-sublink')), []);
-  const handleMouseOut = useCallback(() => setHover(false), []);
-  const handleClick = useCallback(
-    (event) => {
-      if (!event.target.getAttribute('data-sublink')) {
-        window.location.href = `/cube/${encodeURIComponent(getCubeId(cube))}`;
-      }
-    },
-    [cube],
-  );
-
-  return (
-    <Card
-      className={hover ? 'cube-preview-card hover' : 'cube-preview-card'}
-      onClick={handleClick}
-      onMouseOver={handleMouseOver}
-      onFocus={handleMouseOver}
-      onMouseOut={handleMouseOut}
-      onBlur={handleMouseOut}
-    >
-      <AspectRatioBox ratio={626 / 457} className="text-ellipsis">
-        <img className="w-100" alt={cube.image_name} src={cube.image_uri} />
-        <em className="cube-preview-artist">Art by {cube.image_artist}</em>
-      </AspectRatioBox>
-      <div className="w-100 py-1 px-2">
-        <h5 className="text-muted text-ellipsis my-0" title={cube.name}>
+const CubePreview = ({ cube }) => (
+  <Card>
+    <CardActionArea href={`/cube/${encodeURIComponent(getCubeId(cube))}`}>
+      <CardMedia
+        component="img"
+        alt={`cube.image_name Art by ${cube.image_artist}`}
+        src={cube.image_uri}
+        sx={{ aspectRatio: 626 / 457 }}
+      />
+      <CardContent>
+        <Typography variant="caption" sx={{ fontStyle: 'italic' }}>
+          Art by {cube.image_artist}
+        </Typography>
+        <Typography variant="h5" title={cube.name} noWrap>
           {cube.name}
-        </h5>
-        <div className="text-muted text-ellipsis">{getCubeDescription(cube)}</div>
-        <em className="text-muted text-ellipsis">
-          Designed by{' '}
-          <a data-sublink href={`/user/${cube.owner}`}>
-            {cube.owner_name}
-          </a>
-        </em>
-      </div>
-    </Card>
-  );
-};
+        </Typography>
+        <Typography variant="body1" noWrap>
+          {getCubeDescription(cube)}
+        </Typography>
+        <Typography nowrap variant="caption">
+          Designed by <Link href={`/user/${cube.owner}`}>{cube.owner_name}</Link>
+        </Typography>
+      </CardContent>
+    </CardActionArea>
+  </Card>
+);
 
 CubePreview.propTypes = {
   cube: CubePropType.isRequired,

client/components/layouts/MainLayout.js

@@ -30,23 +30,24 @@ import SiteAppBar from '@cubeartisan/client/components/SiteAppBar.js';
  * @type ComponentType
  */
 const MainLayout = ({ children, loginCallback }) => (
-  <Grid
-    container
-    sx={{ minHeight: '100vh', backgroundColor: 'background.primary', flexFlow: 'column' }}
-    alignItems="center"
-  >
-    <Grid item sx={{ flex: '0 1 auto', width: '100%', minHeight: 64 }}>
-      <SiteAppBar loginCallback={loginCallback} />
+  <>
+    <SiteAppBar loginCallback={loginCallback} />
+    <Grid
+      container
+      sx={{ minHeight: '100vh', backgroundColor: 'background.primary', flexFlow: 'column' }}
+      alignItems="center"
+    >
+      <Grid item sx={{ flex: '0 1 auto', width: '100%', minHeight: 64 }} />
+      <Grid item sx={{ flex: '1 1 auto', width: '100%' }}>
+        <Container maxWidth="xl" sx={{ flex: '1 1 auto', padding: 0 }}>
+          <ErrorBoundary>{children}</ErrorBoundary>
+        </Container>
+      </Grid>
+      <Grid item sx={{ flex: '0 1 auto', width: '100%' }}>
+        <Footer />
+      </Grid>
     </Grid>
-    <Grid item sx={{ flex: '1 1 auto', width: '100%' }}>
-      <Container maxWidth="xl" sx={{ flex: '1 1 auto', padding: 0 }}>
-        <ErrorBoundary>{children}</ErrorBoundary>
-      </Container>
-    </Grid>
-    <Grid item sx={{ flex: '0 1 auto', width: '100%' }}>
-      <Footer />
-    </Grid>
-  </Grid>
+  </>
 );
 MainLayout.propTypes = {
   children: PropTypes.node.isRequired,

client/components/wrappers/Suspense.js

@@ -1,18 +1,17 @@
 import React, { Suspense as ReactSuspense } from 'react';
 import PropTypes from 'prop-types';
-import { Spinner } from 'reactstrap';
+import { CircularProgress } from '@mui/material';
 
-const Suspense = ({ ...props }) => {
+const Suspense = ({ fallback, ...props }) => {
   if (typeof window !== 'undefined') {
-    return <ReactSuspense {...props} />;
+    return <ReactSuspense fallback={fallback} {...props} />;
   }
   return null;
 };
 Suspense.propTypes = {
   fallback: PropTypes.node,
 };
 Suspense.defaultProps = {
-  fallback: <Spinner />,
+  fallback: <CircularProgress />,
 };
-
 export default Suspense;

loosely-type-checked-files.json

@@ -17,6 +17,7 @@
   "client/components/CompareView.js",
   "client/components/CubeCompareNavbar.js",
   "client/components/CubeListNavbar.js",
+  "client/components/CubePreview.js",
   "client/components/CubeSearchNavBar.js",
   "client/components/CubesCard.js",
   "client/components/CustomPackCard.js",
@@ -52,8 +53,10 @@
   "client/components/contexts/UserContext.js",
   "client/components/hoc/WithAutocard.js",
   "client/components/hoc/WithFoilOverlay.js",
+  "client/components/hoc/WithModal.js",
   "client/components/layouts/UserLayout.js",
   "client/components/markdown/ExternalLink.js",
+  "client/components/markdown/Markdown.js",
   "client/components/markdown/MarkdownCardImage.js",
   "client/components/markdown/MarkdownCardLink.js",
   "client/components/modals/AddGroupToCubeModal.js",
@@ -71,12 +74,13 @@
   "client/components/modals/LoginModal.js",
   "client/components/modals/ResizeModal.js",
   "client/components/modals/SampleHandModal.js",
-  "client/components/wrappers/Suspense.js",
   "client/drafting/createdraft.js",
   "client/drafting/draftutil.js",
   "client/filtering/FuncOperations.js",
   "client/generated/filtering/cardFilters.js",
+  "client/pages/AdminCommentsPage.js",
   "client/pages/ArticlePage.js",
+  "client/pages/ArticlesPage.js",
   "client/pages/BlogPostPage.js",
   "client/pages/BrowsePackagesPage.js",
   "client/pages/BulkUploadPage.js",
@@ -103,9 +107,12 @@
   "client/pages/LoginPage.js",
   "client/pages/LostPasswordPage.js",
   "client/pages/PasswordResetPage.js",
+  "client/pages/PodcastEpisodePage.js",
   "client/pages/PodcastPage.js",
+  "client/pages/PodcastsPage.js",
   "client/pages/RecentDraftsPage.js",
   "client/pages/RegisterPage.js",
+  "client/pages/SearchPage.js",
   "client/pages/UserAccountPage.js",
   "client/pages/UserBlogPage.js",
   "client/pages/UserCubePage.js",

typings/client/components/wrappers/Suspense.d.ts

@@ -1,6 +1,7 @@
 export default Suspense;
-declare function Suspense({ ...props }: {
+declare function Suspense({ fallback, ...props }: {
     [x: string]: any;
+    fallback: any;
 }): JSX.Element;
 declare namespace Suspense {
     namespace propTypes {