Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .aws/src/config/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ const prodDomain = 'readitlater.com';
export const isDev = process.env.NODE_ENV === 'development';
const environment = isDev ? 'Dev' : 'Prod';
const domain = `${domainPrefix}.` + (isDev ? devDomain : prodDomain);
const collectionApiEndpoint =
'https://collection-api.' + (isDev ? devDomain : prodDomain) + '/admin';
// We use production client api always,
// because the dev one will not have item data and that is all we are going to use it for
const clientApiEndpoint = 'https://client-api.getpocket.com';
Expand Down Expand Up @@ -34,7 +32,6 @@ export const config = {
branch,
},
envVars: {
collectionApiEndpoint,
clientApiEndpoint,
oauth2ClientId,
oauth2Provider,
Expand Down
4 changes: 0 additions & 4 deletions .aws/src/pocketAlbApplication.ts
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,6 @@ export function createPocketAlbApplication(
name: 'NODE_ENV',
value: process.env.NODE_ENV, // this gives us a nice lowercase production and development
},
{
name: 'REACT_APP_COLLECTION_API_ENDPOINT',
value: config.envVars.collectionApiEndpoint,
},
{
name: 'REACT_APP_CLIENT_API_ENDPOINT',
value: config.envVars.clientApiEndpoint,
Expand Down
3 changes: 1 addition & 2 deletions Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@ RUN REACT_APP_ENV=${APP_ENV} npm run build

# production environment
FROM nginx:1.21.6@sha256:2bcabc23b45489fb0885d69a06ba1d648aeda973fae7bb981bafbb884165e514
# Copy collections build into nginx html directory for now,
# collections will be at the root of the server
# Copy app build into nginx html directory
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
COPY --from=builder /usr/src/app/.docker/nginx.conf /etc/nginx/nginx.conf
ENV PORT 80
Expand Down
26 changes: 14 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
This repository is home to a suite of internal tools for Pocket curators developed with React and TypeScript. With React, we use functional components and hooks throughout.

We also use:

- [Material UI](https://mui.com/) for the UI,
- [Apollo Client](https://www.apollographql.com/docs/react/) for connecting to the APIs the tools interact with,
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for unit testing,
Expand Down Expand Up @@ -84,24 +85,24 @@ npm run test

- The `src/api` folder contains GraphQL queries and mutations the app needs to execute to retrieve and manipulate data, as well as generated types for these and the Apollo Client connection.

- `src/collections` is the home for Collections Admin Tool that lets Pocket curators create, edit and publish collections of stories for Pocket users.

- `src/curated-corpus` houses the Curated Corpus Tool.

Within the folder for each tool, the structure is as follows (taking Collections as an example):
- `src/moderation` DEPRECATED home of moderation of a legacy Pocket feature

Within the folder for each tool, the structure is as follows (taking Curated Corpus as an example):

```bash
collections/
curated-corpus/
├─ components/
├─ pages/
├─ utils/
```

The `components` folder houses any components specific to that particular tool, for example, `CollectionListCard`. The `pages` folder is home to page-level components, i.e. `AddCollectionPage`.
The `components` folder houses any components specific to that particular tool, for example, `ApprovedItemListCard`. The `pages` folder is home to page-level components, i.e. `CorpusItemPage`.

All components are functional React components. Each component lives in its own folder. Unit tests, styles, validation schemas (for form components) are placed in separate files alongside each component.

Routing within the app is set up with React Router. The entrypoint to the app, [App.tsx](/src/App.tsx), sets up all requests to be routed to specific paths within the apps - `/collections` for Collections and `/prospects` for the Prospecting tool, for example. More detailed routing, for example, individual collection pages, is set up within the landing page - see [this example for Collections](/src/collections/pages/CollectionsLandingPage/CollectionsLandingPage.tsx)
Routing within the app is set up with React Router. The entrypoint to the app, [App.tsx](/src/App.tsx), sets up all requests to be routed to specific paths within the apps - `/prospects` for the Prospecting tool, for example. More detailed routing, for example, individual curated corpus pages, is set up within the landing page - see [this example for Curated Corpus](/src/curated-corpus/pages/CuratedCorpusLandingPage/CuratedCorpusLandingPage.tsx)

## Working with the Admin API

Expand All @@ -116,12 +117,13 @@ The generated types and custom hooks are saved in a file named `generatedTypes.t

Now that the generated code is ready to use, you can:

- Use the generated types elsewhere in the code to type hint the shape of the returned data or data that is expected by components in the app, for example, `Collection` or `CollectionAuthor`.
- Use strongly typed custom Apollo hooks to fetch and manipulate data. Apollo Client has generic `useQuery`, `useLazyQuery`, `useMutation` and `useSubscription` hooks. GraphQL Code Generator builds on that by providing hooks that are specific to the queries and mutations you need to run, for example, `useGetCollectionByExternalIdQuery`.
- Use the generated types elsewhere in the code to type hint the shape of the returned data or data that is expected by components in the app, for example, `ApprovedCorpusItem` or `CorpusLanguage`.
- Use strongly typed custom Apollo hooks to fetch and manipulate data. Apollo Client has generic `useQuery`, `useLazyQuery`, `useMutation` and `useSubscription` hooks. GraphQL Code Generator builds on that by providing hooks that are specific to the queries and mutations you need to run, for example, `useGetSectionsWithSectionItemsQuery`.

## Troubleshooting

1. If you receive an error similar to the following `error:xyz:digital envelope routines`, make sure you are using the correct Node version. Run `nvm use` in the project root to switch to the version specified in `.nvmrc` (currently Node 18). If you don't have it installed:
```shell
nvm install
nvm use
```
```shell
nvm install
nvm use
```
Loading