Move Hook and Hook Details components to Relay Hooks

src/components/chips/BuildBranchNameChip.tsx

@@ -5,9 +5,9 @@ import Chip from '@mui/material/Chip';
 import CallSplit from '@mui/icons-material/CallSplit';
 import { useNavigate } from 'react-router-dom';
 import { navigateHelper } from '../../utils/navigateHelper';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
-import { BuildBranchNameChip_build } from './__generated__/BuildBranchNameChip_build.graphql';
+import { BuildBranchNameChip_build$key } from './__generated__/BuildBranchNameChip_build.graphql';
 import { shorten } from '../../utils/text';
 import { makeStyles } from '@mui/styles';
 import { Commit } from '@mui/icons-material';
@@ -26,13 +26,28 @@ const useStyles = makeStyles(theme => {
 
 interface Props {
   className?: string;
-  build: BuildBranchNameChip_build;
+  build: BuildBranchNameChip_build$key;
 }
 
-function BuildBranchNameChip(props: Props) {
+export default function BuildBranchNameChip(props: Props) {
+  let build = useFragment(
+    graphql`
+      fragment BuildBranchNameChip_build on Build {
+        id
+        branch
+        tag
+        repository {
+          id
+          owner
+          name
+        }
+      }
+    `,
+    props.build,
+  );
+
   let classes = useStyles();
   let navigate = useNavigate();
-  let build = props.build;
 
   function handleBranchClick(event) {
     if (build.repository) {
@@ -78,18 +93,3 @@ function BuildBranchNameChip(props: Props) {
     />
   );
 }
-
-export default createFragmentContainer(BuildBranchNameChip, {
-  build: graphql`
-    fragment BuildBranchNameChip_build on Build {
-      id
-      branch
-      tag
-      repository {
-        id
-        owner
-        name
-      }
-    }
-  `,
-});

src/components/chips/BuildChangeChip.tsx

@@ -3,10 +3,10 @@ import Chip from '@mui/material/Chip';
 import Input from '@mui/icons-material/Input';
 import { graphql } from 'babel-plugin-relay/macro';
 import React from 'react';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { useNavigate } from 'react-router-dom';
 import { navigateBuildHelper } from '../../utils/navigateHelper';
-import { BuildChangeChip_build } from './__generated__/BuildChangeChip_build.graphql';
+import { BuildChangeChip_build$key } from './__generated__/BuildChangeChip_build.graphql';
 import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles(theme => {
@@ -21,12 +21,22 @@ const useStyles = makeStyles(theme => {
 });
 
 interface Props {
-  build: BuildChangeChip_build;
+  build: BuildChangeChip_build$key;
   className?: string;
 }
 
-function BuildChangeChip(props: Props) {
-  let { build, className } = props;
+export default function BuildChangeChip(props: Props) {
+  let build = useFragment(
+    graphql`
+      fragment BuildChangeChip_build on Build {
+        id
+        changeIdInRepo
+      }
+    `,
+    props.build,
+  );
+
+  let { className } = props;
   let navigate = useNavigate();
   let classes = useStyles();
   return (
@@ -43,12 +53,3 @@ function BuildChangeChip(props: Props) {
     />
   );
 }
-
-export default createFragmentContainer(BuildChangeChip, {
-  build: graphql`
-    fragment BuildChangeChip_build on Build {
-      id
-      changeIdInRepo
-    }
-  `,
-});

src/components/chips/HookCreatedChip.tsx

@@ -7,20 +7,30 @@ import Icon from '@mui/material/Icon';
 import { useTaskStatusColor } from '../../utils/colors';
 import { taskStatusIconName } from '../../utils/status';
 import { roundAndPresentDuration } from '../../utils/time';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
 import { useTheme } from '@mui/material';
-import { HookCreatedChip_hook } from './__generated__/HookCreatedChip_hook.graphql';
+import { HookCreatedChip_hook$key } from './__generated__/HookCreatedChip_hook.graphql';
 
 interface Props {
-  hook: HookCreatedChip_hook;
+  hook: HookCreatedChip_hook$key;
   className?: string;
 }
 
-let HookCreatedChip = (props: Props) => {
+export default function HookCreatedChip(props: Props) {
+  let hook = useFragment(
+    graphql`
+      fragment HookCreatedChip_hook on Hook {
+        id
+        timestamp
+      }
+    `,
+    props.hook,
+  );
+
   let theme = useTheme();
 
-  const creationTimestamp = props.hook.timestamp;
+  const creationTimestamp = hook.timestamp;
   const [durationAgoInSeconds, setDurationAgoInSeconds] = React.useState((Date.now() - creationTimestamp) / 1000);
 
   useEffect(() => {
@@ -51,13 +61,4 @@ let HookCreatedChip = (props: Props) => {
       />
     </Tooltip>
   );
-};
-
-export default createFragmentContainer(HookCreatedChip, {
-  hook: graphql`
-    fragment HookCreatedChip_hook on Hook {
-      id
-      timestamp
-    }
-  `,
-});
+}

src/components/chips/HookStatusChip.tsx

@@ -5,18 +5,30 @@ import Chip from '@mui/material/Chip';
 import Icon from '@mui/material/Icon';
 import { useHookStatusColor } from '../../utils/colors';
 import { hookIconName, hookStatusMessage } from '../../utils/status';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
 import { useTheme } from '@mui/material';
-import { HookStatusChip_hook } from './__generated__/HookStatusChip_hook.graphql';
+import { HookStatusChip_hook$key } from './__generated__/HookStatusChip_hook.graphql';
 
 interface Props {
-  hook: HookStatusChip_hook;
+  hook: HookStatusChip_hook$key;
   className?: string;
 }
 
-function HookStatusChip(props: Props) {
-  let { hook, className } = props;
+export default function HookStatusChip(props: Props) {
+  let hook = useFragment(
+    graphql`
+      fragment HookStatusChip_hook on Hook {
+        info {
+          error
+          durationNanos
+        }
+      }
+    `,
+    props.hook,
+  );
+
+  let { className } = props;
   let theme = useTheme();
   return (
     <Chip
@@ -30,14 +42,3 @@ function HookStatusChip(props: Props) {
     />
   );
 }
-
-export default createFragmentContainer(HookStatusChip, {
-  hook: graphql`
-    fragment HookStatusChip_hook on Hook {
-      info {
-        error
-        durationNanos
-      }
-    }
-  `,
-});

src/components/chips/RepositoryNameChip.tsx

@@ -4,9 +4,9 @@ import Avatar from '@mui/material/Avatar';
 import Chip from '@mui/material/Chip';
 import Storage from '@mui/icons-material/Storage';
 import { navigateHelper } from '../../utils/navigateHelper';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
-import { RepositoryNameChip_repository } from './__generated__/RepositoryNameChip_repository.graphql';
+import { RepositoryNameChip_repository$key } from './__generated__/RepositoryNameChip_repository.graphql';
 import { makeStyles } from '@mui/styles';
 import { useNavigate } from 'react-router-dom';
 
@@ -24,13 +24,22 @@ const useStyles = makeStyles(theme => {
 interface Props {
   className?: string;
   fullName?: boolean;
-  repository: RepositoryNameChip_repository;
+  repository: RepositoryNameChip_repository$key;
 }
 
-function RepositoryNameChip(props: Props) {
+export default function RepositoryNameChip(props: Props) {
+  let repository = useFragment(
+    graphql`
+      fragment RepositoryNameChip_repository on Repository {
+        owner
+        name
+      }
+    `,
+    props.repository,
+  );
+
   let classes = useStyles();
   let navigate = useNavigate();
-  let repository = props.repository;
 
   function handleRepositoryClick(event, repository) {
     navigateHelper(navigate, event, '/github/' + repository.owner + '/' + repository.name);
@@ -50,12 +59,3 @@ function RepositoryNameChip(props: Props) {
     />
   );
 }
-
-export default createFragmentContainer(RepositoryNameChip, {
-  repository: graphql`
-    fragment RepositoryNameChip_repository on Repository {
-      owner
-      name
-    }
-  `,
-});

src/components/chips/RepositoryOwnerChip.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import Avatar from '@mui/material/Avatar';
 import Chip from '@mui/material/Chip';
 import { navigateHelper } from '../../utils/navigateHelper';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
-import { RepositoryOwnerChip_repository } from './__generated__/RepositoryOwnerChip_repository.graphql';
+import { RepositoryOwnerChip_repository$key } from './__generated__/RepositoryOwnerChip_repository.graphql';
 import { makeStyles } from '@mui/styles';
 import { useNavigate } from 'react-router-dom';
 import GitHubIcon from '@mui/icons-material/GitHub';
@@ -23,13 +23,21 @@ const useStyles = makeStyles(theme => {
 
 interface Props {
   className?: string;
-  repository: RepositoryOwnerChip_repository;
+  repository: RepositoryOwnerChip_repository$key;
 }
 
-function RepositoryOwnerChip(props: Props) {
+export default function RepositoryOwnerChip(props: Props) {
+  let repository = useFragment(
+    graphql`
+      fragment RepositoryOwnerChip_repository on Repository {
+        owner
+      }
+    `,
+    props.repository,
+  );
+
   let classes = useStyles();
   let navigate = useNavigate();
-  let repository = props.repository;
 
   function handleRepositoryClick(event, repository) {
     navigateHelper(navigate, event, '/github/' + repository.owner);
@@ -49,11 +57,3 @@ function RepositoryOwnerChip(props: Props) {
     />
   );
 }
-
-export default createFragmentContainer(RepositoryOwnerChip, {
-  repository: graphql`
-    fragment RepositoryOwnerChip_repository on Repository {
-      owner
-    }
-  `,
-});

src/components/chips/TaskNameChip.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 import Avatar from '@mui/material/Avatar';
 import Chip from '@mui/material/Chip';
 import Bookmark from '@mui/icons-material/Bookmark';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
 import { makeStyles } from '@mui/styles';
-import { TaskNameChip_task } from './__generated__/TaskNameChip_task.graphql';
+import { TaskNameChip_task$key } from './__generated__/TaskNameChip_task.graphql';
 import { navigateTaskHelper } from '../../utils/navigateHelper';
 import { useNavigate } from 'react-router-dom';
 
@@ -22,13 +22,23 @@ const useStyles = makeStyles(theme => {
 });
 
 interface Props {
-  task: TaskNameChip_task;
+  task: TaskNameChip_task$key;
   className?: string;
   withNavigation?: boolean;
 }
 
-let TaskNameChip = (props: Props) => {
-  const { task, className } = props;
+export default function TaskNameChip(props: Props) {
+  let task = useFragment(
+    graphql`
+      fragment TaskNameChip_task on Task {
+        id
+        name
+      }
+    `,
+    props.task,
+  );
+
+  const { className } = props;
   let classes = useStyles();
   let navigate = useNavigate();
 
@@ -49,13 +59,4 @@ let TaskNameChip = (props: Props) => {
       }
     />
   );
-};
-
-export default createFragmentContainer(TaskNameChip, {
-  task: graphql`
-    fragment TaskNameChip_task on Task {
-      id
-      name
-    }
-  `,
-});
+}