Skip to content

Commit

Permalink
Merge pull request #602 from wri/release/rare-redwood
Browse files Browse the repository at this point in the history
[RELEASE] Rare Redwood
  • Loading branch information
roguenet authored Nov 1, 2024
2 parents 3eee87f + 681b6ab commit fcf8d98
Show file tree
Hide file tree
Showing 176 changed files with 4,675 additions and 1,608 deletions.
17 changes: 7 additions & 10 deletions .env.local.sample
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
# Local dev configuration
NEXT_PUBLIC_API_BASE_URL='http://localhost:8080'
NEXT_PUBLIC_USER_SERVICE_URL='http://localhost:4010'
NEXT_PUBLIC_JOB_SERVICE_URL='http://localhost:4020'

# Accessing staging instead of local BE
NEXT_PUBLIC_API_BASE_URL='https://api-staging.terramatch.org'

# Browser accessible variables
NEXT_PUBLIC_API_BASE_URL =
NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN =
NEXT_PUBLIC_SENTRY_DSN =

TRANSIFEX_TOKEN =
TRANSIFEX_SECRET =
TRANSIFEX_TRANSLATIONS_TTL_SEC = 10

SENTRY_DSN =
SENTRY_AUTH_TOKEN =

SENTRY_PROJECT =
SENTRY_ORG =


NEXT_PUBLIC_GEOSERVER_URL =
NEXT_PUBLIC_GEOSERVER_WORKSPACE =

2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
18.17.0
20.11.1
11 changes: 11 additions & 0 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import "src/styles/globals.css";
import * as NextImage from "next/image";
import { StoreProvider } from "../src/utils/testStore";

export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
Expand All @@ -24,3 +25,13 @@ Object.defineProperty(NextImage, "default", {
/>
)
});

export const decorators = [
(Story, options) => {
const { parameters } = options;

return <StoreProvider storeBuilder={parameters.storeBuilder}>
<Story {...options} />
</StoreProvider>;
},
];
48 changes: 47 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ To generate Api types/queries/fetchers/hooks, this repo uses:

#### Usage

In order to generate from the api (whenever there is some backend endpoint/type change) please use this command:
In order to generate from the v1/2 api (whenever there is some backend endpoint/type change) please use this command:

```
yarn generate:api
Expand All @@ -35,6 +35,52 @@ We can customize the `baseUrl` of where we are fetching from by changing the `co
This is super useful if we want to globally set some headers for each request (such as Authorization header).
It exposes a component hook so we can use other hooks (such as Auth hook or context) to get the logged in token for example and inject it in the global request context.

##### v3 API
The V3 API has a different API layer, but the generation is similar:
```
yarn generate:services
```

When adding a new **service** app to the v3 API:
* In your local .env, define the service URL
* In `openapi-codegen.config.ts`, add the new service name to the `SERVICES` object (e.g. `foo-service`).
* This will generate a new target, which needs to be added to `package.json`:
* Under scripts, add `"generate:fooService": "npm run generate:fooService"`
* Under the `"generate:services"` script, add the new service: `"generate:services": "npm run generate:userService && npm run generate:fooService`
* After running `yarn generate:fooService` the first time, open the generated `fooServiceFetcher.ts` and
modify it to match `userServiceFetcher.ts`.
* This file does not get regenerated after the first time, and so it can utilize the same utilities
for interfacing with the redux API layer / connection system that the other v3 services use.
* Follow directions below for all namespaces and resources in the new service

When adding a new **namespace** to the V3 API:
* In `geneated/v3/utils.ts`, add namespace -> service URL mapping to `V3_NAMESPACES`

When adding a new **resource** to the v3 API:
* The resource needs to be specified in shape of the redux API store. In `apiSlice.ts`, add the new
resource plural name (the `type` returned in the API responses) to the store by adding it to the
`RESOURCES` const. This will make sure it's listed in the type of the ApiStore so that resources that match that type are seamlessly folded into the store cache structure.
* The shape of the resource should be specified by the auto-generated API. This type needs to be
added to the `ApiResource` type in `apiSlice.ts`. This allows us to have strongly typed results
coming from the redux API store.

### Connections
Connections are a **declarative** way for components to get access to the data from the cached API
layer that they need. This system is under development, and the current documentation about it is
[available in Confluence](https://gfw.atlassian.net/wiki/spaces/TerraMatch/pages/1423147024/Connections)

Note for Storybook: Because multiple storybook components can be on the page at the same time that each
have their own copy of the redux store, the Connection utilities `loadConnection` (typically used
via `connectionLoaded` in `connectionShortcuts.ts`) and `connectionSelector` will not work as expected
in storybook stories. This is because those utilities rely on `ApiSlice.redux` and `ApiSlice.apiDataStore`,
and in the case of storybook, those will end up with only the redux store from the last component on the
page. Regular connection use through `useConnection` will work because it gets the store from the
Provider in the redux component tree in that case.

When building storybook stories for components that rely on connections via `useConnection`, make sure
that the story is provided with a store that has all dependent data already loaded. See `testStore.tsx`'s
`buildStore` builder, and `Navbar.stories.tsx` for example usage.

## Translation ([Transifex Native SDK](https://developers.transifex.com/docs/native)).

Transifex native sdk provides a simple solution for internationalization.
Expand Down
Loading

0 comments on commit fcf8d98

Please sign in to comment.