From 82b4d14e0b7406410b4c1c6e345ad58b83355a90 Mon Sep 17 00:00:00 2001 From: fanny Date: Tue, 19 Oct 2021 09:55:50 -0300 Subject: [PATCH 1/4] Reorganize modules to make easier find components and modules --- issue-tracker/src/{ => components}/ErrorBoundary.js | 0 issue-tracker/src/{ => components}/SuspenseImage.js | 2 +- issue-tracker/src/{ => hooks}/useMutation.js | 0 .../src/{ => pages/IssueDetail}/IssueActions.js | 2 +- .../src/{ => pages/IssueDetail}/IssueDetailComments.js | 2 +- .../src/{ => pages/IssueDetail}/IssueDetailRoot.js | 2 +- .../IssueActionsAddCommentMutation.graphql.js | 0 .../IssueActionsCloseIssueMutation.graphql.js | 0 .../IssueActionsReopenIssueMutation.graphql.js | 0 .../__generated__/IssueActions_issue.graphql.js | 0 .../__generated__/IssueDetailCommentsQuery.graphql.js | 0 .../__generated__/IssueDetailComments_issue.graphql.js | 0 .../__generated__/IssueDetailRootQuery.graphql.js | 0 issue-tracker/src/{ => pages/Issues}/HomeRoot.js | 0 issue-tracker/src/{ => pages/Issues}/Issues.js | 0 issue-tracker/src/{ => pages/Issues}/IssuesListItem.js | 2 +- .../__generated__/HomeRootIssuesQuery.graphql.js | 0 .../__generated__/IssuesListItem_issue.graphql.js | 0 .../__generated__/IssuesPaginationQuery.graphql.js | 0 .../Issues}/__generated__/Issues_repository.graphql.js | 0 issue-tracker/src/routes.js | 10 ++++++---- issue-tracker/src/routing/RouteRenderer.js | 2 +- 22 files changed, 12 insertions(+), 10 deletions(-) rename issue-tracker/src/{ => components}/ErrorBoundary.js (100%) rename issue-tracker/src/{ => components}/SuspenseImage.js (96%) rename issue-tracker/src/{ => hooks}/useMutation.js (100%) rename issue-tracker/src/{ => pages/IssueDetail}/IssueActions.js (98%) rename issue-tracker/src/{ => pages/IssueDetail}/IssueDetailComments.js (98%) rename issue-tracker/src/{ => pages/IssueDetail}/IssueDetailRoot.js (97%) rename issue-tracker/src/{ => pages/IssueDetail}/__generated__/IssueActionsAddCommentMutation.graphql.js (100%) rename issue-tracker/src/{ => pages/IssueDetail}/__generated__/IssueActionsCloseIssueMutation.graphql.js (100%) rename issue-tracker/src/{ => pages/IssueDetail}/__generated__/IssueActionsReopenIssueMutation.graphql.js (100%) rename issue-tracker/src/{ => pages/IssueDetail}/__generated__/IssueActions_issue.graphql.js (100%) rename issue-tracker/src/{ => pages/IssueDetail}/__generated__/IssueDetailCommentsQuery.graphql.js (100%) rename issue-tracker/src/{ => pages/IssueDetail}/__generated__/IssueDetailComments_issue.graphql.js (100%) rename issue-tracker/src/{ => pages/IssueDetail}/__generated__/IssueDetailRootQuery.graphql.js (100%) rename issue-tracker/src/{ => pages/Issues}/HomeRoot.js (100%) rename issue-tracker/src/{ => pages/Issues}/Issues.js (100%) rename issue-tracker/src/{ => pages/Issues}/IssuesListItem.js (95%) rename issue-tracker/src/{ => pages/Issues}/__generated__/HomeRootIssuesQuery.graphql.js (100%) rename issue-tracker/src/{ => pages/Issues}/__generated__/IssuesListItem_issue.graphql.js (100%) rename issue-tracker/src/{ => pages/Issues}/__generated__/IssuesPaginationQuery.graphql.js (100%) rename issue-tracker/src/{ => pages/Issues}/__generated__/Issues_repository.graphql.js (100%) diff --git a/issue-tracker/src/ErrorBoundary.js b/issue-tracker/src/components/ErrorBoundary.js similarity index 100% rename from issue-tracker/src/ErrorBoundary.js rename to issue-tracker/src/components/ErrorBoundary.js diff --git a/issue-tracker/src/SuspenseImage.js b/issue-tracker/src/components/SuspenseImage.js similarity index 96% rename from issue-tracker/src/SuspenseImage.js rename to issue-tracker/src/components/SuspenseImage.js index dc0fc4f3..2bc3ee0f 100644 --- a/issue-tracker/src/SuspenseImage.js +++ b/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; diff --git a/issue-tracker/src/useMutation.js b/issue-tracker/src/hooks/useMutation.js similarity index 100% rename from issue-tracker/src/useMutation.js rename to issue-tracker/src/hooks/useMutation.js diff --git a/issue-tracker/src/IssueActions.js b/issue-tracker/src/pages/IssueDetail/IssueActions.js similarity index 98% rename from issue-tracker/src/IssueActions.js rename to issue-tracker/src/pages/IssueDetail/IssueActions.js index 4420d452..9ed6a3eb 100644 --- a/issue-tracker/src/IssueActions.js +++ b/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; diff --git a/issue-tracker/src/IssueDetailComments.js b/issue-tracker/src/pages/IssueDetail/IssueDetailComments.js similarity index 98% rename from issue-tracker/src/IssueDetailComments.js rename to issue-tracker/src/pages/IssueDetail/IssueDetailComments.js index 6dc35514..4ebc284c 100644 --- a/issue-tracker/src/IssueDetailComments.js +++ b/issue-tracker/src/pages/IssueDetail/IssueDetailComments.js @@ -2,7 +2,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 SuspenseImage from '../../components/SuspenseImage'; const { useCallback, useTransition, Suspense, SuspenseList } = React; diff --git a/issue-tracker/src/IssueDetailRoot.js b/issue-tracker/src/pages/IssueDetail/IssueDetailRoot.js similarity index 97% rename from issue-tracker/src/IssueDetailRoot.js rename to issue-tracker/src/pages/IssueDetail/IssueDetailRoot.js index e418250e..20907091 100644 --- a/issue-tracker/src/IssueDetailRoot.js +++ b/issue-tracker/src/pages/IssueDetail/IssueDetailRoot.js @@ -2,7 +2,7 @@ import React from 'react'; import graphql from 'babel-plugin-relay/macro'; import { usePreloadedQuery } from 'react-relay/hooks'; import ReactMarkdown from 'react-markdown'; -import SuspenseImage from './SuspenseImage'; +import SuspenseImage from '../../components/SuspenseImage'; import IssueDetailComments from './IssueDetailComments'; import IssueActions from './IssueActions'; diff --git a/issue-tracker/src/__generated__/IssueActionsAddCommentMutation.graphql.js b/issue-tracker/src/pages/IssueDetail/__generated__/IssueActionsAddCommentMutation.graphql.js similarity index 100% rename from issue-tracker/src/__generated__/IssueActionsAddCommentMutation.graphql.js rename to issue-tracker/src/pages/IssueDetail/__generated__/IssueActionsAddCommentMutation.graphql.js diff --git a/issue-tracker/src/__generated__/IssueActionsCloseIssueMutation.graphql.js b/issue-tracker/src/pages/IssueDetail/__generated__/IssueActionsCloseIssueMutation.graphql.js similarity index 100% rename from issue-tracker/src/__generated__/IssueActionsCloseIssueMutation.graphql.js rename to issue-tracker/src/pages/IssueDetail/__generated__/IssueActionsCloseIssueMutation.graphql.js diff --git a/issue-tracker/src/__generated__/IssueActionsReopenIssueMutation.graphql.js b/issue-tracker/src/pages/IssueDetail/__generated__/IssueActionsReopenIssueMutation.graphql.js similarity index 100% rename from issue-tracker/src/__generated__/IssueActionsReopenIssueMutation.graphql.js rename to issue-tracker/src/pages/IssueDetail/__generated__/IssueActionsReopenIssueMutation.graphql.js diff --git a/issue-tracker/src/__generated__/IssueActions_issue.graphql.js b/issue-tracker/src/pages/IssueDetail/__generated__/IssueActions_issue.graphql.js similarity index 100% rename from issue-tracker/src/__generated__/IssueActions_issue.graphql.js rename to issue-tracker/src/pages/IssueDetail/__generated__/IssueActions_issue.graphql.js diff --git a/issue-tracker/src/__generated__/IssueDetailCommentsQuery.graphql.js b/issue-tracker/src/pages/IssueDetail/__generated__/IssueDetailCommentsQuery.graphql.js similarity index 100% rename from issue-tracker/src/__generated__/IssueDetailCommentsQuery.graphql.js rename to issue-tracker/src/pages/IssueDetail/__generated__/IssueDetailCommentsQuery.graphql.js diff --git a/issue-tracker/src/__generated__/IssueDetailComments_issue.graphql.js b/issue-tracker/src/pages/IssueDetail/__generated__/IssueDetailComments_issue.graphql.js similarity index 100% rename from issue-tracker/src/__generated__/IssueDetailComments_issue.graphql.js rename to issue-tracker/src/pages/IssueDetail/__generated__/IssueDetailComments_issue.graphql.js diff --git a/issue-tracker/src/__generated__/IssueDetailRootQuery.graphql.js b/issue-tracker/src/pages/IssueDetail/__generated__/IssueDetailRootQuery.graphql.js similarity index 100% rename from issue-tracker/src/__generated__/IssueDetailRootQuery.graphql.js rename to issue-tracker/src/pages/IssueDetail/__generated__/IssueDetailRootQuery.graphql.js diff --git a/issue-tracker/src/HomeRoot.js b/issue-tracker/src/pages/Issues/HomeRoot.js similarity index 100% rename from issue-tracker/src/HomeRoot.js rename to issue-tracker/src/pages/Issues/HomeRoot.js diff --git a/issue-tracker/src/Issues.js b/issue-tracker/src/pages/Issues/Issues.js similarity index 100% rename from issue-tracker/src/Issues.js rename to issue-tracker/src/pages/Issues/Issues.js diff --git a/issue-tracker/src/IssuesListItem.js b/issue-tracker/src/pages/Issues/IssuesListItem.js similarity index 95% rename from issue-tracker/src/IssuesListItem.js rename to issue-tracker/src/pages/Issues/IssuesListItem.js index 4214699b..5fe03280 100644 --- a/issue-tracker/src/IssuesListItem.js +++ b/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. diff --git a/issue-tracker/src/__generated__/HomeRootIssuesQuery.graphql.js b/issue-tracker/src/pages/Issues/__generated__/HomeRootIssuesQuery.graphql.js similarity index 100% rename from issue-tracker/src/__generated__/HomeRootIssuesQuery.graphql.js rename to issue-tracker/src/pages/Issues/__generated__/HomeRootIssuesQuery.graphql.js diff --git a/issue-tracker/src/__generated__/IssuesListItem_issue.graphql.js b/issue-tracker/src/pages/Issues/__generated__/IssuesListItem_issue.graphql.js similarity index 100% rename from issue-tracker/src/__generated__/IssuesListItem_issue.graphql.js rename to issue-tracker/src/pages/Issues/__generated__/IssuesListItem_issue.graphql.js diff --git a/issue-tracker/src/__generated__/IssuesPaginationQuery.graphql.js b/issue-tracker/src/pages/Issues/__generated__/IssuesPaginationQuery.graphql.js similarity index 100% rename from issue-tracker/src/__generated__/IssuesPaginationQuery.graphql.js rename to issue-tracker/src/pages/Issues/__generated__/IssuesPaginationQuery.graphql.js diff --git a/issue-tracker/src/__generated__/Issues_repository.graphql.js b/issue-tracker/src/pages/Issues/__generated__/Issues_repository.graphql.js similarity index 100% rename from issue-tracker/src/__generated__/Issues_repository.graphql.js rename to issue-tracker/src/pages/Issues/__generated__/Issues_repository.graphql.js diff --git a/issue-tracker/src/routes.js b/issue-tracker/src/routes.js index a480640a..7f364c8a 100644 --- a/issue-tracker/src/routes.js +++ b/issue-tracker/src/routes.js @@ -33,7 +33,9 @@ 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 @@ -41,7 +43,7 @@ const routes = [ * 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, diff --git a/issue-tracker/src/routing/RouteRenderer.js b/issue-tracker/src/routing/RouteRenderer.js index b2a3614a..274c4c92 100644 --- a/issue-tracker/src/routing/RouteRenderer.js +++ b/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; From adbb2aac99fb348e6208ae0fb214b1d26ba63776 Mon Sep 17 00:00:00 2001 From: fanny Date: Tue, 19 Oct 2021 10:16:49 -0300 Subject: [PATCH 2/4] Finish organization --- issue-tracker/src/pages/Issues/Issues.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/issue-tracker/src/pages/Issues/Issues.js b/issue-tracker/src/pages/Issues/Issues.js index 8d4e996c..afe94756 100644 --- a/issue-tracker/src/pages/Issues/Issues.js +++ b/issue-tracker/src/pages/Issues/Issues.js @@ -51,17 +51,14 @@ export default function Issues(props) { return (
- {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 => (
{/* Note how we also spread IssuesListItem's fragment above */}
- ); - })} + ))}
-
- -
{issue.author.login}
-
- -
-
+ {/** The author's comment is divided from comment list */} + + diff --git a/issue-tracker/src/pages/Issues/Issues.js b/issue-tracker/src/pages/Issues/Issues.js index afe94756..9209aa53 100644 --- a/issue-tracker/src/pages/Issues/Issues.js +++ b/issue-tracker/src/pages/Issues/Issues.js @@ -52,7 +52,7 @@ export default function Issues(props) { return (
{data.issues.edges - .filter(edge => edge == null || edge.node == null) + .filter(edge => edge != null || edge.node != null) .map(edge => (
{/* Note how we also spread IssuesListItem's fragment above */} From 730f7a8c63dfd4185116b2ea79a6ab4c82670fe8 Mon Sep 17 00:00:00 2001 From: fanny Date: Tue, 19 Oct 2021 10:49:58 -0300 Subject: [PATCH 4/4] Add project organization tree on README.md --- issue-tracker/README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/issue-tracker/README.md b/issue-tracker/README.md index cd4d7986..4154b15a 100644 --- a/issue-tracker/README.md +++ b/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):