CodeGuideline

We use prettier and a linter. Please make sure your code editor is correctly configured.

General Rules

• Format your commits with Conventional Commit (emojis are welcome though 😜)
• Any component prop referring to an action must be prefixed by on (ex: onSubmit )

Design

Refer to Design Guidelines

Import/Export

• Use mainly absolute imports : ~/page/Home , it will be easier to update it the file is moved

⚠️ Do not use absolute import for a sibling if there is an ``index.ts` that exports all the siblings. You'll create a circular import that might break the app

• Except for pages , prefer named export over default exports. This will allow us to avoid mistypings in component/functions names
• For lodash, import with the following way : import _get from 'lodash/get' - for a better tree-shaking

Make the code readable

If you need to document a lot, it's because your code isn't clear enough. Try to change variable names, cut components in smaller ones. Someone should be easily able to take over your code if needed.

Make it refacto-friendly

When you do something, try to think about refactoring that code. Use variable for any hard coded value (like route names etc...). Use enums whenever you can.

Style

To avoid dead code, all the style should be in the same file as the TS code using it. If you use the same style several time (general rule is >= 3 times but that's up to you) consider making a reusable style file.

⚠️ Inline css is forbidden in the app

Query / Mutation with apollo client

Always use the hooks generated with the codegen to query or mutate datas from the api.

1. Define your qgl schema
2. Run yarn codegen
3. Use the hook and/or the fragment generated

// Sub component OrganizationDetails
import { CurrentOrganizationFragment } from "~/generated/graphql";

gql`
  fragment CurrentOrganization on Organization {
    id
    name
  }
`;

export const OrganizationDetails = (
  organisation: CurrentOrganizationFragment
) => {
  return <div>{organisation.name}</div>;
};

// Parent component UserInfo
import {
  useUserIdentifierQuery,
  CurrentOrganizationFragmentDoc,
  useUpdateUserMutation,
} from "~/generated/graphql";
import { OrganizationDetails } from "./OrganizationDetails";

gql`
  query UserIdentifier {
    currentUser {
      id
      email
      organisation {
          ...CurrentOrganizationFragmentDoc
      }
    }
  }

  muation updateUser($input: UserInput!) {
      updateUser(input: $input) {
        id
      }
  }

  ${CurrentOrganizationFragmentDoc}
`;

const UserIdentifier = () => {
  const { data, loading, error } = useUserIdentifierQuery();
  const [updateUser] = useUpdateUserMutation();

  return (
    <div>
      <div>User email : {data?.currentUser?.email}</div>
      <OrganizationDetails organisation={data?.currentUser?.organisation} />
    </div>
  );
};

Note : One query will generate 2 hooks : useYourQueryNameQuery & useYourQueryNameLazyQuery

⚠️ If one of the subcomponent uses a part of the main query, make sure this component defines a fragment to avoid useless data fetching.