codebase structure refactor

[the-vampiire]

Goals

• readability
• accessibility of related files
• separation of path-associated Views from their constituent Components
• intuitive navigation of grouped components

Guidelines

• always use absolute imports from ./src/path/to/import

Structure

src/
  - views/
    - ViewName.jsx
    - ViewName/
  - components/
    - ViewName/
    - UI/
    - Utility/
    - Static/
  - queries/
  - mutations/
  - utils/
  - assets/
  - styles/
  - App.jsx
  - index.js

• utils/: shared non component utilities (formatting)
• styles/: shared SCSS and config
• assets/: shared static assets
• App.jsx: import views/ for Router
• index.js: root export with wrappers and configuration

Queries and Mutations

• only used in the component: write in the component file
• shared by multiple components: write in queries/ or mutations/
  • queryName.js or mutationName.js
• label the queries or mutations for easier debugging

query DescriptiveLabelName($input_name: input_type) {
  query(input: $input) {
    return_field
  }
}

mutation DescriptiveActionName($input_name: input_type) {
  mutation(input: $input) {
    return_field
  }
}

mutations

• when calling a mutation of data owned by and returning a Type always request back
  • the id field
  • the fields that were updated
• this will keep the cache consistent and remove the need for callback-based updates

views/

• /ViewName.jsx
  • imports children and renders a path-associated view
• /ViewName/
  • index.jsx: same as ViewName.jsx
  • include non-component support files specific to the view (custom styling, assets, animations)

components/

• ViewName/: components only used in a single View
• Category/: shared components under a common category
  • UI/: base UI components (buttons, cards)
  • Utility/: utility components (<Request />, <Modal />)
  • Static/: static homepage components
• ComponentName/: complex shared components not necessarily under a view or category (rare)

component directories

• each directory should have a default export from index.jsx
• components should contain one SCSS file per depth of directory

component definitions within the directories

• components should mostly remain in flat .jsx files
• if a component grows in complexity to require sub-components create a dir by its name to contain them
  • follows component directory guidelines
  • this new dir should now contain the SCSS styles for itself and sub-components
  • rarely extend deeper than one sub-directory component

[the-vampiire]

all newsfeed refactoring using the new structure. afterwards converting the remaining code