make all react components as React.FC

issue-tracker/src/IssueActions.tsx

@@ -56,7 +56,7 @@ interface Props {
   issue: IssueActions_issue$key;
 }
 
-export default function IssueActions(props: Props) {
+const IssueActions: React.FC<Props> = props => {
   // Track the current comment text - this is used as the value of the comment textarea
   const [commentText, setCommentText] = useState('');
 
@@ -178,4 +178,6 @@ export default function IssueActions(props: Props) {
       </button>
     </form>
   );
-}
+};
+
+export default IssueActions;

issue-tracker/src/IssueDetailComments.tsx

@@ -21,7 +21,7 @@ const SUSPENSE_CONFIG = { timeoutMs: 2000 };
 /**
  * Renders a list of comments for a given issue.
  */
-export default function IssueDetailComments(props: Props) {
+const IssueDetailComments: React.FC<Props> = props => {
   // Given a reference to an issue in props.issue, defines *what*
   // data the component needs about that repository. In this case we fetch
   // the list of comments starting at a given cursor (initially null to start
@@ -119,4 +119,6 @@ export default function IssueDetailComments(props: Props) {
       ) : null}
     </>
   );
-}
+};
+
+export default IssueDetailComments;

issue-tracker/src/IssueDetailRoot.tsx

@@ -18,7 +18,7 @@ interface Props {
 /**
  * The root component for the issue detail route.
  */
-export default function IssueDetailRoot(props: Props) {
+const IssueDetailRoot: React.FC<Props> = props => {
   // Defines *what* data the component needs via a query. The responsibility of
   // actually fetching this data belongs to the route definition: it calls
   // preloadQuery() with the query and variables, and the result is passed
@@ -46,7 +46,7 @@ export default function IssueDetailRoot(props: Props) {
     props.prepared.issueDetailQuery,
   );
   if (issue == null) {
-    return 'Issue not found';
+    return <div>Issue not found</div>;
   }
 
   return (
@@ -76,4 +76,6 @@ export default function IssueDetailRoot(props: Props) {
       <IssueActions issue={issue} />
     </div>
   );
-}
+};
+
+export default IssueDetailRoot;

issue-tracker/src/Issues.tsx

@@ -13,7 +13,7 @@ interface Props {
 /**
  * Renders a list of issues for a given repository.
  */
-export default function Issues(props: Props) {
+const Issues: React.FC<Props> = props => {
   // Given a reference to a repository in props.repository, defines *what*
   // data the component needs about that repository. In this case we fetch
   // the list of issues starting at a given cursor (initially null to start
@@ -74,4 +74,6 @@ export default function Issues(props: Props) {
       </button>
     </div>
   );
-}
+};
+
+export default Issues;

issue-tracker/src/IssuesListItem.tsx

@@ -13,7 +13,7 @@ interface Props {
 /**
  * Renders a single item (issue) in the issues list.
  */
-export default function IssuesListItem(props: Props) {
+const IssuesListItem: React.FC<Props> = props => {
   // Given a reference to a specific issue - props.issue - define *what*
   // data the component needs about the issue in order to render it.
   // Note that Relay will only give the component access to the exact fields
@@ -32,4 +32,6 @@ export default function IssuesListItem(props: Props) {
 
   // Describe how to render the data:
   return <Link to={`/issue/${issue.id}`}>{issue.title}</Link>;
-}
+};
+
+export default IssuesListItem;

issue-tracker/src/Root.tsx

@@ -12,7 +12,7 @@ interface Props {
   children: React.ReactChildren;
 }
 
-export default function Root(props: Props) {
+const Root: React.FC<Props> = props => {
   // Defines *what* data the component needs via a query. The responsibility of
   // actually fetching this data belongs to the route definition: it calls
   // preloadQuery() with the query and variables, and the result is passed
@@ -44,4 +44,6 @@ export default function Root(props: Props) {
       </section>
     </div>
   );
-}
+};
+
+export default Root;

issue-tracker/src/SuspenseImage.tsx

@@ -6,7 +6,7 @@ type Props = React.DetailedHTMLProps<
   HTMLImageElement
 >;
 
-export default function SuspenseImage(props: Props) {
+const SuspenseImage: React.FC<Props> = props => {
   const { src, alt } = props;
 
   if (src != null) {
@@ -34,4 +34,6 @@ export default function SuspenseImage(props: Props) {
   }
 
   return <img alt={alt} {...props} />;
-}
+};
+
+export default SuspenseImage;

issue-tracker/src/routing/Link.tsx

@@ -11,7 +11,7 @@ interface Props {
  * An alternative to react-router's Link component that works with
  * our custom RoutingContext.
  */
-export default function Link(props: Props) {
+const Link: React.FC<Props> = props => {
   const router = useContext(RoutingContext);
 
   if (router == null) {
@@ -51,4 +51,6 @@ export default function Link(props: Props) {
       {props.children}
     </a>
   );
-}
+};
+
+export default Link;

issue-tracker/src/routing/RouteRenderer.tsx

@@ -11,7 +11,7 @@ import './RouteRenderer.css';
 
 const SUSPENSE_CONFIG = { timeoutMs: 2000 };
 
-export default function RouterRenderer() {
+const RouterRenderer = () => {
   // Access the router
   const router = useContext(RoutingContext);
 
@@ -111,7 +111,9 @@ export default function RouterRenderer() {
       </Suspense>
     </ErrorBoundary>
   );
-}
+};
+
+export default RouterRenderer;
 
 /**
  * The `component` property from the route entry is a Resource, which may or may not be ready.