Migration of the remaining components (#530)

* Add useLazyLoadQuery to ViewerProfile

* Add useFragment to UserProfile

* Add useLazyLoadQuery to Home

* Add useLazyLoadQuery to TaskCommandLogs

* Add useLazyLoadQuery to ViewerTopRepositories

* Add useFragment to LastDefaultBranchBuildRow

* Add useSubscription to LastDefaultBranchBuildRow

* Add useFragment to AccountInformation

* Add useFragment to HookNameChip

* Add useFragment to AccountsSwitch

Author: ikatemart

src/AllRoutes.tsx

@@ -165,7 +165,9 @@ function AllRoutes() {
             <ChevronLeftIcon />
           </IconButton>
         </div>
-        <ViewerTopRepositories className={classes.topRepositories} />
+        <Suspense fallback={<CirrusLinearProgress />}>
+          <ViewerTopRepositories className={classes.topRepositories} />
+        </Suspense>
       </Drawer>
     </nav>
   );

src/components/account/AccountInformation.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
 
 import Avatar from '@mui/material/Avatar';
@@ -10,7 +10,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { navigateHelper } from '../../utils/navigateHelper';
 import { useNavigate } from 'react-router-dom';
-import { AccountInformation_viewer } from './__generated__/AccountInformation_viewer.graphql';
+import { AccountInformation_viewer$key } from './__generated__/AccountInformation_viewer.graphql';
 import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
 import DirectionsRun from '@mui/icons-material/DirectionsRun';
 import Button from '@mui/material/Button';
@@ -27,10 +27,18 @@ const useStyles = makeStyles(theme => {
 });
 
 interface Props {
-  viewer: AccountInformation_viewer;
+  viewer: AccountInformation_viewer$key;
 }
 
-function AccountInformation(props: Props) {
+export default function AccountInformation(props: Props) {
+  let viewer = useFragment(
+    graphql`
+      fragment AccountInformation_viewer on User {
+        avatarURL
+      }
+    `,
+    props.viewer,
+  );
   let navigate = useNavigate();
   const [anchorEl, setAnchorEl] = React.useState(null);
 
@@ -42,7 +50,6 @@ function AccountInformation(props: Props) {
     setAnchorEl(null);
   };
 
-  let { viewer } = props;
   let classes = useStyles();
 
   if (!viewer) {
@@ -94,11 +101,3 @@ function AccountInformation(props: Props) {
     </div>
   );
 }
-
-export default createFragmentContainer(AccountInformation, {
-  viewer: graphql`
-    fragment AccountInformation_viewer on User {
-      avatarURL
-    }
-  `,
-});

src/components/account/UserProfile.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
 import Tooltip from '@mui/material/Tooltip';
 import { makeStyles } from '@mui/styles';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
 import { navigateHelper } from '../../utils/navigateHelper';
 import IconButton from '@mui/material/IconButton';
-import { UserProfile_user } from './__generated__/UserProfile_user.graphql';
+import { UserProfile_user$key } from './__generated__/UserProfile_user.graphql';
 import { Helmet as Head } from 'react-helmet';
 import Settings from '@mui/icons-material/Settings';
 import OwnerPlatformIcon from '../icons/OwnerPlatformIcon';
@@ -30,13 +30,25 @@ const useStyles = makeStyles(theme => {
 });
 
 interface Props {
-  user: UserProfile_user;
+  user: UserProfile_user$key;
 }
 
-function UserProfile(props: Props) {
+export default function UserProfile(props: Props) {
+  let user = useFragment(
+    graphql`
+      fragment UserProfile_user on User {
+        relatedOwners {
+          platform
+          name
+          uid
+        }
+      }
+    `,
+    props.user,
+  );
+
   const navigate = useNavigate();
 
-  let { user } = props;
   let classes = useStyles();
 
   useEffect(() => {
@@ -84,15 +96,3 @@ function UserProfile(props: Props) {
     </div>
   );
 }
-
-export default createFragmentContainer(UserProfile, {
-  user: graphql`
-    fragment UserProfile_user on User {
-      relatedOwners {
-        platform
-        name
-        uid
-      }
-    }
-  `,
-});

src/components/builds/LastDefaultBranchBuildMiniRow.tsx

@@ -1,14 +1,13 @@
-import React, { useEffect } from 'react';
-import { createFragmentContainer, requestSubscription } from 'react-relay';
+import React, { useMemo } from 'react';
+import { useFragment, useSubscription } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
-import environment from '../../createRelayEnvironment';
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 import { makeStyles } from '@mui/styles';
 import { navigateBuildHelper } from '../../utils/navigateHelper';
 import RepositoryNameChip from '../chips/RepositoryNameChip';
 import BuildStatusChip from '../chips/BuildStatusChip';
-import { LastDefaultBranchBuildMiniRow_repository } from './__generated__/LastDefaultBranchBuildMiniRow_repository.graphql';
+import { LastDefaultBranchBuildMiniRow_repository$key } from './__generated__/LastDefaultBranchBuildMiniRow_repository.graphql';
 import { useNavigate } from 'react-router-dom';
 import MarkdownTypography from '../common/MarkdownTypography';
 
@@ -33,25 +32,36 @@ const useStyles = makeStyles(theme => {
 });
 
 interface Props {
-  repository: LastDefaultBranchBuildMiniRow_repository;
+  repository: LastDefaultBranchBuildMiniRow_repository$key;
 }
 
-function LastDefaultBranchBuildRow(props: Props) {
-  useEffect(() => {
-    let variables = { repositoryID: props.repository.id };
+export default function LastDefaultBranchBuildRow(props: Props) {
+  let repository = useFragment(
+    graphql`
+      fragment LastDefaultBranchBuildMiniRow_repository on Repository {
+        id
+        lastDefaultBranchBuild {
+          id
+          changeMessageTitle
+          ...BuildStatusChip_build
+        }
+        ...RepositoryNameChip_repository
+      }
+    `,
+    props.repository,
+  );
 
-    const subscription = requestSubscription(environment, {
+  const buildSubscriptionConfig = useMemo(
+    () => ({
+      variables: { repositoryID: repository.id },
       subscription: buildSubscription,
-      variables: variables,
-    });
-    return () => {
-      subscription.dispose();
-    };
-  }, [props.repository.id]);
+    }),
+    [repository.id],
+  );
+  useSubscription(buildSubscriptionConfig);
 
   let navigate = useNavigate();
 
-  let { repository } = props;
   let classes = useStyles();
   let build = repository.lastDefaultBranchBuild;
   if (!build) {
@@ -76,17 +86,3 @@ function LastDefaultBranchBuildRow(props: Props) {
     </TableRow>
   );
 }
-
-export default createFragmentContainer(LastDefaultBranchBuildRow, {
-  repository: graphql`
-    fragment LastDefaultBranchBuildMiniRow_repository on Repository {
-      id
-      lastDefaultBranchBuild {
-        id
-        changeMessageTitle
-        ...BuildStatusChip_build
-      }
-      ...RepositoryNameChip_repository
-    }
-  `,
-});

src/components/chips/HookNameChip.tsx

@@ -3,12 +3,12 @@ import React from 'react';
 import Avatar from '@mui/material/Avatar';
 import Chip from '@mui/material/Chip';
 import Functions from '@mui/icons-material/Functions';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
 import { makeStyles } from '@mui/styles';
 import { navigateHookHelper } from '../../utils/navigateHelper';
 import { useNavigate } from 'react-router-dom';
-import { HookNameChip_hook } from './__generated__/HookNameChip_hook.graphql';
+import { HookNameChip_hook$key } from './__generated__/HookNameChip_hook.graphql';
 
 const useStyles = makeStyles(theme => {
   return {
@@ -22,12 +22,21 @@ const useStyles = makeStyles(theme => {
 });
 
 interface Props {
-  hook: HookNameChip_hook;
+  hook: HookNameChip_hook$key;
   className?: string;
 }
 
-let HookNameChip = (props: Props) => {
-  const { hook, className } = props;
+export default function HookNameChip(props: Props) {
+  let hook = useFragment(
+    graphql`
+      fragment HookNameChip_hook on Hook {
+        id
+        name
+      }
+    `,
+    props.hook,
+  );
+  const { className } = props;
   let classes = useStyles();
   let navigate = useNavigate();
 
@@ -44,13 +53,4 @@ let HookNameChip = (props: Props) => {
       }
     />
   );
-};
-
-export default createFragmentContainer(HookNameChip, {
-  hook: graphql`
-    fragment HookNameChip_hook on Hook {
-      id
-      name
-    }
-  `,
-});
+}

src/components/common/AccountSwitch.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
 
 import Menu from '@mui/material/Menu';
@@ -10,13 +10,25 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 
 import { navigateHelper } from '../../utils/navigateHelper';
 
-import { AccountSwitch_viewer } from './__generated__/AccountSwitch_viewer.graphql';
+import { AccountSwitch_viewer$key } from './__generated__/AccountSwitch_viewer.graphql';
 
 interface AccountSwitchProps {
-  viewer?: AccountSwitch_viewer;
+  viewer?: AccountSwitch_viewer$key;
 }
 
-const AccountsSwitch = ({ viewer }: AccountSwitchProps) => {
+export default function AccountsSwitch(props: AccountSwitchProps) {
+  let viewer = useFragment(
+    graphql`
+      fragment AccountSwitch_viewer on User {
+        relatedOwners {
+          platform
+          name
+        }
+      }
+    `,
+    props.viewer,
+  );
+
   const navigate = useNavigate();
 
   const [menuAnchorEl, setMenuAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -53,15 +65,4 @@ const AccountsSwitch = ({ viewer }: AccountSwitchProps) => {
       </Menu>
     </>
   );
-};
-
-export default createFragmentContainer(AccountsSwitch, {
-  viewer: graphql`
-    fragment AccountSwitch_viewer on User {
-      relatedOwners {
-        platform
-        name
-      }
-    }
-  `,
-});
+}

src/components/tasks/TaskCommandList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 
 import { useCommandStatusColorMapping } from '../../utils/colors';
 import TaskCommandLogs from './TaskCommandLogs';
@@ -20,6 +20,7 @@ import { makeStyles } from '@mui/styles';
 import { Box, useTheme } from '@mui/material';
 import { useRecoilValue } from 'recoil';
 import { prefersDarkModeState } from '../../cirrusTheme';
+import CirrusCircularProgress from '../common/CirrusCircularProgress';
 
 const useStyles = makeStyles(theme => {
   return {
@@ -123,7 +124,9 @@ export default function TaskCommandList(props: Props) {
             </div>
           </AccordionSummary>
           <AccordionDetails className={classes.details}>
-            <TaskCommandLogs taskId={task.id} command={command} />
+            <Suspense fallback={<CirrusCircularProgress />}>
+              <TaskCommandLogs taskId={task.id} command={command} />
+            </Suspense>
           </AccordionDetails>
         </Accordion>
       </Box>