Organize folders

issue-tracker/README.md

@@ -50,6 +50,28 @@ You can run the app by navigating to `relay-examples/issue-tracker/` and then ru
 
 This will start the development server (including Relay Compiler) and open a browser to [localhost:3000](http://localhost:3000).
 
+## Working on IssueTracker
+There are few key parts of IssueTracker:
+
+```shell
+├── public
+├── schema
+└── src
+    ├── __generated__
+    ├── components
+    ├── hooks
+    ├── pages
+    │   ├── IssueDetail
+    │   │   └── __generated__
+    │   └── Issues
+    │       └── __generated__
+    └── routing
+```
+- `schema`: Contains `graphql` schema
+- `components`: Contains foundational components used by other pages (e.g ErrorBoundary, SuspenseImage)
+- `hooks`:  Contains all hooks available on this project
+- `pages`: Contains the modules for our routes and their own components
+- `routing`: Contains configurations and utility functions related to routes 
 ## About the App
 
 This app uses a number of technologies including (among others):

issue-tracker/src/SuspenseImage.js → issue-tracker/src/components/SuspenseImage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import JSResource from './JSResource';
+import JSResource from '../JSResource';
 
 export default function SuspenseImage(props) {
   const { src } = props;

issue-tracker/src/IssueActions.js → issue-tracker/src/pages/IssueDetail/IssueActions.js

@@ -2,7 +2,7 @@ import graphql from 'babel-plugin-relay/macro';
 import React from 'react';
 import { useFragment } from 'react-relay/hooks';
 import { ConnectionHandler } from 'relay-runtime';
-import useMutation from './useMutation';
+import useMutation from '../../hooks/useMutation';
 
 const { useCallback, useState } = React;
 

issue-tracker/src/pages/IssueDetail/IssueDetailComment.js

@@ -0,0 +1,23 @@
+import ReactMarkdown from 'react-markdown';
+import SuspenseImage from '../../components/SuspenseImage';
+import React from 'react';
+
+export default function IssueDetailComment(props) {
+  const { comment } = props;
+  return (
+    <div className="issue-comment">
+      <SuspenseImage
+        className="issue-comment-author-image"
+        title={`${comment.author.login}'s avatar`}
+        src={comment.author.avatarUrl}
+      />
+      <div className="issue-comment-author-name">{comment.author.login}</div>
+      <div className="issue-comment-body">
+        <ReactMarkdown
+          source={comment.body}
+          renderers={{ image: SuspenseImage }}
+        />
+      </div>
+    </div>
+  );
+}

issue-tracker/src/IssueDetailComments.js → issue-tracker/src/pages/IssueDetail/IssueDetailComments.js

@@ -1,8 +1,7 @@
 import graphql from 'babel-plugin-relay/macro';
 import React from 'react';
 import { usePaginationFragment } from 'react-relay/hooks';
-import ReactMarkdown from 'react-markdown';
-import SuspenseImage from './SuspenseImage';
+import IssueDetailComment from './IssueDetailComment';
 
 const { useCallback, useTransition, Suspense, SuspenseList } = React;
 
@@ -73,34 +72,15 @@ export default function IssueDetailComments(props) {
   return (
     <>
       <SuspenseList revealOrder="forwards">
-        {comments.map(edge => {
-          if (edge == null || edge.node == null) {
-            return null;
-          }
-          const comment = edge.node;
-          return (
+        {comments
+          .filter(edge => edge != null || edge.node != null)
+          .map(edge => (
             // Wrap each comment in a separate suspense fallback to allow them to commit
             // individually; SuspenseList ensures they'll reveal in-order.
             <Suspense fallback={null} key={edge.__id}>
-              <div className="issue-comment">
-                <SuspenseImage
-                  className="issue-comment-author-image"
-                  title={`${comment.author.login}'s avatar`}
-                  src={comment.author.avatarUrl}
-                />
-                <div className="issue-comment-author-name">
-                  {comment.author.login}
-                </div>
-                <div className="issue-comment-body">
-                  <ReactMarkdown
-                    source={comment.body}
-                    renderers={{ image: SuspenseImage }}
-                  />
-                </div>
-              </div>
+              <IssueDetailComment comment={edge.node} />
             </Suspense>
-          );
-        })}
+          ))}
       </SuspenseList>
       {hasNext ? (
         <button

issue-tracker/src/IssueDetailRoot.js → issue-tracker/src/pages/IssueDetail/IssueDetailRoot.js

@@ -1,10 +1,9 @@
-import React from 'react';
 import graphql from 'babel-plugin-relay/macro';
+import React from 'react';
 import { usePreloadedQuery } from 'react-relay/hooks';
-import ReactMarkdown from 'react-markdown';
-import SuspenseImage from './SuspenseImage';
-import IssueDetailComments from './IssueDetailComments';
 import IssueActions from './IssueActions';
+import IssueDetailComment from './IssueDetailComment';
+import IssueDetailComments from './IssueDetailComments';
 
 /**
  * The root component for the issue detail route.
@@ -52,20 +51,9 @@ export default function IssueDetailRoot(props) {
           View on GitHub
         </a>
       </div>
-      <div className="issue-comment">
-        <SuspenseImage
-          className="issue-comment-author-image"
-          title={`${issue.author.login}'s avatar`}
-          src={issue.author.avatarUrl}
-        />
-        <div className="issue-comment-author-name">{issue.author.login}</div>
-        <div className="issue-comment-body">
-          <ReactMarkdown
-            source={issue.body}
-            renderers={{ image: SuspenseImage }}
-          />
-        </div>
-      </div>
+      {/** The author's comment is divided from comment list */}
+      <IssueDetailComment comment={issue} />
+
       <IssueDetailComments issue={issue} />
       <IssueActions issue={issue} />
     </div>

issue-tracker/src/Issues.js → issue-tracker/src/pages/Issues/Issues.js

@@ -51,17 +51,14 @@ export default function Issues(props) {
 
   return (
     <div className="issues">
-      {data.issues.edges.map(edge => {
-        if (edge == null || edge.node == null) {
-          return null;
-        }
-        return (
+      {data.issues.edges
+        .filter(edge => edge != null || edge.node != null)
+        .map(edge => (
           <div className="issues-issue" key={edge.__id}>
             {/* Note how we also spread IssuesListItem's fragment above */}
             <IssuesListItem issue={edge.node} />
           </div>
-        );
-      })}
+        ))}
       <button
         name="load more issues"
         type="button"

issue-tracker/src/IssuesListItem.js → issue-tracker/src/pages/Issues/IssuesListItem.js

@@ -1,7 +1,7 @@
 import graphql from 'babel-plugin-relay/macro';
 import React from 'react';
 import { useFragment } from 'react-relay/hooks';
-import Link from './routing/Link';
+import Link from '../../routing/Link';
 
 /**
  * Renders a single item (issue) in the issues list.

issue-tracker/src/routes.js

@@ -33,15 +33,17 @@ const routes = [
          * especially useful with nested routes, where React.lazy would not fetch the
          * component until its parents code/data had loaded.
          */
-        component: JSResource('HomeRoot', () => import('./HomeRoot')),
+        component: JSResource('HomeRoot', () =>
+          import('./pages/Issues/HomeRoot'),
+        ),
         /**
          * A function to prepare the data for the `component` in parallel with loading
          * that component code. The actual data to fetch is defined by the component
          * itself - here we just reference a description of the data - the generated
          * query.
          */
         prepare: params => {
-          const IssuesQuery = require('./__generated__/HomeRootIssuesQuery.graphql');
+          const IssuesQuery = require('./pages/Issues/__generated__/HomeRootIssuesQuery.graphql');
           return {
             issuesQuery: loadQuery(
               RelayEnvironment,
@@ -61,10 +63,10 @@ const routes = [
       {
         path: '/issue/:id',
         component: JSResource('IssueDetailRoot', () =>
-          import('./IssueDetailRoot'),
+          import('./pages/IssueDetail/IssueDetailRoot'),
         ),
         prepare: params => {
-          const IssueDetailQuery = require('./__generated__/IssueDetailRootQuery.graphql');
+          const IssueDetailQuery = require('./pages/IssueDetail/__generated__/IssueDetailRootQuery.graphql');
           return {
             issueDetailQuery: loadQuery(
               RelayEnvironment,

issue-tracker/src/routing/RouteRenderer.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import RoutingContext from './RoutingContext';
-import ErrorBoundary from '../ErrorBoundary';
+import ErrorBoundary from '../components/ErrorBoundary';
 import './RouteRenderer.css';
 
 const { useContext, useEffect, useTransition, Suspense, useState } = React;