(DOCSP-12163): Write Phase 2 Tutorial Text (Web) (#506)

* web annotations and tutorial text

* minor indentation fix

* removed doubled content

Author: llazala000

source/includes/steps-task-tracker-web-apollo.yaml

@@ -2,65 +2,30 @@ title: Instantiate an ApolloClient
 ref: instantiate-an-apolloclient
 level: 4
 content: |
-  The ``RealmApolloProvider`` component calls ``createApolloClient()`` to
-  instantiate the client. Update the function with the following code to create
-  an ``ApolloClient`` object that connects to your app:
+  The ``RealmApolloProvider`` component should call 
+  ``createRealmApolloClient()`` to instantiate the client. Update the 
+  component with the following code to create an ``ApolloClient`` object that 
+  connects to your app:
 
-  .. code-block:: typescript
-     :caption: ``src/realm/RealmApolloProvider.tsx``
-     
-     function createApolloClient(realmAppId: string, user: Realm.User): ApolloClient<NormalizedCacheObject> {
-       const graphql_url = `https://realm.mongodb.com/api/client/v2.0/app/${realmAppId}/graphql`;
-       
-       return new ApolloClient({
-         link: new HttpLink({
-           uri: graphql_url
-          }),
-         cache: new InMemoryCache(),
-       });
-     }
+  .. literalinclude:: RealmApolloProvider.codeblock.realmApolloProvider.js
+     :caption: ``src/graphql/RealmApolloProvider.js``
+     :emphasize-lines: 2-6
 ---
 title: Authenticate GraphQL Requests
 ref: authenticate-graph-ql-requests
 level: 4
 content: |
-  The ``createApolloClient()`` function now instantiates a client object, but
+  The ``createRealmApolloClient()`` function now instantiates a client object, but
   you won't be able to run any GraphQL queries or mutations just yet. Every
   GraphQL request must include an Authorization header that specifies a valid
   user access token. The current client does not include any Authorization
   headers, so all requests it makes will fail.
   
-  To fix this, update the ``createApolloClient()`` function to include the
+  To fix this, update the ``createRealmApolloClient()`` function to include the
   current user's access token in an Authorization header with every request:
 
-  .. code-block:: typescript
-     :caption: ``src/realm/RealmApolloProvider.tsx``
-     :emphasize-lines: 17
+  .. literalinclude:: RealmApolloProvider.codeblock.createRealmApolloClient.js
+     :caption: ``src/graphql/RealmApolloProvider.js``
+     :emphasize-lines: 4, 13
      
-     function createApolloClient(realmAppId: string, user: Realm.User): ApolloClient<NormalizedCacheObject> {
-       const graphql_url = `https://realm.mongodb.com/api/client/v2.0/app/${realmAppId}/graphql`;
-       
-       return new ApolloClient({
-         link: new HttpLink({
-           uri: graphql_url,
-           fetch: async (uri: RequestInfo, options: RequestInit) => {
-             if (!options.headers) {
-               options.headers = {} as Record<string, string>;
-             }
-             // Refreshing custom data also ensures a valid access token
-             await user.refreshCustomData();
-             const authenticatedOptions: RequestInit = {
-               ...options,
-               headers: {
-                 ...options.headers,
-                 Authorization: `Bearer ${user.accessToken}`
-               }
-             }
-             return fetch(uri, authenticatedOptions);
-           },
-          }),
-         cache: new InMemoryCache(),
-       });
-     }
-     }
 ...

source/includes/steps-task-tracker-web-realmapp.yaml

@@ -3,19 +3,15 @@ ref: create-a-realm-app-client
 level: 4
 content: |
   The app client is the primary interface to your Realm app from the SDK. In
-  ``src/realm/RealmApp.tsx``, add the following code immediately below the
-  imports at the top of the file to create the app client:
+  ``src/App.js``, replace ``"TODO"`` with your Realm App ID:
 
-  .. code-block:: typescript
-     :caption: ``src/realm/RealmApp.tsx``
-     
-     const REALM_APP_ID = "<Your App ID>"
-     const app = new Realm.App({ id: REALM_APP_ID });
+  .. literalinclude:: App.codeblock.appID.js
+     :caption: ``src/App.js``
   
   .. admonition:: Use Your App ID
      :class: note
      
-     Make sure to replace ``<Your App ID>`` with your app's unique
+     Make sure to replace ``"TODO"`` with your app's unique
      :guilabel:`App ID`. You can find your :guilabel:`App ID` by clicking the
      copy button next to the name of your app in the lefthand navigation of the
      Realm UI.
@@ -29,31 +25,14 @@ level: 4
 content: |
   The app client provides methods that allow you to authenticate and register
   users through the email/password authentication provider. In
-  ``src/realm/RealmApp.tsx``, the ``RealmApp`` component wraps these functions
+  ``src/RealmApp.js``, the ``RealmAppProvider`` component wraps these functions
   and keeps the app client in sync with local React state.
 
   These wrapping functions already have the state update calls but don't
   currently use the app client you created. You need to update the functions to
   actually call the SDK authentication and registration methods.
 
-  .. code-block:: typescript
-     :caption: ``src/realm/RealmApp.tsx``
-     :emphasize-lines: 3, 8-9, 15
-     
-     // Let new users register an account
-     const registerUser = async (email: string, password: string) => {
-       return await app.emailPasswordAuth.registerUser(email, password);
-     }
-     
-     // Let registered users log in
-     const logIn = async (email: string, password: string) => {
-       const credentials = Realm.Credentials.emailPassword(email, password);
-       await app.logIn(credentials);
-       setUser(app.currentUser);
-     }
-     
-     // Let logged in users log out
-     const logOut = async () => {
-       await app.logOut();
-       setUser(app.currentUser);
-     }
+  .. literalinclude:: final/realmAppProvider.js
+     :caption: ``src/RealmApp.tsx``
+     :emphasize-lines: 10, 16, 19
+

source/includes/task-tracker-web-client-base-file-structure.rst

@@ -2,22 +2,22 @@
     :copyable: False
     
     src/
-    ├── index.tsx
-    ├── realm/
-    │   ├── RealmApp.tsx
-    │   ├── RealmApolloProvider.tsx
-    │   ├── schema.graphql
-    │   └── operations.graphql
+    ├── index.js
+    ├── App.js
+    ├── RealmApp.js
+    ├── TaskApp.js
     ├── components/
-    │   ├── App.tsx
-    │   ├── Board.tsx
-    │   ├── LoginScreen.tsx
-    │   ├── Navbar.tsx
-    │   ├── TaskCard.tsx
-    │   ├── TaskDetail.tsx
-    │   ├── TaskLists.tsx
-    │   └── TaskView.tsx
-    └── hooks/
-       ├── useDraftTask.tsx
-       ├── useTaskLists.tsx
-       └── useTasks.tsx
+    │   ├── EditPermissionsModal.js
+    │   ├── Loading.js
+    │   ├── LoginScreen.js
+    │   ├── ProjectScreen.js
+    │   ├── SideBar.js
+    │   ├── StatusChange.js
+    │   ├── TaskContent.js
+    │   ├── TaskDetailModal.js
+    │   └── useChangeTaskStatusButton.js
+    └── graphql/
+       ├── RealmApolloProvider.js
+       ├── useProjects.js
+       ├── useTaskMutations.js
+       └── useTasks.js