Skip to content

Latest commit

 

History

History
40 lines (32 loc) · 3.89 KB

README.md

File metadata and controls

40 lines (32 loc) · 3.89 KB
Raw

MINT React Frontend

Folder Layout

The frontend code is organized into several major subfolders:

  • app contains the entry .tsx and .scss files for the application. It also houses the Route component where all high level routing is defined and structured.
  • assets contains images and static files used in the site, such as downloadable planning templates.
  • components contains individual components, each potentially reusable, that don't constitute a full page/screen, wrapper or context. Each component will have a folder with the component name, with the component code in index.tsx. Each component folder may also contain:
    • index.scss - SASS styling for the component.
    • index.test.tsx - unit tests for the component.
    • index.stories.tsx - setup to make the component available in Storybook.
  • config contains all the FE specific application configurations for tools such as codegen and redux
  • constants contains various constant values used throughout the application.
  • contexts contains all components that serve as contexts (useContext) for managing application state. Each component within this directory is appended with 'Context'
  • features contains the application's features. This may be a single page/screen, or a collections of pages that compose a unified responsibility
  • gql contains GraphQL operations used to interface with the backend API.
    • gql/generated contains TypeScript type definitions that are autogenerated by grapqh-codegen from the backend GraphQL schema for use when writing operations; do not directly modify these.
    • gql/operations contains written queries, mutations, and subscriptions
  • hooks contains custom hooks used for common tasks throughout the application.
  • i18n contains text used throughout the application that may need to be translatable for internationalization.
  • stores contains definitions of Redux reducers and sagas for managing frontend application state.
  • stylesheets contains SASS stylesheets that are used throughout the application.
  • tests contains tests utils, configurations, and mock data for use with React-Testing-Library
  • types contains TypeScript types for application-wide usage.
  • utils contains utility functions used repeatedly in the application.
  • validations contains Yup validation functions, used by Formik forms throughout the application.
  • wrappers contains components that wrap the central application code. These generally utilize, but are not limited to, app route location state to handle desired behaviors. These component are implemented in the Routes/index.tsx component.

GraphQL

The source of truth for the GraphQL schema is pkg/graph/schema.graphql; Apollo Client is configured to reference this, and the Apollo Client VS Code plugin will enable autocomplete when writing queries/mutations for use in the frontend. Each query or mutation should be handwritten in the GraphQL query language in a file in the src/gql/operations directory. Running scripts/dev gql (or yarn generate) will generate TypeScript types from these queries, placing the generated code in src/gql/generated/graphql.ts. The queries and types can then be used in component code by calling useQuery()/useMutation() from @apollo/client or by using the generated hooks.

For an example, consider the query used for fetching LaunchDarkly info for a currently logged-in user. The GraphQL query for fetching this data is defined in src/gql/operations/ModelPlan/GetCurrentUserQuery.ts; the generated types are found in src/gql/generated/graphql.ts. These are then used in src/wrappers/FlagsWrapper/index.tsx:

const { data } = useGetCurrentUserQuery();

which uses the Apollo Client library to fetch data from the backend using GraphQL.