# Course creation

### Process

1. Secure the code base - <https://github.com/j143/openmined>
2. Find a development environment
3. Mentally be prepared for the quantum of time required to complete this project
4. Components - Sanity CMS - yarn - Firebase
5. Know the components may not work out-of-the box
6. The course content is not yet created.
7. link <https://courses.onevara.com>

#### Checklist

* [x] Frontend working fine
* [x] Sanity configuration
* [x] Firebase api
* [ ] Cypress - <https://on.cypress.io/required-dependencies>

![Course dashboard](https://1074895821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MKpcZyxGXJcyzkNoKkm%2F-MVlnHjLYVDH6u5oy0Cx%2F-MVlnduASf2Ame-vqwkY%2Fimage.png?alt=media\&token=373e2693-c3a2-4e24-8a0a-c2badc9c1f58)

Course content - <https://github.com/OpenMined/openmined/blob/dev/apps/courses-e2e/src/integration/courses.spec.ts#L96>

![](https://1074895821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MKpcZyxGXJcyzkNoKkm%2F-MVlnHjLYVDH6u5oy0Cx%2F-MVlnYZUTksgr1eENyew%2Fimage.png?alt=media\&token=7242b4ee-80bd-4d7c-83cb-24b480482fea)

Auxiliary tools

1. nx - <https://nx.dev/latest/node/getting-started/cli-overview>

### Configuration

`.local.env`

```javascript
NX_FIREBASE_API_KEY=AIzaSyCsgXp-0CkvWsc-iTcO5PmbkU6F-_R8MPY
NX_FIREBASE_AUTH_DOMAIN=openmined-org-dev.firebaseapp.com
NX_FIREBASE_DATABASE_URL=https://openmined-org-dev.firebaseio.com
NX_FIREBASE_PROJECT_ID=openmined-org-dev
NX_FIREBASE_STORAGE_BUCKET=openmined-org-dev.appspot.com
NX_FIREBASE_MESSAGING_SENDER_ID=466298787757
NX_FIREBASE_APP_ID=1:466298787757:web:c9e0cc241b34835d7df324
NX_FIREBASE_MEASUREMENT_ID=G-PQ5T6T7932

NX_SANITY_COURSES_PROJECT_ID=rzeg7i8f
NX_SANITY_COURSES_DATASET=development
```

`.env`

```javascript
NX_FIREBASE_API_KEY=AIzaSyC4B2McdAHd8NsRWhFJUO5Ho9fzp4MY5Co
NX_FIREBASE_AUTH_DOMAIN=openmined-org.firebaseapp.com
NX_FIREBASE_DATABASE_URL=https://openmined-org.firebaseio.com
NX_FIREBASE_PROJECT_ID=openmined-org
NX_FIREBASE_STORAGE_BUCKET=openmined-org.appspot.com
NX_FIREBASE_MESSAGING_SENDER_ID=430689683505
NX_FIREBASE_APP_ID=1:430689683505:web:3a1be74e07cad9ab712d10
NX_FIREBASE_MEASUREMENT_ID=G-EC9MJ6CP8X

NX_SANITY_COURSES_PROJECT_ID=rzeg7i8f
NX_SANITY_COURSES_DATASET=production
```

1. Goto <https://console.firebase.google.com/project/onevara-courses/settings/general> Create a web app to receive the following credentials.
2. Database creation
   * [x] Database creation&#x20;
   * [x] <https://console.firebase.google.com/project/onevara-courses/firestore>
   * [x] Which database to choose - <https://firebase.google.com/docs/database/rtdb-vs-firestore?authuser=0>
   * [x] Cloud firestore location
   * [x] Create index - <https://firebase.google.com/docs/firestore/query-data/indexing?authuser=0#create_a_missing_index_through_an_error_message> &#x20;

![Firestore configuration](https://1074895821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MKpcZyxGXJcyzkNoKkm%2F-MVoxKFdQGMr33ji4fIH%2F-MVp4DboYAcLrGkkEWoq%2Fimage.png?alt=media\&token=ea5b9929-d85c-434d-91c9-c6015c23d037)

{% code title="for .env" %}

```javascript
var firebaseConfig = {
    apiKey: "AIzaSyD5cPfaE4y6UNUCJBJvGgkfTTKF3PNdWwo",
    authDomain: "onevara-courses.firebaseapp.com",
    projectId: "onevara-courses",
    storageBucket: "onevara-courses.appspot.com",
    messagingSenderId: "561704292197",
    appId: "1:561704292197:web:78633a0f954452b0b79b8c",
    measurementId: "G-B2S733DPKH"
  };

NX_FIREBASE_API_KEY=AIzaSyD5cPfaE4y6UNUCJBJvGgkfTTKF3PNdWwo
NX_FIREBASE_AUTH_DOMAIN=onevara-courses.firebaseapp.com
NX_FIREBASE_DATABASE_URL=https://onevara-courses.firebaseio.com
NX_FIREBASE_PROJECT_ID=onevara-courses
NX_FIREBASE_STORAGE_BUCKET=onevara-courses.appspot.com
NX_FIREBASE_MESSAGING_SENDER_ID=561704292197
NX_FIREBASE_APP_ID=1:561704292197:web:78633a0f954452b0b79b8c
NX_FIREBASE_MEASUREMENT_ID=G-B2S733DPKH

NX_SANITY_COURSES_PROJECT_ID=x6ltnsla
```

{% endcode %}

{% code title="for .local.env" %}

```javascript
  var firebaseConfig = {
    apiKey: "AIzaSyAbgi1VBJV1dC0n55EmVoKUHYsZg-eNwd4",
    authDomain: "onevara-courses-dev.firebaseapp.com",
    projectId: "onevara-courses-dev",
    storageBucket: "onevara-courses-dev.appspot.com",
    messagingSenderId: "1079044769160",
    appId: "1:1079044769160:web:e803eb87a5547b1bc9263d",
    measurementId: "G-RYMK55S6QK"
  };


NX_FIREBASE_API_KEY=AIzaSyAbgi1VBJV1dC0n55EmVoKUHYsZg-eNwd4
NX_FIREBASE_AUTH_DOMAIN=onevara-courses-dev.firebaseapp.com
NX_FIREBASE_DATABASE_URL=https://onevara-courses-dev.firebaseio.com
NX_FIREBASE_PROJECT_ID=onevara-courses-dev
NX_FIREBASE_STORAGE_BUCKET=onevara-courses-dev.appspot.com
NX_FIREBASE_MESSAGING_SENDER_ID=1079044769160
NX_FIREBASE_APP_ID=1:1079044769160:web:e803eb87a5547b1bc9263d
NX_FIREBASE_MEASUREMENT_ID=G-RYMK55S6QK

NX_SANITY_COURSES_PROJECT_ID=x6ltnsla
```

{% endcode %}

## Code

### Sanity

**`sanity.json`**

```javascript
{
  "root": true,
  "project": {
    "name": "Courses"
  },
  "api": {
    "projectId": "rzeg7i8f",
    "dataset": "production"
  },
  "plugins": [
    "@sanity/base",
    "@sanity/components",
    "@sanity/default-layout",
    "@sanity/default-login",
    "@sanity/desk-tool",
    "intl-input",
    "media"
  ],
  "env": {
    "development": {
      "api": {
        "dataset": "development"
      },
      "plugins": [
        "@sanity/vision"
      ]
    }
  },
  "parts": [
    {
      "name": "part:@sanity/base/schema",
      "path": "./schemas"
    },
    {
      "name": "part:@sanity/desk-tool/structure",
      "path": "./desk-structure.ts"
    }
  ]
}
```

`yarn start sanity-api`

Update `projectId` to `x6ltnsla`.

![Sanity studio](https://1074895821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MKpcZyxGXJcyzkNoKkm%2F-MWGBqXhAcYik0tRhsPx%2F-MWGDxr_JohgvELjWPVG%2Fimage.png?alt=media\&token=942d0160-c089-421e-b08d-3d88ec207869)

#### Sanity import data

.<https://www.sanity.io/docs/importing-data>

```bash
sanity dataset import <file.ndjson> <targetDataset>
```

#### Course content schema

![folder structure for sanity cms](https://1074895821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MKpcZyxGXJcyzkNoKkm%2F-MVlsFaBOjqdncOLjE5k%2F-MVlti-EgFUIsvXRZxQK%2Fimage.png?alt=media\&token=14e744ea-ee10-4271-b8ba-0eaf923f820e)

#### Sanity errors

`yarn build firebase-api`

![](https://1074895821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MKpcZyxGXJcyzkNoKkm%2F-MWVWj_uZnTRREqEM5yi%2F-MWVZEJN7mom7OWpY1_a%2Fimage.png?alt=media\&token=69c32974-a844-48a7-9fcd-f714899dee17)

### Firebase

**`firebase.json`**

| name                        | Type of entity    |
| --------------------------- | ----------------- |
| **`onevara-courses`**       | Organization name |
| **`onevara-courses-dev`**   | Organization name |
| **`onevara-education`**     | App nickname      |
| **`onevara-education-dev`** | App nickname      |

```javascript
{
  "firestore": {
    "rules": "apps/firebase-api/firestore.rules",
    "indexes": "apps/firebase-api/firestore.indexes.json"
  },
  "functions": {
    "source": "/"
  },
  "hosting": [
    {
      "target": "openmined-education",
      "public": "dist/apps/courses",
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    },
    {
      "target": "openmined-education-dev",
      "public": "dist/apps/courses",
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ],
  "storage": {
    "rules": "apps/firebase-api/storage.rules"
  },
  "emulators": {
    "auth": {
      "port": 5500
    },
    "functions": {
      "port": 5501
    },
    "firestore": {
      "port": 5502
    },
    "ui": {
      "enabled": true
    }
  }
}
```

`yarn test firebase-api`

.<https://firebase.google.com/docs/cli#the_firebasejson_file>

.<https://firebase.google.com/docs/cli/targets#configure_your_firebasejson_file_to_use_deploy_targets>

.<https://firebase.google.com/docs/functions/manage-functions#deploy_functions>

#### Region

![issue related to region europe-west1](https://1074895821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MKpcZyxGXJcyzkNoKkm%2F-MWKEdUrCzjNGGeDRkw5%2F-MWKuP76S0amFoV_7HsK%2Fimage.png?alt=media\&token=0ca0f165-4269-4153-b3d6-e7ba6ea8c3a7)

```bash
firebase deploy --only hosting:onevara-education
firebase deploy --only functions:onevara-education
```

#### Firebase deployment

Change the `.env` credentials to that of `.local.env` still the same error

```bash
$ firebase deploy --only "functions,firestore:rules,storage"
!  functions: package.json indicates an outdated version of firebase-functions.
Please upgrade using npm install --save firebase-functions@latest in your functions directory.

=== Deploying to 'onevara-courses-dev'...

i  deploying storage, firestore, functions


There was an issue deploying your functions. Verify that your project has a Google App Engine instance setup at https://console.cloud.google.com/appengine and try again. If this issue persists, please contact support.

Error: HTTP Error: 404, Could not find Application "onevara-courses-dev".
```

{% code title="firebase deploy -P onevara-courses-dev" %}

```bash
=== Deploying to 'onevara-courses-dev'...

i  deploying storage, firestore, functions, hosting


There was an issue deploying your functions. Verify that your project has a Google App Engine instance setup at https://console.cloud.google.com/appengine and try again. If this issue persists, please contact support.

Error: HTTP Error: 404, Could not find Application "onevara-courses-dev".
```

{% endcode %}

Based on the error message <https://console.firebase.google.com/project/onevara-courses-dev/firestore/> has been created in `us-central`.

![](https://1074895821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MKpcZyxGXJcyzkNoKkm%2F-MWVWj_uZnTRREqEM5yi%2F-MWVX2Zqmh4yLyIzy5yq%2Fimage.png?alt=media\&token=74086781-842b-4572-9c73-fe8036a4fdd6)

#### Collection

![](https://1074895821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MKpcZyxGXJcyzkNoKkm%2F-MWVgciq3yyHaL57nM-R%2F-MWW1Zab-Jak9cHnpdKi%2Fimage.png?alt=media\&token=bafe7feb-1abf-48cf-bd40-50df94c58e3a)

#### Nodejs API

.<https://googleapis.dev/nodejs/firestore/latest/DocumentReference.html>

### Cypress

![](https://1074895821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MKpcZyxGXJcyzkNoKkm%2F-MVlySwaqSMmhhysqQzt%2F-MVlzZpyD_arkNqHksEJ%2Fimage.png?alt=media\&token=e8901bb3-ab5e-4295-9d0b-a5dcf063a6b3)

```bash
 yarn e2e courses-e2e
```

![](https://1074895821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MKpcZyxGXJcyzkNoKkm%2F-MVlySwaqSMmhhysqQzt%2F-MVm0l3qxTVFd2C1D-kS%2Fimage.png?alt=media\&token=c9c7325d-3a17-48e9-b364-e8b9059bdc4c)

### Billing

.<https://console.firebase.google.com/project/onevara-courses/usage/details>

![](https://1074895821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MKpcZyxGXJcyzkNoKkm%2F-MWGEMSTrp891fvFTrqW%2F-MWGJq6396PtSuCVatqr%2Fimage.png?alt=media\&token=a62c61fd-d463-4d85-acca-6013b26b324e)

## Errors

#### 1 Uncaught TypeError

```bash
Uncaught TypeError: data.sort is not a function
    at push../routes/homepage/Learn.tsx.__webpack_exports__.default (/main.js:8811)
    at renderWithHooks (/vendor.js:115827)
    at updateFunctionComponent (/vendor.js:118198)
    at beginWork (/vendor.js:119905)
    at HTMLUnknownElement.callCallback (/vendor.js:104787)
    at Object.invokeGuardedCallbackDev (/vendor.js:104836)
    at invokeGuardedCallback (/vendor.js:104898)
    at beginWork$1 (/vendor.js:124801)
    at performUnitOfWork (/vendor.js:123616)
    at workLoopSync (/vendor.js:123544)
```

```javascript
// webpack:////workspace/onevara/libs/shared/data-access-sanity/src/index.tsx
export const useSanity = (query) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const { client } = useContext(SanityContext);

  const prepareData = (d) => {
    Object.keys(d).forEach((i) => {
      const elem = d[i];

      // Make sure we convert all breaking spaces to <br /> tags
      if (typeof elem === 'string' && elem.includes('\n')) {
        d[i] = (
          <span
            dangerouslySetInnerHTML={{
              __html: elem.split('\n').join('<br />'),
            }}
          />
        );
      }
    });

    return d;
  };
```

#### 2 React will try to recreate this component tree

from scratch using the error boundary you provided, ErrorBoundary. logCapturedError @ vendor.js:120927

```bash
vendor.js:120927 The above error occurred in one of your React components:

    at push../routes/homepage/Learn.tsx.__webpack_exports__.default (https://onevara-education.web.app/main.js:8803:3)
    at push.../../../libs/shared/util-page/src/index.tsx.__webpack_exports__.default (https://onevara-education.web.app/main.js:366:5)
    at div
    at https://onevara-education.web.app/vendor.js:31696:73
    at RouteWrapper (https://onevara-education.web.app/main.js:9275:13)
    at D (https://onevara-education.web.app/vendor.js:132094:673)
    at E (https://onevara-education.web.app/vendor.js:132097:804)
    at Suspense
    at SuspenseWithPerf (https://onevara-education.web.app/vendor.js:136028:23)
    at x (https://onevara-education.web.app/vendor.js:132096:23)
    at App (https://onevara-education.web.app/main.js:607:85)
    at ErrorBoundary (https://onevara-education.web.app/vendor.js:58213:47)
    at ErrorBoundary (https://onevara-education.web.app/main.js:1962:1)
    at SEOProvider (https://onevara-education.web.app/main.js:359:3)
    at ColorModeProvider (https://onevara-education.web.app/vendor.js:2997:5)
    at ThemeProvider (https://onevara-education.web.app/vendor.js:31730:71)
    at ChakraProvider (https://onevara-education.web.app/vendor.js:17385:5)
    at r (https://onevara-education.web.app/vendor.js:129077:5327)
    at FirebaseAppProvider (https://onevara-education.web.app/vendor.js:135615:32)
    at WrappedApp
```

#### 3 Can't perform a React state update

```bash
vendor.js:100909 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at push../routes/homepage/Learn.tsx.__webpack_exports__.default (https://onevara-education.web.app/main.js:8803:3)
    at push.../../../libs/shared/util-page/src/index.tsx.__webpack_exports__.default (https://onevara-education.web.app/main.js:366:5)
    at div
    at https://onevara-education.web.app/vendor.js:31696:73
    at RouteWrapper (https://onevara-education.web.app/main.js:9275:13)
    at D (https://onevara-education.web.app/vendor.js:132094:673)
    at E (https://onevara-education.web.app/vendor.js:132097:804)
    at Suspense
    at SuspenseWithPerf (https://onevara-education.web.app/vendor.js:136028:23)
    at x (https://onevara-education.web.app/vendor.js:132096:23)
    at App (https://onevara-education.web.app/main.js:607:85)
```

#### 4 Signup or signin error

![](https://1074895821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MKpcZyxGXJcyzkNoKkm%2F-MWf8KXS1_7mI10wZP_f%2F-MWfFC-QOCvJvxuY87Ri%2Fimage.png?alt=media\&token=00e1c59d-aeaa-4289-8f73-bc44d104ca1f)

This is due to development server using `.local.env` and pinging with development `projectId`.

#### 5 Sanity is not yet connected

data received from

```bash
https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?database=projects%2Fonevara-courses%2Fdatabases%2F(default)&gsessionid=_bUTEJirdogmUzE0uwJeDAdhRtPSNKoZp0zKiTWXGb0&VER=8&RID=rpc&SID=YBZ06ScVEIwtB4bWMWa2UQ&CI=0&AID=33&TYPE=xmlhttp&zx=9usy97on9ofu&t=1
```

is

```bash
29
[[34,["noop"]],[35,["noop"]]]
```

#### 6 Property '\_path' does not exist on type ' '

```bash
TS2551: Property '_path' does not exist on type 'DocumentReference<DocumentData>'
```

Possible solution could be <https://firebase.google.com/docs/functions/beta-v1-diff>

## Errors2

.<https://github.com/sanity-io/design/blob/next/CONTRIBUTING.md>

1. `yarn dev:docs`

An error occured while attempting to reach the Sanity API.

1. Unable to build sanity ui project documentation

## Lint

.<https://eslint.org/docs/user-guide/getting-started>

```bash
yarn add eslint --dev
yarn run eslint --init
```

.<https://eslint.org/docs/user-guide/configuring/>

### Updates

Add seed data to firestore firebase

Resources. [how do I seed data to firebase firestore](https://stackoverflow.com/questions/63004211/how-do-i-seed-data-to-firebase-firestore)

Check that queries are functioning as intended.

```c
# queries.ts
# Sanity Query for homepageCourses
*[_type == "course"] {

  visual {
    "default": default.asset -> url,
    "full": full.asset -> url
  },
}

# output

{"ms":328,"query":"*[_type == \"course\"] { visual { \"default\": default.asset -\u003e url, \"full\": full.asset -\u003e url }, }","result":[{"visual":{"default":"https://cdn.sanity.io/images/x6ltnsla/production/da22bd244116b6f11efaec65e71273a1149b5804-299x106.png"}},{}]}
```

Keep the fork up to date with the OS repository

```bash
git fetch https://github.com/openmined/openmined dev
git merge https://github.com/openmined/openmined dev
```

## TODO

1. Create design tutorials, and courses
2. make sanity work