Appifyのサーバーエンジニアだらけのチームによるフロントエンド開発

src
├── assets
│   ├── index.html
│   ├── protobuf.d.ts // サーバーで定義されたProtocol Buffersから生成されたクライアント用の型定義
│   └── protobuf.js // サーバーで定義されたProtocol Buffersから生成されたjsクライアント
├── client
│   ├── Config.ts // 環境の設定ファイル
│   └── main.tsx // mainファイル
├── components // Reactのコンポーネント群
│   ├── App.tsx　// main.tsxで呼ばれる大元のコンポーネント
│   ├── layouts // レイアウトを管理するコンポーネント群
│   ├── modules // HeaderやFooterなど、どのページでも呼ばれる決まりきったコンポーネント群
│   ├── pages // 各ページのコンポーネント群
│   ├── routing // ページのルーティング定義ようコンポーネント群
│   ├── styles // スタイル定義群
│   ├── ui // ページの部品となるコンポーネント群
│   └── utils // ui用便利関数&hooks群
├── infra // 外部とアクセスよう実装群
├── lib // アプリケーション用便利関数群
├── server // nodeサーバー用実装群
└── state // Reduxによる状態管理用実装群

export const ProductDescription = styled(
  ({ className, children }: ClassNameProps & ChildrenProps) => (
    <div className={className}>
      <ProductSubText>{children}</ProductSubText>　{/*部品でスタイルの決まっているのものはその専用のコンポーネントを使いこの階層のCSSには書かない*/}
    </div>
  )
)`
  width: ${CSSWidth.M0}; // 共通化されたスタイルや値に関しては別途定義されている変数を参照
  text-align: center;　// 明示的に書かれていた方がわかりやすいものや例外的なものに関しては直接書く
`;

export const CampaignProductContentContainer = styled(
  ({
    className,
    children,
    colorDefaultValue,
    sizeDefaultValue
  }: CampaignProductSelectProps & ClassNameProps & ChildrenProps) => (
    <Column className={className}>
      <CampaignProductSelectContainer
        colorDefaultValue={colorDefaultValue}
        sizeDefaultValue={sizeDefaultValue}
      >
        {children}
      </CampaignProductSelectContainer>
    </Column>
  )
)`
  align-items: ${CSSAlign.Center};　
  justify-content: ${CSSAlign.Center};
  ${ColumnMargin(CSSMargin.S3)} 
  ${Heading3Bold} {　// このコンポーネント上に現れないが下位のコンポーネントは共通で使われているため、変更できないので、この階層であてざるおえない
    text-align: ${CSSAlign.Center};
  }

  width: ${CSSWidth.Max}; 

  ${CampaignProductSelectContainer} {
    width: ${CSSWidth.M4};
  }
  ${isMobile()} {
    ${CampaignProductSelectContainer} {
      width: ${CSSWidth.Max};
    }
  }
`;

export interface UserState {
  user: User;
  error?: Error;
}

export const UserAction = {
  GET_USER: createAsyncAction(
    "GET_USER_REQUEST",
    "GET_USER_SUCCESS",
    "GET_USER_FAILURE"
  )<undefined, GetUserSuccessPayload, FailedPayload>(),

  UPDATE_ADDRESS: createAsyncAction(
    "UPDATE_ADDRESS_REQUEST",
    "UPDATE_ADDRESS_SUCCESS",
    "UPDATE_ADDRESS_FAILURE"
  )<undefined, UpdateAddressSuccessPayload, FailedPayload>(),
}

export interface GetUserSuccessPayload {
  user: User;
}

export interface UpdateAddressSuccessPayload {
  user: User;
}

export interface FailedPayload {
  error: Error;
}

export const userReducer = (
  state: UserState = initialState,
  action: UserActionType
): UserState => {
	switch (action.type) {
		case getType(UserAction.GET_USER.request):
		case getType(UserAction.UPDATE_ADDRESS.request):
			return {
        ...state,
        isFetching: true
      };
		case getType(UserAction.GET_USER.success):
    case getType(UserAction.UPDATE_ADDRESS.success): 
			return {
        ...state,
        user: action.payload.user,
        isFetching: false,
        error: undefined
      };
		case getType(UserAction.GET_USER.failure):
		case getType(UserAction.GET_USER_SUBSCRIPTIONS.failure):
			return {
        ...state,
        isFetching: false,
        error: action.payload.error
      };
	}
}

export interface UserOperations {
	getUser(): Promise<void>;
	updateAddress(
    postal: string,
    address: string,
    name: string,
    successFunc: () => void
  ): Promise<void>;
}


export const createUserOperations = (
  dispatch: Dispatch,
  firebase: Firebase,
  userRepository: UserRepository,
  payjpRepository: PayjpRepository
): UserOperations => ({
	async getUser() {
    dispatch(UserAction.GET_USER.request());
    try {
      const { user } = await userRepository.getUser({});
      dispatch(UserAction.GET_USER.success({ user }));
    } catch (err) {
      if (isErrorResponse(err)) {
        const e: api.v1.ErrorResponse = err;
        if (e.code === api.v1.ErrorResponse.Code.CODE_NOT_FOUND) {
          dispatch(UserAction.GET_USER.success({ user: initialUserState }));
          return;
        }
      }

      const error = ErrorHandler(err);
      dispatch(UserAction.GET_USER.failure({ error }));
    }
  },
	async updateAddress(
    postal: string,
    address: string,
    name: string,
    successFunc: () => void
  ) {
    dispatch(UserAction.UPDATE_ADDRESS.request());

    try {
      const { user } = await userRepository.updateAddress({
        postCode: postal,
        address,
        name
      });

      dispatch(UserAction.UPDATE_ADDRESS.success({ user }));
      successFunc();
    } catch (err) {
      const error = ErrorHandler(err);
      dispatch(UserAction.UPDATE_ADDRESS.failure({ error }));
    }
  }
})

pages
├── hoge
│   ├── HogePage.tsx // 実際のページ用のコンポーネント
│   ├── HogePageContainer.tsx　// 依存関係をPageコンポーネントに渡すためのコンポーネント
│   └── index.ts
└── foo
    ├── FooPage.tsx
    ├── FooPageContainer.tsx
    └── index.ts

const selector = (state: RootState) => {
  return {
    user: state.user.user
  };
};

export const HogePageContainer: React.FC = () => {
  const operations = useOperations(); // RootコンポーネントでインジェクトしているOperation群をとってくる
  const { user } = useSelector(selector); //react-reduxのhooksでしてした状態をとってきてくれる

  return (
    <HogePage
      operations={operations}
      user={user}
    />
  );
};

export type HogePageStateProps = ReturnType<typeof selector>;

export const ShopifyPushNotifications: React.VFC<ApplicationIDProps> = ({
  applicationID,
}) => {
  const { data, loading, error } = useQuery(ShopifyPushNotificationsDocument, {
    variables: {
      applicationID,
    },
  });
  useSetError(error);

  return (
    <Card>
      <ResourceList<
        PushNotificationsQuery["application"]["pushLogs"]["nodes"][number]
      >
        items={data?.application?.pushLogs?.nodes ?? []}
        loading={loading}
        emptyState={
          <EmptyState
            heading="顧客にプッシュ通知を配信しよう"
            image=""
            action={{
              content: "プッシュ通知を配信",
              url: routeWithApp(
                AdminRoute.ROUTE_SHOPIFY_MOBILE_APP_MARKETING_PUSH_NOTIFICATION_CREATE,
                applicationID,
              ),
            }}
          >
            <p>新商品の公開やブランドの新着情報を顧客に届けることができます</p>
          </EmptyState>
        }
        renderItem={(pushLog) => (
          <ShopifyPushNotification applicationID={applicationID} {...pushLog} />
        )}
      />
    </Card>
  );
};

query ShopifyPushNotifications($applicationID: ID!) {
  application(id: $applicationID) {
    id
    pushLogs(first: 30, orderBy: { direction: DESC, field: CREATED_AT }) {
      nodes {
          id
				  pushMessage
				  pushStatus
				  execTime
      }
    }
  }
}