Add TODO example

README.md

@@ -135,3 +135,7 @@ This package includes a wrapper around `react-router-dom`'s `Link` component. Us
 ## A note on JSResource
 
 Loading data for entrypoints depends on having a JSResource implementation to coordinate and cache loads of the same resource. This package does not depend on using the internal JSResource implementation if you wish to use a different one in your entrypoints.
+
+## Example
+
+For an example take a look at [examples/todo](./examples/todo).

examples/todo/.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+lib
+types
+__generated__

examples/todo/.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  extends: [
+    'fbjs/strict',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+    'plugin:react/recommended',
+    'plugin:relay/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'babel', 'prettier', 'react', 'relay'],
+  rules: {
+    // Mutations aren't located in the same file as Components
+    'relay/unused-fields': 'off',
+  },
+  settings: {
+    react: {
+      version: '16.8.1',
+    },
+  },
+};

examples/todo/.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+.eslintcache
+
+__generated__

examples/todo/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Meta Platforms, Inc. and affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

examples/todo/README.md

@@ -0,0 +1,38 @@
+# Relay TodoMVC
+
+This is based on the example from https://github.com/relayjs/relay-examples/tree/main/todo.
+
+## Installation
+
+```
+yarn
+```
+
+## Running
+
+Set up generated files:
+
+```
+yarn update-schema
+yarn build
+```
+
+Start a local server:
+
+```
+yarn start
+```
+
+## Developing
+
+Any changes you make to files in the `src/` directory will cause the server to
+automatically rebuild the app and refresh your browser.
+
+If at any time you make changes to `data/schema.js`, stop the server,
+regenerate `data/schema.graphql`, and restart the server:
+
+```
+yarn update-schema
+yarn build
+yarn start
+```

examples/todo/babel.config.json

@@ -0,0 +1,19 @@
+{
+  "plugins": [
+    [
+      "relay",
+      {
+        "artifactDirectory": "./__generated__/relay/"
+      }
+    ],
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-runtime",
+    "@babel/plugin-transform-typescript",
+    "react-refresh/babel"
+  ],
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+}

examples/todo/data/database.ts

@@ -0,0 +1,114 @@
+export class Todo {
+  readonly id: string;
+  readonly text: string;
+  readonly complete: boolean;
+
+  constructor(id: string, text: string, complete: boolean) {
+    this.id = id;
+    this.text = text;
+    this.complete = complete;
+  }
+
+}
+export class User {
+  readonly id: string;
+
+  constructor(id: string) {
+    this.id = id;
+  }
+
+}
+// Mock authenticated ID
+export const USER_ID = 'me';
+// Mock user database table
+const usersById: Map<string, User> = new Map([[USER_ID, new User(USER_ID)]]);
+// Mock todo database table
+const todosById: Map<string, Todo> = new Map();
+const todoIdsByUser: Map<string, ReadonlyArray<string>> = new Map([[USER_ID, []]]);
+// Seed initial data
+let nextTodoId: number = 0;
+addTodo('Taste JavaScript', true);
+addTodo('Buy a unicorn', false);
+
+function getTodoIdsForUser(id: string): ReadonlyArray<string> {
+  return todoIdsByUser.get(id) || [];
+}
+
+export function addTodo(text: string, complete: boolean): string {
+  const todo = new Todo(`${nextTodoId++}`, text, complete);
+  todosById.set(todo.id, todo);
+  const todoIdsForUser = getTodoIdsForUser(USER_ID);
+  todoIdsByUser.set(USER_ID, todoIdsForUser.concat(todo.id));
+  return todo.id;
+}
+export function changeTodoStatus(id: string, complete: boolean) {
+  const todo = getTodoOrThrow(id);
+  // Replace with the modified complete value
+  todosById.set(id, new Todo(id, todo.text, complete));
+}
+
+// Private, for strongest typing, only export `getTodoOrThrow`
+function getTodo(id: string): Todo | null | undefined {
+  return todosById.get(id);
+}
+
+export function getTodoOrThrow(id: string): Todo {
+  const todo = getTodo(id);
+
+  if (!todo) {
+    throw new Error(`Invariant exception, Todo ${id} not found`);
+  }
+
+  return todo;
+}
+export function getTodos(status: string = 'any'): ReadonlyArray<Todo> {
+  const todoIdsForUser = getTodoIdsForUser(USER_ID);
+  const todosForUser = todoIdsForUser.map(getTodoOrThrow);
+
+  if (status === 'any') {
+    return todosForUser;
+  }
+
+  return todosForUser.filter((todo: Todo): boolean => todo.complete === (status === 'completed'));
+}
+
+// Private, for strongest typing, only export `getUserOrThrow`
+function getUser(id: string): User | null | undefined {
+  return usersById.get(id);
+}
+
+export function getUserOrThrow(id: string): User {
+  const user = getUser(id);
+
+  if (!user) {
+    throw new Error(`Invariant exception, User ${id} not found`);
+  }
+
+  return user;
+}
+export function markAllTodos(complete: boolean): ReadonlyArray<string> {
+  const todosToChange = getTodos().filter((todo: Todo): boolean => todo.complete !== complete);
+  todosToChange.forEach((todo: Todo): void => changeTodoStatus(todo.id, complete));
+  return todosToChange.map((todo: Todo): string => todo.id);
+}
+export function removeTodo(id: string) {
+  const todoIdsForUser = getTodoIdsForUser(USER_ID);
+  // Remove from the users list
+  todoIdsByUser.set(USER_ID, todoIdsForUser.filter((todoId: string): boolean => todoId !== id));
+  // And also from the total list of Todos
+  todosById.delete(id);
+}
+export function removeCompletedTodos(): ReadonlyArray<string> {
+  const todoIdsForUser = getTodoIdsForUser(USER_ID);
+  const todoIdsToRemove = getTodos().filter((todo: Todo): boolean => todo.complete).map((todo: Todo): string => todo.id);
+  // Remove from the users list
+  todoIdsByUser.set(USER_ID, todoIdsForUser.filter((todoId: string): boolean => !todoIdsToRemove.includes(todoId)));
+  // And also from the total list of Todos
+  todoIdsToRemove.forEach((id: string): boolean => todosById.delete(id));
+  return todoIdsToRemove;
+}
+export function renameTodo(id: string, text: string) {
+  const todo = getTodoOrThrow(id);
+  // Replace with the modified text value
+  todosById.set(id, new Todo(id, text, todo.complete));
+}