├── .circleci
    └── config.yml
├── .github
    ├── renovate.json5
    └── workflows
    │   └── update-dependencies.yml
├── .gitignore
├── CODEOWNERS
├── README.md
├── client
    ├── README.md
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── _redirects
    │   ├── favicon.ico
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   ├── robots.txt
    │   └── space_kitty_pattern.png
    ├── src
    │   ├── assets
    │   │   ├── cat_logo.png
    │   │   ├── cat_logo@2x.png
    │   │   ├── space_cat_logo.png
    │   │   ├── space_cat_logo@2x.png
    │   │   └── space_kitty_pattern.svg
    │   ├── components
    │   │   ├── __tests__
    │   │   │   ├── module-detail.js
    │   │   │   ├── modules-navigation.js
    │   │   │   ├── query-result.js
    │   │   │   └── track-detail.js
    │   │   ├── content-section.js
    │   │   ├── footer.js
    │   │   ├── header.js
    │   │   ├── index.js
    │   │   ├── layout.js
    │   │   ├── md-content.js
    │   │   ├── module-detail.js
    │   │   ├── modules-navigation.js
    │   │   ├── query-result.js
    │   │   └── track-detail.js
    │   ├── containers
    │   │   ├── __tests__
    │   │   │   └── track-card.js
    │   │   └── track-card.js
    │   ├── index.js
    │   ├── pages
    │   │   ├── __tests__
    │   │   │   └── tracks.js
    │   │   ├── index.js
    │   │   └── tracks.js
    │   ├── styles.js
    │   └── utils
    │   │   ├── helpers.js
    │   │   ├── test-utils.js
    │   │   └── useWindowDimensions.js
    └── vite.config.js
├── final
    ├── client
    │   ├── README.md
    │   ├── index.html
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── public
    │   │   ├── _redirects
    │   │   ├── favicon.ico
    │   │   ├── logo192.png
    │   │   ├── logo512.png
    │   │   ├── manifest.json
    │   │   ├── robots.txt
    │   │   └── space_kitty_pattern.png
    │   ├── src
    │   │   ├── assets
    │   │   │   ├── cat_logo.png
    │   │   │   ├── cat_logo@2x.png
    │   │   │   ├── space_cat_logo.png
    │   │   │   ├── space_cat_logo@2x.png
    │   │   │   └── space_kitty_pattern.svg
    │   │   ├── components
    │   │   │   ├── __tests__
    │   │   │   │   ├── module-detail.js
    │   │   │   │   ├── modules-navigation.js
    │   │   │   │   ├── query-result.js
    │   │   │   │   └── track-detail.js
    │   │   │   ├── content-section.js
    │   │   │   ├── footer.js
    │   │   │   ├── header.js
    │   │   │   ├── index.js
    │   │   │   ├── layout.js
    │   │   │   ├── md-content.js
    │   │   │   ├── module-detail.js
    │   │   │   ├── modules-navigation.js
    │   │   │   ├── query-result.js
    │   │   │   └── track-detail.js
    │   │   ├── containers
    │   │   │   ├── __tests__
    │   │   │   │   └── track-card.js
    │   │   │   └── track-card.js
    │   │   ├── index.js
    │   │   ├── pages
    │   │   │   ├── __tests__
    │   │   │   │   └── tracks.js
    │   │   │   ├── index.js
    │   │   │   └── tracks.js
    │   │   ├── styles.js
    │   │   └── utils
    │   │   │   ├── helpers.js
    │   │   │   ├── test-utils.js
    │   │   │   └── useWindowDimensions.js
    │   └── vite.config.js
    └── server
    │   ├── README.md
    │   ├── package-lock.json
    │   ├── package.json
    │   └── src
    │       ├── datasources
    │           └── track-api.js
    │       ├── index.js
    │       ├── resolvers.js
    │       └── schema.js
└── server
    ├── README.md
    ├── package-lock.json
    ├── package.json
    └── src
        ├── index.js
        └── schema.js


/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | version: 2.1
 2 | 
 3 | orbs:
 4 |   secops: apollo/circleci-secops-orb@2.0.6
 5 | 
 6 | workflows:
 7 |   security-scans:
 8 |     jobs:
 9 |       - secops/gitleaks:
10 |           context:
11 |             - platform-docker-ro
12 |             - github-orb
13 |             - secops-oidc
14 |           git-base-revision: <<#pipeline.git.base_revision>><<pipeline.git.base_revision>><</pipeline.git.base_revision >>
15 |           git-revision: << pipeline.git.revision >>
16 |       - secops/semgrep:
17 |           context:
18 |             - secops-oidc
19 |             - github-orb
20 |           git-base-revision: <<#pipeline.git.base_revision>><<pipeline.git.base_revision>><</pipeline.git.base_revision >>
21 | 


--------------------------------------------------------------------------------
/.github/renovate.json5:
--------------------------------------------------------------------------------
 1 | {
 2 |   // Boilerplate
 3 |   $schema: "https://docs.renovatebot.com/renovate-schema.json",
 4 | 
 5 |   // This will group all patch- and minor-level updates into a single PR
 6 |   // rather than generating 1 PR per dependency (which is the current default)
 7 |   // This just helps reduce noise on the repo.
 8 |   extends: ["group:allNonMajor"],
 9 | 
10 |   // Disables dependency dashboard - it doesn't do anything on
11 |   // repos that don't support issues
12 |   dependencyDashboard: false,
13 | 
14 |   // Resetting to the default PR creation configuration
15 |   // The default config overrides this.
16 |   // Realized I also need to change this because you don't have issues
17 |   // Normally, the dependency dashboard would tell you if PRs are holding
18 |   // because they're waiting for tests to pass.
19 |   // With this set to "immediate", you'll be able to see any stuck pulls
20 |   prCreation: "immediate",
21 | 
22 |   // Prevent automerging any lockfile mainteance
23 |   // there's an ongoing discussion around whether or not 
24 |   // we should even have lockfile maintenance on by default
25 |   // here: https://apollograph.slack.com/archives/C02TG9NHM/p1689259568243699
26 |   lockFileMaintenance: {
27 |     automerge: false,
28 |   },
29 | 
30 |   packageRules: [
31 |     // Prevent automerging for PRs that aren't lockfile maintenance
32 |     {
33 |       matchPackagePatterns: ["*"],
34 |       automerge: false,
35 |       rangeStrategy: "replace"
36 |     },
37 |     // Example of pinning a dependency to a specific version or range of versions
38 |     // There's a ton of flexibility for doing this type of thing
39 |     // if you're looking for other options, check out the various config options:
40 |     // https://docs.renovatebot.com/configuration-options/#packagerules
41 |     {
42 |       matchPackageNames: ["react"],
43 |       allowedVersions: "16.x",
44 |     },
45 |   ],
46 | }
47 | 


--------------------------------------------------------------------------------
/.github/workflows/update-dependencies.yml:
--------------------------------------------------------------------------------
  1 | # What to call this GitHub Action workflow in the GitHub browser UI
  2 | name: Update Dependencies
  3 | 
  4 | # Set up environment variables for this runner
  5 | env:
  6 |   # For using `gh`, the GitHub CLI (to create a PR):
  7 |   GH_TOKEN: ${{secrets.GITHUB_TOKEN}}
  8 |   # The branch to commit updated dependency versions to
  9 |   BRANCH_NAME: update-deps
 10 | 
 11 | # When to run this GitHub Action
 12 | on:
 13 |   # Run when changes pushed to main branch (Uncomment for debugging)
 14 |   # push:
 15 |   #   branches:
 16 |   #     - main
 17 |   schedule:
 18 |     # Run every day at midnight UTC
 19 |     # Note: During peak load times, GitHub may delay this time
 20 |     - cron: '0 0 * * *'
 21 | 
 22 | jobs:
 23 |   update_deps: # job name
 24 |     # Only run this GitHub Action on the original repo, not on forks
 25 |     if: github.repository_owner == 'apollographql'
 26 |     runs-on: ubuntu-latest
 27 |     steps:
 28 |       - uses: actions/checkout@v3
 29 |         with:
 30 |           # Fetch all branches when checking out the repo
 31 |           fetch-depth: 0
 32 |       - uses: actions/setup-node@v3
 33 |         with:
 34 |           node-version: 18
 35 |       - name: 'Check out branch'
 36 |         run: |
 37 |           git branch --remotes
 38 |           echo "*********"
 39 | 
 40 |           # Check if a branch already exists with the specified BRANCH_NAME.
 41 |           CHECK_BRANCH_OUTPUT=$(git branch --remotes | grep "origin/${BRANCH_NAME}" | wc -l )
 42 |           # Strip the spaces from CHECK_BRANCHES_OUTPUT.
 43 |           # Will be set to 1 if a matching branch is found, or 0 otherwise.
 44 |           DOES_BRANCH_EXIST=${CHECK_BRANCH_OUTPUT// }
 45 | 
 46 |           # If it does, check it out
 47 |           if [ $DOES_BRANCH_EXIST = 1 ]
 48 |           then
 49 |             echo "Checking out existing branch: ${BRANCH_NAME}"
 50 |             git checkout $BRANCH_NAME
 51 |           # If it doesn't, check out a new branch with that name
 52 |           else
 53 |             echo "Checking out a new branch: ${BRANCH_NAME}"
 54 |             git checkout -b $BRANCH_NAME
 55 |           fi
 56 |       - name: 'Install dependencies'
 57 |         run: |
 58 |           cd client && npm install && cd ..
 59 |           cd server && npm install && cd ..
 60 |           cd final/client && npm install && cd ../..
 61 |           cd final/server && npm install && cd ../..
 62 |       - name: 'Update dependencies'
 63 |         run: |
 64 |           cd client && npm update && cd ..
 65 |           cd server && npm update && cd ..
 66 |           cd final/client && npm update && cd ../..
 67 |           cd final/server && npm update && cd ../..
 68 |       - name: 'Commit & push changes'
 69 |         run: |
 70 |           git status
 71 |           echo "*********"
 72 | 
 73 |           # Check if there are unstaged changes to commit
 74 |           CHECK_FOR_UNSTAGED_CHANGES=$(git status | grep "Changes not staged for commit:" | wc -l)
 75 |           # Strip the spaces from CHECK_FOR_UNSTAGED_CHANGES.
 76 |           # Will be set to 1 if there are changes to be commited, or 0 otherwise.
 77 |           UNSTAGED_CHANGES_EXIST=${CHECK_FOR_UNSTAGED_CHANGES// }
 78 | 
 79 |           if [ $UNSTAGED_CHANGES_EXIST = 1 ]
 80 |           then
 81 |             # Commit and push changes
 82 |             git config user.name github-actions
 83 |             git config user.email github-actions@github.com
 84 |             git add .
 85 |             git commit -m "chore: updated dependencies"
 86 |             git push --set-upstream origin $BRANCH_NAME
 87 |             echo "Pushed changes to remote branch $BRANCH_NAME"
 88 |           fi
 89 |       - name: 'Open pull request'
 90 |         run: |
 91 |           git branch --remotes
 92 |           echo "*********"
 93 | 
 94 |           # Check if a remote branch exists with the specified BRANCH_NAME.
 95 |           CHECK_BRANCH_OUTPUT=$(git branch --remotes | grep "origin/${BRANCH_NAME}" | wc -l )
 96 |           # Strip the spaces from CHECK_BRANCHES_OUTPUT.
 97 |           # Will be set to 1 if a matching branch is found, or 0 otherwise.
 98 |           DOES_BRANCH_EXIST=${CHECK_BRANCH_OUTPUT// }
 99 | 
100 |           # If there isn't a remote branch, we can't create a PR, so return early.
101 |           if [ $DOES_BRANCH_EXIST != 1 ]
102 |           then
103 |             echo "No remote branch $BRANCH_NAME. Exiting without opening a pull request."
104 |             return
105 |           fi
106 | 
107 |           gh pr status --json number,state
108 |           echo "*********"
109 | 
110 |           # Check if an open pull request already exists for the current branch.
111 |           # Will be set to "OPEN" if PR is found for the current branch.
112 |           # Otherwise, may be set to "CLOSED", "MERGED", or empty string (if no PRs exist for current branch yet).
113 |           CURRENT_BRANCH_PR_STATE=$(gh pr status --json number,state --jq ".currentBranch?.state")
114 | 
115 |           # If there isn't a PR for this branch yet, create one.
116 |           if [ "$CURRENT_BRANCH_PR_STATE" != "OPEN" ]
117 |           then
118 |             echo "Creating a new PR using branch: ${BRANCH_NAME}"
119 |             gh pr create --fill
120 |           fi
121 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | .env


--------------------------------------------------------------------------------
/CODEOWNERS:
--------------------------------------------------------------------------------
1 | # This file was automatically generated by the Apollo SecOps team
2 | # Please customize this file as needed prior to merging.
3 | 
4 | * @apollographql/deved
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Odyssey Lift-off II: Resolvers
 2 | 
 3 | Welcome to the companion app of Odyssey Lift-off II! You can [find the course lessons and instructions on Odyssey](https://odyssey.apollographql.com/lift-off-part2), Apollo's learning platform.
 4 | 
 5 | You can [preview the completed demo app here](https://lift-off-client-demo.netlify.app/).
 6 | 
 7 | ## How to use this repo
 8 | 
 9 | The course will walk you step by step on how to implement the features you see in the demo app. This codebase is the starting point of your journey!
10 | 
11 | There are 3 main folders:
12 | 
13 | - `server`: The starting point of our GraphQL server.
14 | - `client`: The starting point of our React application.
15 | - `final`: The final stage of both the server and client folders, with all of the steps and code completed!
16 | 
17 | To get started:
18 | 
19 | 1. Navigate to the `server` folder.
20 | 1. Run `npm install`.
21 | 1. Run `npm start`.
22 | 
23 | This will start the GraphQL API server.
24 | 
25 | In another Terminal window,
26 | 
27 | 1. Navigate to the `client` folder.
28 | 1. Run `npm install`.
29 | 1. Run `npm start`.
30 | 
31 | This will open up `localhost:3000` in your web browser.
32 | 
33 | ## Getting Help
34 | 
35 | For any issues or problems concerning the course content, please refer to the [Odyssey topic in our community forums](https://community.apollographql.com/tags/c/help/6/odyssey).
36 | 


--------------------------------------------------------------------------------
/client/README.md:
--------------------------------------------------------------------------------
1 | # Catstronauts - client
2 | 
3 | The starting point of the `client` code for Odyssey Lift-off II course.
4 | 


--------------------------------------------------------------------------------
/client/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta name="description" content="Apollo Lift-Off Demo App" />
 9 |     <link rel="apple-touch-icon" href="/logo192.png" />
10 |     <!--
11 |       manifest.json provides metadata used when your web app is installed on a
12 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
13 |     -->
14 |     <link rel="manifest" href="/manifest.json" />
15 |     <title>Catstronauts</title>
16 |   </head>
17 |   <body>
18 |     <noscript>You need to enable JavaScript to run this app.</noscript>
19 |     <div id="root"></div>
20 |     <script type="module" src="/src/index.js"></script>
21 |     <!--
22 |       This HTML file is a template.
23 |       If you open it directly in the browser, you will see an empty page.
24 | 
25 |       You can add webfonts, meta tags, or analytics to this file.
26 |       The build step will place the bundled scripts into the <body> tag.
27 | 
28 |       To begin the development, run `npm start` or `yarn start`.
29 |       To create a production bundle, use `npm run build` or `yarn build`.
30 |     -->
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "catstronauts-client",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "description": "front-end demo app for Apollo's lift-off II course",
 6 |   "dependencies": {
 7 |     "@apollo/client": "^3.7.16",
 8 |     "@apollo/space-kit": "^9.3.1",
 9 |     "@emotion/cache": "^11.4.0",
10 |     "@emotion/core": "^10.1.1",
11 |     "@emotion/react": "^11.4.0",
12 |     "@emotion/styled": "^11.3.0",
13 |     "graphql": "^15.3.0",
14 |     "react": "^18.2.0",
15 |     "react-dom": "^18.2.0",
16 |     "react-markdown": "^9.0.1",
17 |     "react-player": "^2.14.1",
18 |     "react-router-dom": "^6.22.0"
19 |   },
20 |   "scripts": {
21 |     "test": "vitest",
22 |     "start": "vite",
23 |     "build": "vite build"
24 |   },
25 |   "browserslist": {
26 |     "production": [
27 |       ">0.2%",
28 |       "not dead",
29 |       "not op_mini all"
30 |     ],
31 |     "development": [
32 |       "last 1 chrome version",
33 |       "last 1 firefox version",
34 |       "last 1 safari version"
35 |     ]
36 |   },
37 |   "devDependencies": {
38 |     "@testing-library/jest-dom": "^4.2.4",
39 |     "@testing-library/react": "^9.3.2",
40 |     "@testing-library/user-event": "^7.1.2",
41 |     "@vitejs/plugin-react": "^4.0.1",
42 |     "@vitest/ui": "^0.34.0",
43 |     "happy-dom": "^9.20.3",
44 |     "jest": "^27.5.1",
45 |     "vite": "^4.5.1",
46 |     "vitest": "^0.34.0"
47 |   },
48 |   "overrides": {
49 |     "nth-check": "2.1.1"
50 |   },
51 |   "main": "src/index.js",
52 |   "author": "Raphael Terrier @R4ph-t",
53 |   "license": "MIT"
54 | }
55 | 


--------------------------------------------------------------------------------
/client/public/_redirects:
--------------------------------------------------------------------------------
1 | /*    /index.html   200
2 | 


--------------------------------------------------------------------------------
/client/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/odyssey-lift-off-part2/c6f00b826d4973fdc7198a48cc275cb90f95d455/client/public/favicon.ico


--------------------------------------------------------------------------------
/client/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/odyssey-lift-off-part2/c6f00b826d4973fdc7198a48cc275cb90f95d455/client/public/logo192.png


--------------------------------------------------------------------------------
/client/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/odyssey-lift-off-part2/c6f00b826d4973fdc7198a48cc275cb90f95d455/client/public/logo512.png


--------------------------------------------------------------------------------
/client/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/client/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/client/public/space_kitty_pattern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/odyssey-lift-off-part2/c6f00b826d4973fdc7198a48cc275cb90f95d455/client/public/space_kitty_pattern.png


--------------------------------------------------------------------------------
/client/src/assets/cat_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/odyssey-lift-off-part2/c6f00b826d4973fdc7198a48cc275cb90f95d455/client/src/assets/cat_logo.png


--------------------------------------------------------------------------------
/client/src/assets/cat_logo@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/odyssey-lift-off-part2/c6f00b826d4973fdc7198a48cc275cb90f95d455/client/src/assets/cat_logo@2x.png


--------------------------------------------------------------------------------
/client/src/assets/space_cat_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/odyssey-lift-off-part2/c6f00b826d4973fdc7198a48cc275cb90f95d455/client/src/assets/space_cat_logo.png


--------------------------------------------------------------------------------
/client/src/assets/space_cat_logo@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/odyssey-lift-off-part2/c6f00b826d4973fdc7198a48cc275cb90f95d455/client/src/assets/space_cat_logo@2x.png


--------------------------------------------------------------------------------
/client/src/assets/space_kitty_pattern.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:fi="http://pattern.flaticon.com/" x="0" y="0" width="700" height="350" viewBox="0 0 700 350"><rect x="0px" y="0px" width="100%" height="100%" opacity="0" fill="#ffffff"/><defs><g transform="matrix(0.09496202146658489 0.017493003703064697 -0.017493003703064697 0.09496202146658489 215.84477146984858 71.1779132504656)" id="L1_0"><path d="m495.513 424.878a81.368 81.368 0 0 0 .487-8.878 80.091 80.091 0 0 0 -80-80h-8a24 24 0 0 1 0-48h32a28 28 0 0 0 0-56h-32a80.133 80.133 0 0 0 -76.585 56.9 225.667 225.667 0 0 0 -19.729-34.366 223.259 223.259 0 0 0 -106.452-82.184 8.03 8.03 0 0 1 -5.234-7.507v-140.843a8 8 0 0 0 -9.94-7.761l-7.46 1.861a53.8 53.8 0 0 0 -36.036 29.9h-61.128a53.8 53.8 0 0 0 -36.036-29.9l-7.46-1.861a8 8 0 0 0 -9.94 7.761v64h16v-53.665a37.883 37.883 0 0 1 24.41 24.2 8 8 0 0 0 7.59 5.465h72a8 8 0 0 0 7.59-5.47 37.886 37.886 0 0 1 24.41-24.196v130.509a24.091 24.091 0 0 0 15.7 22.521 208.309 208.309 0 0 1 136.3 195.467v97.169h-182.987a32.057 32.057 0 0 1 30.987-24h24a8 8 0 0 0 8-8v-40a72.081 72.081 0 0 1 72-72v-16a88.1 88.1 0 0 0 -88 88v32h-16a47.8 47.8 0 0 0 -32 12.261v-148.261h-16v176h-56v-6.111a20.832 20.832 0 0 1 11.578-18.734 8 8 0 0 0 4.422-7.155v-144h-16v139.446a36.709 36.709 0 0 0 -16 30.443v6.111h-32v-6.111a20.832 20.832 0 0 1 11.578-18.734 8 8 0 0 0 4.422-7.155v-344h-16v339.446a36.709 36.709 0 0 0 -16 30.443v14.111a8 8 0 0 0 8 8h392a80.139 80.139 0 0 0 75.446-53.334l-15.086-5.332a64.113 64.113 0 0 1 -60.36 42.666h-64v-24h64a40 40 0 0 0 0-80h-8a64 64 0 0 1 0-128h32a12 12 0 0 1 0 24h-32a40 40 0 0 0 0 80h8a64.072 64.072 0 0 1 64 64 65.03 65.03 0 0 1 -.392 7.122zm-87.513-32.878h8a24 24 0 0 1 0 48h-64v-57.169q0-7.132-.452-14.2a79.749 79.749 0 0 0 56.452 23.369z" fill="#cfcfcf"/><circle cx="80" cy="96" r="16" fill="#cfcfcf"/><circle cx="152" cy="96" r="16" fill="#cfcfcf"/><path d="m88 160h8a23.9 23.9 0 0 0 16-6.126 23.9 23.9 0 0 0 16 6.126h8a24.027 24.027 0 0 0 24-24h-16a8.009 8.009 0 0 1 -8 8h-8a8.009 8.009 0 0 1 -8-8c0-.232-.015-.46-.035-.687a11.992 11.992 0 0 0 -3.965-23.313h-8a11.992 11.992 0 0 0 -3.965 23.313c-.02.227-.035.455-.035.687a8.009 8.009 0 0 1 -8 8h-8a8.009 8.009 0 0 1 -8-8h-16a24.027 24.027 0 0 0 24 24z" fill="#cfcfcf"/></g><g transform="matrix(-0.024977943364550337 -0.08855815536434979 0.08855815536434979 -0.024977943364550337 218.67010590089325 165.9926586600161)" id="L1_5"><circle cx="10" cy="500" r="10" fill="#cfcfcf"/><circle cx="267" cy="245" r="10" fill="#cfcfcf"/><path d="M398.479,118.032c-8.071-8.072-18.802-12.516-30.216-12.516c-11.414,0-22.146,4.446-30.216,12.516    c-16.661,16.662-16.661,43.772,0,60.433c8.332,8.331,19.272,12.495,30.216,12.495c10.941,0,21.886-4.166,30.216-12.495    C415.14,161.803,415.14,134.693,398.479,118.032z M384.282,164.266c-8.833,8.832-23.206,8.832-32.037,0    c-8.833-8.832-8.833-23.204,0-32.037c4.279-4.279,9.967-6.635,16.018-6.635c6.051,0,11.739,2.356,16.018,6.635    C393.114,141.062,393.114,155.434,384.282,164.266z" fill="#cfcfcf"/><path d="M125.409,411.45c-4.964-2.472-10.99-0.451-13.462,4.512l-11.958,24.015c-5.2,10.441-15.658,17.423-27.296,18.219    l-13.908,0.952c-2.351,0.157-3.897-1.014-4.612-1.729s-1.889-2.264-1.729-4.613l0.952-13.907    c0.797-11.637,7.779-22.096,18.219-27.296l24.014-11.958c4.964-2.472,6.984-8.499,4.512-13.462    c-2.471-4.963-8.498-6.984-13.462-4.512l-24.014,11.958c-16.792,8.362-28.02,25.182-29.302,43.898l-0.952,13.907    c-0.514,7.507,2.242,14.863,7.562,20.183c4.898,4.898,11.523,7.624,18.403,7.624c0.591,0,1.186-0.02,1.78-0.061l13.908-0.952    c18.716-1.281,35.536-12.508,43.898-29.302l11.958-24.014C132.392,419.948,130.372,413.922,125.409,411.45z" fill="#cfcfcf"/><path d="M505.07,8.18c-4.711-4.641-11.201-7.068-17.793-6.639l-9.348,0.596c-83.819,5.351-162.262,45.81-215.215,111.004    L240.71,140.23l-57.583-1.691c-0.098-0.003-0.197-0.004-0.294-0.004c-45.668,0-88.603,17.784-120.896,50.076L2.959,247.59    c-2.805,2.805-3.696,7-2.272,10.702c1.424,3.703,4.894,6.221,8.856,6.423l124.844,6.414l-5.09,6.267    c-2.565,3.159-2.971,7.553-1.026,11.127c1.956,3.596,4.006,7.135,6.144,10.617l-29.606,35.147    c-2.531,3.005-3.076,7.211-1.397,10.763c6.467,13.665,15.05,25.943,25.514,36.493c10.718,10.808,23.251,19.646,37.249,26.271    c1.368,0.648,2.835,0.965,4.293,0.965c2.261,0,4.503-0.764,6.327-2.243c6.378-5.174,13.731-11.311,20.843-17.245    c5.069-4.23,10.255-8.557,15.102-12.547c2.893,1.741,5.822,3.429,8.795,5.046c1.504,0.818,3.153,1.221,4.796,1.221    c2.186,0,4.358-0.712,6.156-2.108l6.843-5.31l6.442,125.37c0.204,3.962,2.721,7.432,6.423,8.856c1.172,0.45,2.39,0.67,3.6,0.67    c2.615,0,5.183-1.023,7.101-2.942l58.979-58.979c32.293-32.293,50.076-75.227,50.076-120.896v-54.995l23.267-18.055    c69.729-54.11,112.196-135.704,116.512-223.862l0.239-4.886C512.295,19.27,509.779,12.822,505.07,8.18z M33.123,245.822    l43.012-43.012c28.465-28.465,66.303-44.157,106.553-44.196l42.085,1.236l-74.71,91.98L33.123,245.822z M184.774,373.874    c-5.241,4.372-10.614,8.856-15.6,12.957c-9.644-5.223-18.368-11.74-25.992-19.428c-7.384-7.445-13.669-15.922-18.737-25.26    l21.676-25.733c6.554,8.793,13.728,17.122,21.478,24.925c0.006,0.006,0.012,0.011,0.018,0.017    c0.002,0.002,0.004,0.005,0.006,0.007c0.003,0.003,0.006,0.005,0.009,0.008c8.593,8.648,17.836,16.584,27.641,23.761    C191.811,368.002,188.264,370.962,184.774,373.874z M351.875,327.672c0,40.305-15.695,78.197-44.196,106.698l-43.012,43.012    l-6.002-116.792l93.209-72.33V327.672z M491.678,29.779c-4.029,82.297-43.673,158.467-108.767,208.98l-157.46,122.189    c-13.058-7.63-25.229-16.639-36.368-26.846l53.086-53.086c3.92-3.92,3.92-10.278,0-14.199c-3.921-3.921-10.278-3.921-14.199,0    l-53.036,53.036c-9.751-10.795-18.387-22.541-25.74-35.104L278.3,125.8C327.732,64.941,400.96,27.171,479.207,22.177l9.348-0.596    c1.225-0.076,2.045,0.532,2.423,0.904c0.377,0.371,1,1.178,0.94,2.409L491.678,29.779z" fill="#cfcfcf"/></g><g transform="matrix(-0.08572983577887992 0.029393086643328827 0.029393086643328827 0.08572983577887992 42.98460330273765 243.5191723890403)"><path d="m495.513 424.878a81.368 81.368 0 0 0 .487-8.878 80.091 80.091 0 0 0 -80-80h-8a24 24 0 0 1 0-48h32a28 28 0 0 0 0-56h-32a80.133 80.133 0 0 0 -76.585 56.9 225.667 225.667 0 0 0 -19.729-34.366 223.259 223.259 0 0 0 -106.452-82.184 8.03 8.03 0 0 1 -5.234-7.507v-140.843a8 8 0 0 0 -9.94-7.761l-7.46 1.861a53.8 53.8 0 0 0 -36.036 29.9h-61.128a53.8 53.8 0 0 0 -36.036-29.9l-7.46-1.861a8 8 0 0 0 -9.94 7.761v64h16v-53.665a37.883 37.883 0 0 1 24.41 24.2 8 8 0 0 0 7.59 5.465h72a8 8 0 0 0 7.59-5.47 37.886 37.886 0 0 1 24.41-24.196v130.509a24.091 24.091 0 0 0 15.7 22.521 208.309 208.309 0 0 1 136.3 195.467v97.169h-182.987a32.057 32.057 0 0 1 30.987-24h24a8 8 0 0 0 8-8v-40a72.081 72.081 0 0 1 72-72v-16a88.1 88.1 0 0 0 -88 88v32h-16a47.8 47.8 0 0 0 -32 12.261v-148.261h-16v176h-56v-6.111a20.832 20.832 0 0 1 11.578-18.734 8 8 0 0 0 4.422-7.155v-144h-16v139.446a36.709 36.709 0 0 0 -16 30.443v6.111h-32v-6.111a20.832 20.832 0 0 1 11.578-18.734 8 8 0 0 0 4.422-7.155v-344h-16v339.446a36.709 36.709 0 0 0 -16 30.443v14.111a8 8 0 0 0 8 8h392a80.139 80.139 0 0 0 75.446-53.334l-15.086-5.332a64.113 64.113 0 0 1 -60.36 42.666h-64v-24h64a40 40 0 0 0 0-80h-8a64 64 0 0 1 0-128h32a12 12 0 0 1 0 24h-32a40 40 0 0 0 0 80h8a64.072 64.072 0 0 1 64 64 65.03 65.03 0 0 1 -.392 7.122zm-87.513-32.878h8a24 24 0 0 1 0 48h-64v-57.169q0-7.132-.452-14.2a79.749 79.749 0 0 0 56.452 23.369z" fill="#cfcfcf"/><circle cx="80" cy="96" r="16" fill="#cfcfcf"/><circle cx="152" cy="96" r="16" fill="#cfcfcf"/><path d="m88 160h8a23.9 23.9 0 0 0 16-6.126 23.9 23.9 0 0 0 16 6.126h8a24.027 24.027 0 0 0 24-24h-16a8.009 8.009 0 0 1 -8 8h-8a8.009 8.009 0 0 1 -8-8c0-.232-.015-.46-.035-.687a11.992 11.992 0 0 0 -3.965-23.313h-8a11.992 11.992 0 0 0 -3.965 23.313c-.02.227-.035.455-.035.687a8.009 8.009 0 0 1 -8 8h-8a8.009 8.009 0 0 1 -8-8h-16a24.027 24.027 0 0 0 24 24z" fill="#cfcfcf"/></g><g transform="matrix(0.08311941197781797 0.01572529460686508 -0.01572529460686508 0.08311941197781797 16.72698823122436 278.6968786619945)"><circle cx="10" cy="500" r="10" fill="#cfcfcf"/><circle cx="267" cy="245" r="10" fill="#cfcfcf"/><path d="M398.479,118.032c-8.071-8.072-18.802-12.516-30.216-12.516c-11.414,0-22.146,4.446-30.216,12.516    c-16.661,16.662-16.661,43.772,0,60.433c8.332,8.331,19.272,12.495,30.216,12.495c10.941,0,21.886-4.166,30.216-12.495    C415.14,161.803,415.14,134.693,398.479,118.032z M384.282,164.266c-8.833,8.832-23.206,8.832-32.037,0    c-8.833-8.832-8.833-23.204,0-32.037c4.279-4.279,9.967-6.635,16.018-6.635c6.051,0,11.739,2.356,16.018,6.635    C393.114,141.062,393.114,155.434,384.282,164.266z" fill="#cfcfcf"/><path d="M125.409,411.45c-4.964-2.472-10.99-0.451-13.462,4.512l-11.958,24.015c-5.2,10.441-15.658,17.423-27.296,18.219    l-13.908,0.952c-2.351,0.157-3.897-1.014-4.612-1.729s-1.889-2.264-1.729-4.613l0.952-13.907    c0.797-11.637,7.779-22.096,18.219-27.296l24.014-11.958c4.964-2.472,6.984-8.499,4.512-13.462    c-2.471-4.963-8.498-6.984-13.462-4.512l-24.014,11.958c-16.792,8.362-28.02,25.182-29.302,43.898l-0.952,13.907    c-0.514,7.507,2.242,14.863,7.562,20.183c4.898,4.898,11.523,7.624,18.403,7.624c0.591,0,1.186-0.02,1.78-0.061l13.908-0.952    c18.716-1.281,35.536-12.508,43.898-29.302l11.958-24.014C132.392,419.948,130.372,413.922,125.409,411.45z" fill="#cfcfcf"/><path d="M505.07,8.18c-4.711-4.641-11.201-7.068-17.793-6.639l-9.348,0.596c-83.819,5.351-162.262,45.81-215.215,111.004    L240.71,140.23l-57.583-1.691c-0.098-0.003-0.197-0.004-0.294-0.004c-45.668,0-88.603,17.784-120.896,50.076L2.959,247.59    c-2.805,2.805-3.696,7-2.272,10.702c1.424,3.703,4.894,6.221,8.856,6.423l124.844,6.414l-5.09,6.267    c-2.565,3.159-2.971,7.553-1.026,11.127c1.956,3.596,4.006,7.135,6.144,10.617l-29.606,35.147    c-2.531,3.005-3.076,7.211-1.397,10.763c6.467,13.665,15.05,25.943,25.514,36.493c10.718,10.808,23.251,19.646,37.249,26.271    c1.368,0.648,2.835,0.965,4.293,0.965c2.261,0,4.503-0.764,6.327-2.243c6.378-5.174,13.731-11.311,20.843-17.245    c5.069-4.23,10.255-8.557,15.102-12.547c2.893,1.741,5.822,3.429,8.795,5.046c1.504,0.818,3.153,1.221,4.796,1.221    c2.186,0,4.358-0.712,6.156-2.108l6.843-5.31l6.442,125.37c0.204,3.962,2.721,7.432,6.423,8.856c1.172,0.45,2.39,0.67,3.6,0.67    c2.615,0,5.183-1.023,7.101-2.942l58.979-58.979c32.293-32.293,50.076-75.227,50.076-120.896v-54.995l23.267-18.055    c69.729-54.11,112.196-135.704,116.512-223.862l0.239-4.886C512.295,19.27,509.779,12.822,505.07,8.18z M33.123,245.822    l43.012-43.012c28.465-28.465,66.303-44.157,106.553-44.196l42.085,1.236l-74.71,91.98L33.123,245.822z M184.774,373.874    c-5.241,4.372-10.614,8.856-15.6,12.957c-9.644-5.223-18.368-11.74-25.992-19.428c-7.384-7.445-13.669-15.922-18.737-25.26    l21.676-25.733c6.554,8.793,13.728,17.122,21.478,24.925c0.006,0.006,0.012,0.011,0.018,0.017    c0.002,0.002,0.004,0.005,0.006,0.007c0.003,0.003,0.006,0.005,0.009,0.008c8.593,8.648,17.836,16.584,27.641,23.761    C191.811,368.002,188.264,370.962,184.774,373.874z M351.875,327.672c0,40.305-15.695,78.197-44.196,106.698l-43.012,43.012    l-6.002-116.792l93.209-72.33V327.672z M491.678,29.779c-4.029,82.297-43.673,158.467-108.767,208.98l-157.46,122.189    c-13.058-7.63-25.229-16.639-36.368-26.846l53.086-53.086c3.92-3.92,3.92-10.278,0-14.199c-3.921-3.921-10.278-3.921-14.199,0    l-53.036,53.036c-9.751-10.795-18.387-22.541-25.74-35.104L278.3,125.8C327.732,64.941,400.96,27.171,479.207,22.177l9.348-0.596    c1.225-0.076,2.045,0.532,2.423,0.904c0.377,0.371,1,1.178,0.94,2.409L491.678,29.779z" fill="#cfcfcf"/></g></defs><g fi:class="KUsePattern"><pattern id="pattern_L1_0" width="350" height="350" patternUnits="userSpaceOnUse"><use xlink:href="#L1_0" x="-350" y="-350"/><use xlink:href="#L1_0" x="0" y="-350"/><use xlink:href="#L1_0" x="350" y="-350"/><use xlink:href="#L1_0" x="-350" y="0"/><use xlink:href="#L1_0" x="0" y="0"/><use xlink:href="#L1_0" x="350" y="0"/><use xlink:href="#L1_0" x="-350" y="350"/><use xlink:href="#L1_0" x="0" y="350"/><use xlink:href="#L1_0" x="350" y="350"/></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern_L1_0)"/></g><g fi:class="KUsePattern"><pattern id="pattern_L1_5" width="350" height="350" patternUnits="userSpaceOnUse"><use xlink:href="#L1_5" x="-350" y="-350"/><use xlink:href="#L1_5" x="0" y="-350"/><use xlink:href="#L1_5" x="350" y="-350"/><use xlink:href="#L1_5" x="-350" y="0"/><use xlink:href="#L1_5" x="0" y="0"/><use xlink:href="#L1_5" x="350" y="0"/><use xlink:href="#L1_5" x="-350" y="350"/><use xlink:href="#L1_5" x="0" y="350"/><use xlink:href="#L1_5" x="350" y="350"/></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern_L1_5)"/></g><g fi:class="KUsePattern" transform="matrix(1 0 0 1 20 20)"><pattern id="pattern_UNKNOWN" width="350" height="350" patternUnits="userSpaceOnUse"><use xlink:href="#UNKNOWN" x="-350" y="-350"/><use xlink:href="#UNKNOWN" x="0" y="-350"/><use xlink:href="#UNKNOWN" x="350" y="-350"/><use xlink:href="#UNKNOWN" x="-350" y="0"/><use xlink:href="#UNKNOWN" x="0" y="0"/><use xlink:href="#UNKNOWN" x="350" y="0"/><use xlink:href="#UNKNOWN" x="-350" y="350"/><use xlink:href="#UNKNOWN" x="0" y="350"/><use xlink:href="#UNKNOWN" x="350" y="350"/></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern_UNKNOWN)"/></g><g fi:class="KUsePattern" transform="matrix(1 0 0 1 20 20)"><pattern id="pattern_UNKNOWN" width="350" height="350" patternUnits="userSpaceOnUse"><use xlink:href="#UNKNOWN" x="-350" y="-350"/><use xlink:href="#UNKNOWN" x="0" y="-350"/><use xlink:href="#UNKNOWN" x="350" y="-350"/><use xlink:href="#UNKNOWN" x="-350" y="0"/><use xlink:href="#UNKNOWN" x="0" y="0"/><use xlink:href="#UNKNOWN" x="350" y="0"/><use xlink:href="#UNKNOWN" x="-350" y="350"/><use xlink:href="#UNKNOWN" x="0" y="350"/><use xlink:href="#UNKNOWN" x="350" y="350"/></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern_UNKNOWN)"/></g></svg>


--------------------------------------------------------------------------------
/client/src/components/__tests__/module-detail.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { renderWithRouter, cleanup } from '../../utils/test-utils';
 3 | import ModuleDetail from '../module-detail';
 4 | 
 5 | const mockModule = {
 6 |   id: 'l_1',
 7 |   title: 'The Night Sky',
 8 |   content:
 9 |     '# Et tempus voces tigride remisso fer coimus\n\n## Montibus arbusta detrectas haud\n\n',
10 |   thumbnail: null,
11 |   videoUrl: 'https://youtu.be/dlKzlksOUtU',
12 |   topic: 'Cat-stronomy',
13 |   length: 164,
14 | };
15 | 
16 | const mockParentTrack = {
17 |   id: 'c_0',
18 |   title: 'Cat-stronomy, an introduction',
19 |   description: '# Pulchra vehi vidit misera sola armenta secabatur\n\n',
20 |   thumbnail:
21 |     'https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg',
22 |   trackLength: 2377,
23 |   modulesCount: 10,
24 |   numberOfViews: 51,
25 |   author: {
26 |     name: 'Henri, le Chat Noir',
27 |     photo:
28 |       'https://images.unsplash.com/photo-1442291928580-fb5d0856a8f1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
29 |   },
30 |   modules: [
31 |     {
32 |       id: 'l_0',
33 |       title: 'Exploring Time and Space',
34 |       length: 258,
35 |     },
36 |   ],
37 | };
38 | 
39 | describe('Module Detail View', () => {
40 |   // automatically unmount and cleanup DOM after the test is finished.
41 |   afterEach(cleanup);
42 | 
43 |   it('renders without error', () => {
44 |     renderWithRouter(<ModuleDetail module={mockModule} track={mockParentTrack} />);
45 |   });
46 | });
47 | 


--------------------------------------------------------------------------------
/client/src/components/__tests__/modules-navigation.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { renderWithRouter, cleanup } from '../../utils/test-utils';
 3 | import ModuleNav from '../modules-navigation';
 4 | 
 5 | const mockModule = {
 6 |   id: 'l_1',
 7 |   title: 'The Night Sky',
 8 |   content:
 9 |     '# Et tempus voces tigride remisso fer coimus\n\n## Montibus arbusta detrectas haud\n\n',
10 |   thumbnail: null,
11 |   videoUrl: 'https://youtu.be/dlKzlksOUtU',
12 |   topic: 'Cat-stronomy',
13 |   length: 164,
14 | };
15 | 
16 | const mockParentTrack = {
17 |   id: 'c_0',
18 |   title: 'Cat-stronomy, an introduction',
19 |   description: '# Pulchra vehi vidit misera sola armenta secabatur\n\n',
20 |   thumbnail:
21 |     'https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg',
22 |   trackLength: 2377,
23 |   modulesCount: 10,
24 |   numberOfViews: 51,
25 |   author: {
26 |     name: 'Henri, le Chat Noir',
27 |     photo:
28 |       'https://images.unsplash.com/photo-1442291928580-fb5d0856a8f1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
29 |   },
30 |   modules: [
31 |     {
32 |       id: 'l_0',
33 |       title: 'Exploring Time and Space',
34 |       length: 258,
35 |     },
36 |   ],
37 | };
38 | 
39 | describe('Modules Navigation View', () => {
40 |   // automatically unmount and cleanup DOM after the test is finished.
41 |   afterEach(cleanup);
42 | 
43 |   it('renders without error', () => {
44 |     renderWithRouter(<ModuleNav module={mockModule} track={mockParentTrack} />);
45 |   });
46 | });
47 | 


--------------------------------------------------------------------------------
/client/src/components/__tests__/query-result.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render, cleanup } from '../../utils/test-utils';
 3 | import QueryResult from '../query-result';
 4 | 
 5 | describe('Query Result', () => {
 6 |   // automatically unmount and cleanup DOM after the test is finished.
 7 |   afterEach(cleanup);
 8 | 
 9 |   it('renders loading state', async () => {
10 |     const { getByTestId } = render(<QueryResult loading={true} />);
11 |     getByTestId(/spinner/i);
12 |   });
13 | 
14 |   it('renders No Data message', async () => {
15 |     // passing no error and no data
16 |     const { getByText } = render(<QueryResult loading={false} />);
17 |     getByText(/nothing to show/i);
18 |   });
19 | 
20 |   it('renders Error', async () => {
21 |     const { getByText } = render(<QueryResult error={new Error('you lose')} />);
22 |     getByText(/you lose/i);
23 |   });
24 | });
25 | 


--------------------------------------------------------------------------------
/client/src/components/__tests__/track-detail.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { renderWithRouter, cleanup } from '../../utils/test-utils';
 3 | import TrackDetail from '../track-detail';
 4 | 
 5 | const mockTrack = {
 6 |   track: {
 7 |     id: 'c_0',
 8 |     title: 'Cat-stronomy, an introduction',
 9 |     description: '# Pulchra vehi vidit misera sola armenta secabatur\n\n',
10 |     thumbnail:
11 |       'https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg',
12 |     length: 2377,
13 |     modulesCount: 10,
14 |     numberOfViews: 51,
15 |     author: {
16 |       name: 'Henri, le Chat Noir',
17 |       photo:
18 |         'https://images.unsplash.com/photo-1442291928580-fb5d0856a8f1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
19 |     },
20 |     modules: [
21 |       {
22 |         id: 'l_0',
23 |         title: 'Exploring Time and Space',
24 |         length: 258,
25 |       },
26 |     ],
27 |   },
28 | };
29 | 
30 | describe('Module Detail View', () => {
31 |   // automatically unmount and cleanup DOM after the test is finished.
32 |   afterEach(cleanup);
33 | 
34 |   it('renders without error', () => {
35 |     renderWithRouter(<TrackDetail {...mockTrack} />);
36 |   });
37 | });
38 | 


--------------------------------------------------------------------------------
/client/src/components/content-section.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from '@emotion/styled';
 3 | import { widths, colors } from '../styles';
 4 | 
 5 | /**
 6 |  * Content Section component renders content (mainly text/mdown based)
 7 |  * for course detail and lesson detail
 8 |  */
 9 | const ContentSection = ({ children }) => {
10 |   return <ContentDiv>{children}</ContentDiv>;
11 | };
12 | 
13 | export default ContentSection;
14 | 
15 | /** ContentSection styled component */
16 | const ContentDiv = styled.div({
17 |   marginTop: 10,
18 |   display: 'flex',
19 |   flexDirection: 'column',
20 |   maxWidth: widths.textPageWidth,
21 |   width: '100%',
22 |   alignSelf: 'center',
23 |   backgroundColor: colors.background,
24 | });
25 | 


--------------------------------------------------------------------------------
/client/src/components/footer.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from '@emotion/styled';
 3 | import { colors, ApolloIcon } from '../styles';
 4 | 
 5 | /**
 6 |  * Footer is useless component to make our app look a little closer to a real website!
 7 |  */
 8 | const Footer = ({ children }) => {
 9 |   return (
10 |     <FooterContainer>
11 |       {new Date().getFullYear()} ©{' '}
12 |       <LogoContainer>
13 |         <ApolloIcon width="100px" height="40px" />
14 |       </LogoContainer>
15 |     </FooterContainer>
16 |   );
17 | };
18 | 
19 | export default Footer;
20 | 
21 | /** Footer styled components */
22 | const FooterContainer = styled.div({
23 |   display: 'flex',
24 |   flexDirection: 'row',
25 |   justifyContent: 'center',
26 |   alignItems: 'center',
27 |   color: colors.pink.base,
28 |   marginTop: 30,
29 |   height: 200,
30 |   padding: 20,
31 |   backgroundColor: 'white',
32 |   borderTop: `solid 1px ${colors.pink.light}`,
33 | });
34 | 
35 | const LogoContainer = styled.div({
36 |   height: 40,
37 |   marginLeft: 5,
38 |   svg: {
39 |     height: 40,
40 |   },
41 | });
42 | 


--------------------------------------------------------------------------------
/client/src/components/header.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { colors, widths } from '../styles';
 3 | import styled from '@emotion/styled';
 4 | import { Link } from 'react-router-dom';
 5 | import logo from '../assets/space_cat_logo.png';
 6 | 
 7 | /**
 8 |  * Header renders the top navigation
 9 |  * for this particular tutorial level, it only holds the home button
10 |  */
11 | const Header = ({ children }) => {
12 |   return (
13 |     <HeaderBar>
14 |       <Container>
15 |         <HomeButtonContainer>
16 |           <HomeLink to="/">
17 |             <HomeButton>
18 |               <LogoContainer>
19 |                 <Logo src={logo} />
20 |               </LogoContainer>
21 |               <Title>
22 |                 <h3>Catstronaut</h3>
23 |                 <div>Kitty space academy</div>
24 |               </Title>
25 |             </HomeButton>
26 |           </HomeLink>
27 |         </HomeButtonContainer>
28 |         {children}
29 |       </Container>
30 |     </HeaderBar>
31 |   );
32 | };
33 | 
34 | export default Header;
35 | 
36 | /** Header styled components */
37 | const HeaderBar = styled.div({
38 |   display: 'flex',
39 |   flexDirection: 'row',
40 |   alignItems: 'center',
41 |   justifyContent: 'center',
42 |   borderBottom: `solid 1px ${colors.pink.light}`,
43 |   boxShadow: '0px 1px 5px 0px rgba(0,0,0,0.15)',
44 |   padding: '5px 30px',
45 |   minHeight: 80,
46 |   backgroundColor: 'white',
47 | });
48 | 
49 | const Container = styled.div({
50 |   width: `${widths.regularPageWidth}px`,
51 | });
52 | 
53 | const HomeLink = styled(Link)({
54 |   textDecoration: 'none',
55 | });
56 | 
57 | const HomeButtonContainer = styled.div({
58 |   display: 'flex',
59 |   flex: 1,
60 | });
61 | 
62 | const HomeButton = styled.div({
63 |   display: 'flex',
64 |   flexDirection: 'row',
65 |   color: colors.accent,
66 |   alignItems: 'center',
67 |   ':hover': {
68 |     color: colors.pink.dark,
69 |   },
70 | });
71 | 
72 | const LogoContainer = styled.div({ display: 'flex', alignSelf: 'center' });
73 | 
74 | const Logo = styled.img({
75 |   height: 60,
76 |   width: 60,
77 |   marginRight: 8,
78 | });
79 | 
80 | const Title = styled.div({
81 |   display: 'flex',
82 |   flexDirection: 'column',
83 |   h3: {
84 |     lineHeight: '1em',
85 |     marginBottom: 0,
86 |   },
87 |   div: {
88 |     fontSize: '0.9em',
89 |     lineHeight: '0.8em',
90 |     paddingLeft: 2,
91 |   },
92 | });
93 | 


--------------------------------------------------------------------------------
/client/src/components/index.js:
--------------------------------------------------------------------------------
1 | export { default as Footer } from './footer';
2 | export { default as Header } from './header';
3 | export { default as Layout } from './layout';
4 | export { default as ModuleDetail } from './module-detail';
5 | export { default as QueryResult } from './query-result';
6 | 


--------------------------------------------------------------------------------
/client/src/components/layout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Header, Footer } from '../components';
 3 | import styled from '@emotion/styled';
 4 | import { widths, unit } from '../styles';
 5 | 
 6 | /**
 7 |  * Layout renders the full page content:
 8 |  * with header, Page container and footer
 9 |  */
10 | const Layout = ({ fullWidth, children, grid }) => {
11 |   return (
12 |     <>
13 |       <Header />
14 |       <PageContainer fullWidth={fullWidth} grid={grid}>
15 |         {children}
16 |       </PageContainer>
17 |       <Footer />
18 |     </>
19 |   );
20 | };
21 | 
22 | export default Layout;
23 | 
24 | /** Layout styled components */
25 | const PageContainer = styled.div((props) => ({
26 |   display: 'flex',
27 |   justifyContent: props.grid ? 'center' : 'top',
28 |   flexDirection: props.grid ? 'row' : 'column',
29 |   flexWrap: 'wrap',
30 |   alignSelf: 'center',
31 |   flexGrow: 1,
32 |   maxWidth: props.fullWidth ? undefined : `${widths.regularPageWidth}px`,
33 |   width: '100%',
34 |   padding: props.fullWidth ? 0 : unit * 2,
35 |   paddingBottom: unit * 5,
36 | }));
37 | 


--------------------------------------------------------------------------------
/client/src/components/md-content.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from '@emotion/styled';
 3 | import { colors } from '../styles';
 4 | import ReactMarkdown from 'react-markdown';
 5 | 
 6 | /**
 7 |  * Markdown component is a simple style wrapper for markdown content used across our app
 8 |  */
 9 | const MarkDown = ({ content }) => {
10 |   return <StyledMarkdown children={content} />;
11 | };
12 | 
13 | export default MarkDown;
14 | 
15 | /** Markdown styled components */
16 | const StyledMarkdown = styled(ReactMarkdown)({
17 |   color: colors.grey.darker,
18 | 
19 |   h1: {
20 |     fontSize: '1.7em',
21 |   },
22 |   h2: {
23 |     fontSize: '1.4em',
24 |   },
25 |   h3: {
26 |     fontSize: '1.2em',
27 |   },
28 |   a: {
29 |     color: colors.pink.base,
30 |   },
31 |   pre: {
32 |     padding: 20,
33 |     borderRadius: 4,
34 |     border: `solid 1px ${colors.silver.dark}`,
35 |     backgroundColor: colors.silver.base,
36 |     code: {
37 |       fontSize: '0.9em',
38 |     },
39 |   },
40 | });
41 | 


--------------------------------------------------------------------------------
/client/src/components/module-detail.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from '@emotion/styled';
 3 | import { colors, widths } from '../styles';
 4 | import useWindowDimensions from '../utils/useWindowDimensions';
 5 | import ContentSection from './content-section';
 6 | import ReactPlayer from 'react-player/youtube';
 7 | import ModulesNav from './modules-navigation';
 8 | import MarkDown from './md-content';
 9 | 
10 | /**
11 |  * Module Detail renders content of a given module:
12 |  * Video player, modules navigation and markdown content
13 |  */
14 | const ModuleDetail = ({ track, module }) => {
15 |   const { videoUrl, title, content } = module;
16 |   const { width } = useWindowDimensions();
17 | 
18 |   return (
19 |     <>
20 |       <TopSection>
21 |         <TopContainer totalWidth={width}>
22 |           <PlayerContainer>
23 |             <ReactPlayer url={videoUrl} width="100%" height="100%" />
24 |           </PlayerContainer>
25 |           <ModulesNav track={track} module={module}></ModulesNav>
26 |         </TopContainer>
27 |       </TopSection>
28 |       <ContentSection>
29 |         <ModuleTitle>{title}</ModuleTitle>
30 |         <MarkDown content={content} />
31 |       </ContentSection>
32 |     </>
33 |   );
34 | };
35 | 
36 | export default ModuleDetail;
37 | 
38 | /** Module Detail styled components */
39 | const TopSection = styled.div({
40 |   display: 'flex',
41 |   justifyContent: 'center',
42 |   backgroundColor: colors.black.base,
43 |   padding: 20,
44 |   borderBottom: `solid 1px ${colors.pink.base}`,
45 | });
46 | 
47 | const TopContainer = styled.div(({ totalWidth }) => ({
48 |   display: 'flex',
49 |   flexDirection: 'row',
50 |   alignSelf: 'center',
51 |   width: '100%',
52 |   maxWidth: widths.largePageWidth,
53 |   // 60 below removes 3 * 20 horizontal paddings (sides and inner between player and list)
54 |   height: ((totalWidth - 60) * (2 / 3)) / (16 / 9),
55 |   maxHeight: (widths.largePageWidth * (2 / 3)) / (16 / 9),
56 | }));
57 | 
58 | const PlayerContainer = styled.div({
59 |   width: '66%',
60 | });
61 | 
62 | const ModuleTitle = styled.h1({
63 |   marginTop: 10,
64 |   marginBottom: 30,
65 |   paddingBottom: 10,
66 |   color: colors.black.lighter,
67 |   borderBottom: `solid 1px ${colors.pink.base}`,
68 | });
69 | 


--------------------------------------------------------------------------------
/client/src/components/modules-navigation.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import styled from '@emotion/styled';
  3 | import { Link } from 'react-router-dom';
  4 | import { colors, IconArrowRight, IconDoubleArrowRight } from '../styles';
  5 | import { humanReadableTimeFromSeconds } from '../utils/helpers';
  6 | 
  7 | /**
  8 |  * Module Navigation: displays a list of modules titles
  9 |  * from a track and navigates to the modules page
 10 |  */
 11 | const ModulesNav = ({ module, track }) => {
 12 |   return (
 13 |     <ModulesNavContainer>
 14 |       <ModuleTitle>
 15 |         <h4>
 16 |           <Link to="../..">{track.title}</Link>
 17 |         </h4>
 18 |       </ModuleTitle>
 19 |       <ModulesList>
 20 |         {track.modules.map((navModule) => (
 21 |           <ModuleListItem key={`module_${navModule.id}`}>
 22 |             <div>
 23 |               <ModuleNavStyledLink
 24 |                 to={`/track/${track.id}/module/${navModule.id}`}
 25 |               >
 26 |                 <ModuleListItemContent isActive={navModule.id === module.id}>
 27 |                   {navModule.id === module.id ? (
 28 |                     <IconDoubleArrowRight width="14px" />
 29 |                   ) : (
 30 |                     <IconArrowRight width="14px" weight="thin" />
 31 |                   )}
 32 |                   <div>{navModule.title}</div>
 33 |                   <div>{humanReadableTimeFromSeconds(navModule.length)}</div>
 34 |                 </ModuleListItemContent>
 35 |               </ModuleNavStyledLink>
 36 |             </div>
 37 |           </ModuleListItem>
 38 |         ))}
 39 |       </ModulesList>
 40 |     </ModulesNavContainer>
 41 |   );
 42 | };
 43 | 
 44 | export default ModulesNav;
 45 | 
 46 | /** Module Navigation styled components */
 47 | const ModulesNavContainer = styled.div({
 48 |   width: '33%',
 49 |   position: 'relative',
 50 |   marginLeft: 20,
 51 |   backgroundColor: colors.black.light,
 52 |   borderRadius: 4,
 53 |   border: `solid 1px ${colors.black.lighter}`,
 54 |   overflow: 'auto',
 55 | });
 56 | 
 57 | const trackTitleHeight = 70;
 58 | 
 59 | const ModuleTitle = styled.div({
 60 |   display: 'flex',
 61 |   position: 'sticky',
 62 |   fontSize: '1.6em',
 63 |   fontWeight: '400',
 64 |   height: trackTitleHeight,
 65 |   alignItems: 'center',
 66 |   justifyContent: 'center',
 67 |   textAlign: 'center',
 68 |   backgroundColor: 'colors.pink.base',
 69 |   borderBottom: `solid 1px ${colors.pink.base}`,
 70 | 
 71 |   a: {
 72 |     textDecoration: 'none',
 73 |     color: colors.silver.base,
 74 |   },
 75 |   ':hover': {
 76 |     backgroundColor: colors.black.base,
 77 |   },
 78 | });
 79 | 
 80 | const ModulesList = styled.ul({
 81 |   listStyle: 'none',
 82 |   margin: 0,
 83 |   padding: 0,
 84 |   overflowY: 'scroll',
 85 |   height: `calc(100% - ${trackTitleHeight}px)`,
 86 | });
 87 | 
 88 | const ModuleListItem = styled.li((props) => ({
 89 |   borderBottom: `solid 1px ${colors.grey.darker}`,
 90 |   ':last-child': {
 91 |     borderBottom: 'none',
 92 |   },
 93 | }));
 94 | 
 95 | const ModuleNavStyledLink = styled(Link)({
 96 |   textDecoration: 'none',
 97 |   display: 'flex',
 98 |   alignItems: 'center',
 99 | });
100 | 
101 | const ModuleListItemContent = styled.div((props) => ({
102 |   backgroundColor: props.isActive ? colors.black.base : colors.black.light,
103 |   color: props.isActive ? colors.silver.lighter : colors.silver.darker,
104 |   minHeight: 80,
105 |   padding: '10px 20px',
106 |   display: 'flex',
107 |   alignItems: 'center',
108 |   justifyContent: 'space-between',
109 |   fontSize: '1.1em',
110 |   flex: 1,
111 |   ':hover': {
112 |     backgroundColor: props.isActive ? colors.black.dark : colors.black.base,
113 |     color: 'white',
114 |   },
115 | }));
116 | 


--------------------------------------------------------------------------------
/client/src/components/query-result.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from '@emotion/styled';
 3 | import { LoadingSpinner } from '@apollo/space-kit/Loaders/LoadingSpinner';
 4 | 
 5 | /**
 6 |  * Query Results conditionally renders Apollo useQuery hooks states:
 7 |  * loading, error or its children when data is ready
 8 |  */
 9 | const QueryResult = ({ loading, error, data, children }) => {
10 |   if (error) {
11 |     return <p>ERROR: {error.message}</p>;
12 |   }
13 |   if (loading) {
14 |     return (
15 |       <SpinnerContainer>
16 |         <LoadingSpinner data-testid="spinner" size="large" theme="grayscale" />
17 |       </SpinnerContainer>
18 |     );
19 |   }
20 |   if (!data) {
21 |     return <p>Nothing to show...</p>;
22 |   }
23 |   if (data) {
24 |     return children;
25 |   }
26 | };
27 | 
28 | export default QueryResult;
29 | 
30 | /** Query Result styled components */
31 | const SpinnerContainer = styled.div({
32 |   display: 'flex',
33 |   justifyContent: 'center',
34 |   alignItems: 'center',
35 |   width: '100%',
36 |   height: '100vh',
37 | });
38 | 


--------------------------------------------------------------------------------
/client/src/components/track-detail.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import styled from '@emotion/styled';
  3 | import {
  4 |   colors,
  5 |   Button,
  6 |   IconRun,
  7 |   IconView,
  8 |   IconTime,
  9 |   IconBook,
 10 | } from '../styles';
 11 | import { humanReadableTimeFromSeconds } from '../utils/helpers';
 12 | import { Link } from 'react-router-dom';
 13 | import ContentSection from './content-section';
 14 | import MarkDown from './md-content';
 15 | 
 16 | /**
 17 |  * Track Detail component renders the main content of a given track:
 18 |  * author, length, number of views, modules list, among other things.
 19 |  * It provides access to the first module of the track.
 20 |  */
 21 | const TrackDetail = ({ track }) => {
 22 |   const {
 23 |     title,
 24 |     description,
 25 |     thumbnail,
 26 |     author,
 27 |     length,
 28 |     modulesCount,
 29 |     modules,
 30 |     numberOfViews,
 31 |   } = track;
 32 | 
 33 |   return (
 34 |     <ContentSection>
 35 |       <CoverImage src={thumbnail} alt="" />
 36 |       <TrackDetails>
 37 |         <DetailRow>
 38 |           <h1>{title}</h1>
 39 |         </DetailRow>
 40 |         <DetailRow>
 41 |           <DetailItem>
 42 |             <h4>Track details</h4>
 43 |             <IconAndLabel>
 44 |               <IconView width="16px" />
 45 |               <div id="viewCount">{numberOfViews} view(s)</div>
 46 |             </IconAndLabel>
 47 |             <IconAndLabel>
 48 |               <IconBook width="14px" height="14px" />
 49 |               <div>{modulesCount} modules</div>
 50 |             </IconAndLabel>
 51 |             <IconAndLabel>
 52 |               <IconTime width="14px" />
 53 |               <div>{humanReadableTimeFromSeconds(length)}</div>
 54 |             </IconAndLabel>
 55 |           </DetailItem>
 56 |           <DetailItem>
 57 |             <h4>Author</h4>
 58 |             <AuthorImage src={author.photo} />
 59 |             <AuthorName>{author.name}</AuthorName>
 60 |           </DetailItem>
 61 |           <div>
 62 |             <StyledLink to={`./module/${modules[0]['id']}`}>
 63 |               <Button
 64 |                 icon={<IconRun width="20px" />}
 65 |                 color={colors.pink.base}
 66 |                 size="large"
 67 |               >
 68 |                 Start Track
 69 |               </Button>
 70 |             </StyledLink>
 71 |           </div>
 72 |         </DetailRow>
 73 |         <ModuleListContainer>
 74 |           <DetailItem>
 75 |             <h4>Modules</h4>
 76 |             <ul>
 77 |               {modules.map((module) => (
 78 |                 <li key={module.title}>
 79 |                   <div>{module.title}</div>
 80 |                   <ModuleLength>
 81 |                     {humanReadableTimeFromSeconds(module.length)}
 82 |                   </ModuleLength>
 83 |                 </li>
 84 |               ))}
 85 |             </ul>
 86 |           </DetailItem>
 87 |         </ModuleListContainer>
 88 |       </TrackDetails>
 89 |       <MarkDown content={description} />
 90 |     </ContentSection>
 91 |   );
 92 | };
 93 | 
 94 | export default TrackDetail;
 95 | 
 96 | /** Track detail styled components */
 97 | const CoverImage = styled.img({
 98 |   objectFit: 'cover',
 99 |   maxHeight: 400,
100 |   borderRadius: 4,
101 |   marginBottom: 30,
102 | });
103 | 
104 | const StyledLink = styled(Link)({
105 |   textDecoration: 'none',
106 |   color: 'white',
107 | });
108 | 
109 | const TrackDetails = styled.div({
110 |   display: 'flex',
111 |   flexDirection: 'column',
112 |   alignItems: 'center',
113 |   padding: 20,
114 |   borderRadius: 4,
115 |   marginBottom: 30,
116 |   border: `solid 1px ${colors.silver.dark}`,
117 |   backgroundColor: colors.silver.lighter,
118 |   h1: {
119 |     width: '100%',
120 |     textAlign: 'center',
121 |     marginBottom: 5,
122 |   },
123 |   h4: {
124 |     fontSize: '1.2em',
125 |     marginBottom: 5,
126 |     color: colors.text,
127 |   },
128 | });
129 | 
130 | const DetailRow = styled.div({
131 |   display: 'flex',
132 |   flexDirection: 'row',
133 |   justifyContent: 'space-between',
134 |   alignItems: 'center',
135 |   width: '100%',
136 |   paddingBottom: 20,
137 |   marginBottom: 20,
138 |   borderBottom: `solid 1px ${colors.silver.dark}`,
139 | });
140 | 
141 | const DetailItem = styled.div({
142 |   display: 'flex',
143 |   flexDirection: 'column',
144 |   alignItems: 'center',
145 |   justifyContent: 'space-between',
146 |   color: colors.textSecondary,
147 |   alignSelf: 'center',
148 | });
149 | 
150 | const AuthorImage = styled.img({
151 |   height: 30,
152 |   width: 30,
153 |   marginBottom: 8,
154 |   borderRadius: '50%',
155 |   objectFit: 'cover',
156 | });
157 | 
158 | const AuthorName = styled.div({
159 |   lineHeight: '1em',
160 |   fontSize: '1em',
161 | });
162 | 
163 | const IconAndLabel = styled.div({
164 |   display: 'flex',
165 |   flex: 'row',
166 |   alignItems: 'center',
167 |   maxHeight: 20,
168 |   width: '100%',
169 |   div: {
170 |     marginLeft: 8,
171 |   },
172 |   svg: {
173 |     maxHeight: 16,
174 |   },
175 |   '#viewCount': {
176 |     color: colors.pink.base,
177 |   },
178 | });
179 | 
180 | const ModuleListContainer = styled.div({
181 |   width: '100%',
182 |   ul: {
183 |     listStyle: 'none',
184 |     padding: 0,
185 |     margin: 0,
186 |     marginTop: 5,
187 |     li: {
188 |       fontSize: '1em',
189 |       display: 'flex',
190 |       justifyContent: 'space-between',
191 |       paddingBottom: 2,
192 |     },
193 |   },
194 | });
195 | 
196 | const ModuleLength = styled.div({
197 |   marginLeft: 30,
198 |   color: colors.grey.light,
199 | });
200 | 


--------------------------------------------------------------------------------
/client/src/containers/__tests__/track-card.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { renderApolloWithRouter, cleanup, waitForElement } from '../../utils/test-utils';
 3 | import TrackCard from '../track-card';
 4 | 
 5 | const mockTrackCardData = {
 6 |   id: 'c_0',
 7 |   title: 'Cat-stronomy, an introduction',
 8 |   thumbnail:
 9 |     'https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg',
10 |   length: 2377,
11 |   author: {
12 |     name: 'Henri, le Chat Noir',
13 |     photo:
14 |       'https://images.unsplash.com/photo-1442291928580-fb5d0856a8f1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
15 |   },
16 | };
17 | 
18 | describe('Track Card', () => {
19 |   // automatically unmount and cleanup DOM after the test is finished.
20 |   afterEach(cleanup);
21 | 
22 |   it('renders track Card', async () => {
23 |     const mocks = [];
24 |     const { getByText } = await renderApolloWithRouter(
25 |       <TrackCard track={mockTrackCardData} />,
26 |       {
27 |         mocks,
28 |         resolvers: {},
29 |         addTypename: false,
30 |       }
31 |     );
32 |     await waitForElement(() => getByText(/cat-stronomy/i));
33 |   });
34 | });
35 | 


--------------------------------------------------------------------------------
/client/src/containers/track-card.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import styled from '@emotion/styled';
  3 | import { colors, mq } from '../styles';
  4 | import { humanReadableTimeFromSeconds } from '../utils/helpers';
  5 | 
  6 | /**
  7 |  * Track Card component renders basic info in a card format
  8 |  * for each track populating the tracks grid homepage.
  9 |  */
 10 | const TrackCard = ({ track }) => {
 11 |   const { title, thumbnail, author, length, modulesCount } = track;
 12 | 
 13 |   return (
 14 |     <CardContainer>
 15 |       <CardContent>
 16 |         <CardImageContainer>
 17 |           <CardImage src={thumbnail} alt={title} />
 18 |         </CardImageContainer>
 19 |         <CardBody>
 20 |           <CardTitle>{title || ''}</CardTitle>
 21 |           <CardFooter>
 22 |             <AuthorImage src={author.photo} />
 23 |             <AuthorAndTrack>
 24 |               <AuthorName>{author.name}</AuthorName>
 25 |               <TrackLength>
 26 |                 {modulesCount} modules - {humanReadableTimeFromSeconds(length)}
 27 |               </TrackLength>
 28 |             </AuthorAndTrack>
 29 |           </CardFooter>
 30 |         </CardBody>
 31 |       </CardContent>
 32 |     </CardContainer>
 33 |   );
 34 | };
 35 | 
 36 | export default TrackCard;
 37 | 
 38 | /** Track Card styled components */
 39 | const CardContainer = styled.div({
 40 |   borderRadius: 6,
 41 |   color: colors.text,
 42 |   backgroundSize: 'cover',
 43 |   backgroundColor: 'white',
 44 |   boxShadow: '0px 1px 5px 0px rgba(0,0,0,0.15)',
 45 |   backgroundPosition: 'center',
 46 |   display: 'flex',
 47 |   flexDirection: 'column',
 48 |   justifyContent: 'space-between',
 49 |   [mq[0]]: {
 50 |     width: '90%',
 51 |   },
 52 |   [mq[1]]: {
 53 |     width: '47%',
 54 |   },
 55 |   [mq[2]]: {
 56 |     width: '31%',
 57 |   },
 58 |   height: 380,
 59 |   margin: 10,
 60 |   overflow: 'hidden',
 61 |   position: 'relative',
 62 |   ':hover': {
 63 |     backgroundColor: colors.pink.lightest,
 64 |   },
 65 |   cursor: 'pointer',
 66 | });
 67 | 
 68 | const CardContent = styled.div({
 69 |   display: 'flex',
 70 |   flexDirection: 'column',
 71 |   justifyContent: 'space-around',
 72 |   height: '100%',
 73 | });
 74 | 
 75 | const CardTitle = styled.h3({
 76 |   textAlign: 'center',
 77 |   fontSize: '1.4em',
 78 |   lineHeight: '1em',
 79 |   fontWeight: 700,
 80 |   color: colors.text,
 81 |   flex: 1,
 82 | });
 83 | 
 84 | const CardImageContainer = styled.div({
 85 |   height: 220,
 86 |   position: 'relative',
 87 |   '::after': {
 88 |     content: '""',
 89 |     position: 'absolute',
 90 |     top: 0,
 91 |     bottom: 0,
 92 |     left: 0,
 93 |     right: 0,
 94 |     background: 'rgba(250,0,150,0.20)',
 95 |   },
 96 | });
 97 | 
 98 | const CardImage = styled.img({
 99 |   objectFit: 'cover',
100 |   width: '100%',
101 |   height: '100%',
102 |   filter: 'grayscale(60%)',
103 | });
104 | 
105 | const CardBody = styled.div({
106 |   padding: 18,
107 |   flex: 1,
108 |   display: 'flex',
109 |   color: colors.textSecondary,
110 |   flexDirection: 'column',
111 |   justifyContent: 'space-around',
112 | });
113 | 
114 | const CardFooter = styled.div({
115 |   display: 'flex',
116 |   flexDirection: 'row',
117 | });
118 | 
119 | const AuthorImage = styled.img({
120 |   height: 30,
121 |   width: 30,
122 |   marginRight: 8,
123 |   borderRadius: '50%',
124 |   objectFit: 'cover',
125 | });
126 | 
127 | const AuthorAndTrack = styled.div({
128 |   display: 'flex',
129 |   flexDirection: 'column',
130 |   justifyContent: 'space-between',
131 | });
132 | 
133 | const AuthorName = styled.div({
134 |   lineHeight: '1em',
135 |   fontSize: '1.1em',
136 | });
137 | 
138 | const TrackLength = styled.div({
139 |   fontSize: '0.8em',
140 | });
141 | 


--------------------------------------------------------------------------------
/client/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { createRoot } from 'react-dom/client'
 3 | import GlobalStyles from './styles';
 4 | import Pages from './pages';
 5 | import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';
 6 | 
 7 | const client = new ApolloClient({
 8 |   uri: 'http://localhost:4000',
 9 |   cache: new InMemoryCache(),
10 | });
11 | 
12 | const root = createRoot(document.getElementById('root'));
13 | 
14 | root.render(
15 |   <ApolloProvider client={client}>
16 |     <GlobalStyles />
17 |     <Pages />
18 |   </ApolloProvider>
19 | );
20 | 


--------------------------------------------------------------------------------
/client/src/pages/__tests__/tracks.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | // this adds custom jest matchers from jest-dom
  3 | import '@testing-library/jest-dom/extend-expect';
  4 | import { InMemoryCache, gql } from '@apollo/client';
  5 | import { renderApolloWithRouter, cleanup, waitForElement } from '../../utils/test-utils';
  6 | import Tracks from '../tracks';
  7 | 
  8 | /** Best practice is to export this operation from the component file. We've defined it separately to remain consistent with the course content. */
  9 | const TRACKS = gql`
 10 |   query getTracks {
 11 |     tracksForHome {
 12 |       id
 13 |       title
 14 |       thumbnail
 15 |       length
 16 |       modulesCount
 17 |       author {
 18 |         name
 19 |         photo
 20 |       }
 21 |     }
 22 |   }
 23 | `;
 24 | 
 25 | const mockTrack = {
 26 |   id: 'c_0',
 27 |   title: 'Nap, the hard way',
 28 |   thumbnail:
 29 |     'https://images.unsplash.com/photo-1542403810-74c578300013?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
 30 |   length: 1420,
 31 |   modulesCount: 6,
 32 |   author: {
 33 |     name: 'Cheshire Cat',
 34 |     photo:
 35 |       'https://images.unsplash.com/photo-1593627010886-d34828365da7?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
 36 |   },
 37 | };
 38 | 
 39 | describe('Tracks Page', () => {
 40 |   afterEach(cleanup);
 41 |   const cache = new InMemoryCache({ addTypename: false });
 42 | 
 43 |   it('renders tracks', async () => {
 44 |     const mocks = [
 45 |       {
 46 |         request: { query: TRACKS },
 47 |         result: {
 48 |           data: {
 49 |             tracksForHome: [mockTrack],
 50 |           },
 51 |         },
 52 |       },
 53 |     ];
 54 | 
 55 |     const { getByText } = await renderApolloWithRouter(<Tracks />, {
 56 |       mocks,
 57 |       cache,
 58 |     });
 59 | 
 60 |     await waitForElement(() => getByText(/nap, the hard way/i));
 61 |   });
 62 | });
 63 | 
 64 | /*
 65 | import React from 'react';
 66 | import { renderApollo, cleanup, waitForElement } from '../../test-utils';
 67 | import { InMemoryCache } from '@apollo/client';
 68 | 
 69 | import Tracks, { TRACKS } from '../tracks';
 70 | const mockTrack = {
 71 |   id: 'c_0',
 72 |   title: 'Nap, the hard way',
 73 |   thumbnail:
 74 |     'https://images.unsplash.com/photo-1542403810-74c578300013?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
 75 |   trackLength: 1420,
 76 |   author: {
 77 |     name: 'Cheshire Cat',
 78 |   },
 79 | };
 80 | 
 81 | describe('Tracks Page', () => {
 82 |   // automatically unmount and cleanup DOM after the test is finished.
 83 |   afterEach(cleanup);
 84 | 
 85 |   it('renders tracks', async () => {
 86 |     const cache = new InMemoryCache({ addTypename: false });
 87 |     const mocks = [
 88 |       {
 89 |         request: { query: TRACKS },
 90 |         result: {
 91 |           data: {
 92 |             tracks: [mockTrack],
 93 |           },
 94 |         },
 95 |       },
 96 |     ];
 97 |     const { getByText } = await renderApollo(<Tracks />, {
 98 |       mocks,
 99 |       cache,
100 |     });
101 |     await waitForElement(() => getByText(/nap, the hard way/i));
102 |   });
103 | });*/
104 | 


--------------------------------------------------------------------------------
/client/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { BrowserRouter, Routes, Route } from 'react-router-dom';
 3 | /** importing our pages */
 4 | import Tracks from './tracks';
 5 | 
 6 | export default function Pages() {
 7 |   return (
 8 |     <BrowserRouter>
 9 |       <Routes>
10 |         <Route element={<Tracks />} path="/" />
11 |       </Routes>
12 |     </BrowserRouter>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/client/src/pages/tracks.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { useQuery, gql } from '@apollo/client';
 3 | import TrackCard from '../containers/track-card';
 4 | import { Layout, QueryResult } from '../components';
 5 | 
 6 | /** TRACKS gql query to retrieve all tracks */
 7 | const TRACKS = gql`
 8 |   query getTracks {
 9 |     tracksForHome {
10 |       id
11 |       title
12 |       thumbnail
13 |       length
14 |       modulesCount
15 |       author {
16 |         name
17 |         photo
18 |       }
19 |     }
20 |   }
21 | `;
22 | 
23 | /**
24 |  * Tracks Page is the Catstronauts home page.
25 |  * We display a grid of tracks fetched with useQuery with the TRACKS query
26 |  */
27 | const Tracks = () => {
28 |   const { loading, error, data } = useQuery(TRACKS);
29 | 
30 |   return (
31 |     <Layout grid>
32 |       <QueryResult error={error} loading={loading} data={data}>
33 |         {data?.tracksForHome?.map((track, index) => (
34 |           <TrackCard key={track.id} track={track} />
35 |         ))}
36 |       </QueryResult>
37 |     </Layout>
38 |   );
39 | };
40 | 
41 | export default Tracks;
42 | 


--------------------------------------------------------------------------------
/client/src/styles.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import '@apollo/space-kit/reset.css';
 3 | import { colors as SKColors } from '@apollo/space-kit/colors';
 4 | import { Global } from '@emotion/core';
 5 | 
 6 | const breakpoints = [480, 768, 992, 1200];
 7 | export const mq = breakpoints.map((bp) => `@media (min-width: ${bp}px)`);
 8 | 
 9 | export const unit = 8;
10 | export const widths = {
11 |   largePageWidth: 1600,
12 |   regularPageWidth: 1100,
13 |   textPageWidth: 800,
14 | };
15 | export const colors = {
16 |   primary: SKColors.indigo.base,
17 |   secondary: SKColors.teal.base,
18 |   accent: SKColors.pink.base,
19 |   background: SKColors.silver.light,
20 |   text: SKColors.black.base,
21 |   textSecondary: SKColors.grey.dark,
22 |   ...SKColors,
23 | };
24 | 
25 | const GlobalStyles = () => (
26 |   <Global
27 |     styles={{
28 |       [['html', 'body']]: {
29 |         height: '100%',
30 |       },
31 |       body: {
32 |         margin: 0,
33 |         padding: 0,
34 |         fontFamily: "'Source Sans Pro', sans-serif",
35 |         backgroundColor: colors.background,
36 |         color: colors.text,
37 |       },
38 |       '#root': {
39 |         display: 'flex',
40 |         flexDirection: 'column',
41 |         minHeight: '100%',
42 |         backgroundImage: 'url("/space_kitty_pattern.png")',
43 |       },
44 |       '*': {
45 |         boxSizing: 'border-box',
46 |       },
47 |       [['h1', 'h2', 'h3', 'h4', 'h5', 'h6']]: {
48 |         margin: 0,
49 |         fontWeight: 600,
50 |       },
51 |       h1: {
52 |         fontSize: 40,
53 |         lineHeight: 1,
54 |       },
55 |       h2: {
56 |         fontSize: 36,
57 |       },
58 |       h3: {
59 |         fontSize: 30,
60 |       },
61 |       h5: {
62 |         fontSize: 16,
63 |         textTransform: 'uppercase',
64 |         letterSpacing: 4,
65 |       },
66 |     }}
67 |   />
68 | );
69 | 
70 | export default GlobalStyles;
71 | 
72 | export { IconRun } from '@apollo/space-kit/icons/IconRun';
73 | export { IconView } from '@apollo/space-kit/icons/IconView';
74 | export { IconTime } from '@apollo/space-kit/icons/IconTime';
75 | export { IconBook } from '@apollo/space-kit/icons/IconBook';
76 | export { IconYoutube } from '@apollo/space-kit/icons/IconYoutube';
77 | export { IconArrowRight } from '@apollo/space-kit/icons/IconArrowRight';
78 | export { IconDoubleArrowRight } from '@apollo/space-kit/icons/IconDoubleArrowRight';
79 | export { ApolloIcon } from '@apollo/space-kit/icons/ApolloIcon';
80 | export { Button } from '@apollo/space-kit/Button';
81 | 


--------------------------------------------------------------------------------
/client/src/utils/helpers.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Format seconds to human readable text in a compact form:
 3 |  * s, m or H:m (not m:s or H:m:s)
 4 |  */
 5 | export const humanReadableTimeFromSeconds = (seconds) => {
 6 |   if (seconds < 60) {
 7 |     return `${seconds}s`;
 8 |   }
 9 |   const totalMinutes = Math.floor(seconds / 60);
10 |   let hours = Math.floor(totalMinutes / 60) || 0;
11 |   const minutestoDisplay = totalMinutes % 60;
12 |   let timeStr = ``;
13 |   if (hours > 0) {
14 |     timeStr += `${hours}h `;
15 |   }
16 |   timeStr += `${minutestoDisplay}m`;
17 | 
18 |   return timeStr;
19 | };
20 | 


--------------------------------------------------------------------------------
/client/src/utils/test-utils.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from '@testing-library/react';
 3 | import { BrowserRouter } from 'react-router-dom'
 4 | import '@testing-library/jest-dom/extend-expect';
 5 | import { MockedProvider } from '@apollo/client/testing';
 6 | 
 7 | const renderApollo = (
 8 |   node,
 9 |   { mocks, addTypename, defaultOptions, cache, resolvers, ...options }
10 | ) => {
11 |   return render(
12 |     <MockedProvider
13 |       mocks={mocks}
14 |       addTypename={addTypename}
15 |       defaultOptions={defaultOptions}
16 |       cache={cache}
17 |       resolvers={resolvers}
18 |       removeTypename
19 |     >
20 |       {node}
21 |     </MockedProvider>,
22 |     options
23 |   );
24 | };
25 | 
26 | export const renderWithRouterGenerator = (renderer) => (node, options) => {
27 |   return renderer(<BrowserRouter>{node}</BrowserRouter>, options)
28 | }
29 | 
30 | export const renderWithRouter = renderWithRouterGenerator(render)
31 | 
32 | export const renderApolloWithRouter = renderWithRouterGenerator(renderApollo)
33 | 
34 | export * from '@testing-library/react';
35 | export { renderApollo };
36 | 


--------------------------------------------------------------------------------
/client/src/utils/useWindowDimensions.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | 
 3 | function getWindowDimensions() {
 4 |   const { innerWidth: width, innerHeight: height } = window;
 5 |   return {
 6 |     width,
 7 |     height,
 8 |   };
 9 | }
10 | 
11 | export default function useWindowDimensions() {
12 |   const [windowDimensions, setWindowDimensions] = useState(
13 |     getWindowDimensions()
14 |   );
15 | 
16 |   useEffect(() => {
17 |     function handleResize() {
18 |       setWindowDimensions(getWindowDimensions());
19 |     }
20 | 
21 |     window.addEventListener('resize', handleResize);
22 |     return () => window.removeEventListener('resize', handleResize);
23 |   }, []);
24 | 
25 |   return windowDimensions;
26 | }
27 | 


--------------------------------------------------------------------------------
/client/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import fs from 'fs/promises';
 3 | 
 4 | /*
 5 |   This override allows us to use .js files instead of exclusively .jsx.
 6 |   We should remove as soon as video updates can be prioritized.
 7 | */
 8 | export default defineConfig(() => ({
 9 |   test: {
10 |     globals: true,
11 |     environment: 'happy-dom',
12 |   },
13 |   server: {
14 |     host: 'localhost',
15 |     port: 3000
16 |   },
17 |   esbuild: {
18 |     loader: "jsx",
19 |     include: /src\/.*\.jsx?$/,
20 |     // loader: "tsx",
21 |     // include: /src\/.*\.[tj]sx?$/,
22 |     exclude: [],
23 |   },
24 |   optimizeDeps: {
25 |     esbuildOptions: {
26 |       loader: {
27 |         '.js': 'jsx',
28 |       },
29 |       plugins: [
30 |         {
31 |           name: "load-js-files-as-jsx",
32 |           setup(build) {
33 |             build.onLoad({ filter: /src\/.*\.js$/ }, async (args) => ({
34 |               loader: "jsx",
35 |               contents: await fs.readFile(args.path, "utf8"),
36 |             }));
37 |           },
38 |         },
39 |       ],
40 |     },
41 |   },
42 | }));


--------------------------------------------------------------------------------
/final/client/README.md:
--------------------------------------------------------------------------------
1 | # Catstronauts - client
2 | 
3 | The final stage of the `client` code after completing the Odyssey Lift-off II course.
4 | 


--------------------------------------------------------------------------------
/final/client/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta name="description" content="Apollo Lift-Off Demo App" />
 9 |     <link rel="apple-touch-icon" href="/logo192.png" />
10 |     <!--
11 |       manifest.json provides metadata used when your web app is installed on a
12 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
13 |     -->
14 |     <link rel="manifest" href="/manifest.json" />
15 |     <title>Catstronauts</title>
16 |   </head>
17 |   <body>
18 |     <noscript>You need to enable JavaScript to run this app.</noscript>
19 |     <div id="root"></div>
20 |     <script type="module" src="/src/index.js"></script>
21 |     <!--
22 |       This HTML file is a template.
23 |       If you open it directly in the browser, you will see an empty page.
24 | 
25 |       You can add webfonts, meta tags, or analytics to this file.
26 |       The build step will place the bundled scripts into the <body> tag.
27 | 
28 |       To begin the development, run `npm start` or `yarn start`.
29 |       To create a production bundle, use `npm run build` or `yarn build`.
30 |     -->
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/final/client/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "catstronauts-client-complete",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "description": "front-end demo app for Apollo's lift-off II course",
 6 |   "dependencies": {
 7 |     "@apollo/client": "^3.7.16",
 8 |     "@apollo/space-kit": "^9.3.1",
 9 |     "@emotion/cache": "^11.4.0",
10 |     "@emotion/core": "^10.1.1",
11 |     "@emotion/react": "^11.4.0",
12 |     "@emotion/styled": "^11.3.0",
13 |     "graphql": "^15.3.0",
14 |     "react": "^18.2.0",
15 |     "react-dom": "^18.2.0",
16 |     "react-markdown": "^9.0.1",
17 |     "react-player": "^2.14.1",
18 |     "react-router-dom": "^6.22.0"
19 |   },
20 |   "scripts": {
21 |     "test": "vitest",
22 |     "start": "vite",
23 |     "build": "vite build"
24 |   },
25 |   "browserslist": {
26 |     "production": [
27 |       ">0.2%",
28 |       "not dead",
29 |       "not op_mini all"
30 |     ],
31 |     "development": [
32 |       "last 1 chrome version",
33 |       "last 1 firefox version",
34 |       "last 1 safari version"
35 |     ]
36 |   },
37 |   "devDependencies": {
38 |     "@testing-library/jest-dom": "^4.2.4",
39 |     "@testing-library/react": "^9.3.2",
40 |     "@testing-library/user-event": "^7.1.2",
41 |     "@vitejs/plugin-react": "^4.0.1",
42 |     "@vitest/ui": "^0.34.0",
43 |     "happy-dom": "^9.20.3",
44 |     "jest": "^27.5.1",
45 |     "vite": "^4.5.1",
46 |     "vitest": "^0.34.0"
47 |   },
48 |   "overrides": {
49 |     "nth-check": "2.1.1"
50 |   },
51 |   "main": "src/index.js",
52 |   "author": "Raphael Terrier @R4ph-t",
53 |   "license": "MIT"
54 | }
55 | 


--------------------------------------------------------------------------------
/final/client/public/_redirects:
--------------------------------------------------------------------------------
1 | /*    /index.html   200
2 | 


--------------------------------------------------------------------------------
/final/client/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/odyssey-lift-off-part2/c6f00b826d4973fdc7198a48cc275cb90f95d455/final/client/public/favicon.ico


--------------------------------------------------------------------------------
/final/client/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/odyssey-lift-off-part2/c6f00b826d4973fdc7198a48cc275cb90f95d455/final/client/public/logo192.png


--------------------------------------------------------------------------------
/final/client/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/odyssey-lift-off-part2/c6f00b826d4973fdc7198a48cc275cb90f95d455/final/client/public/logo512.png


--------------------------------------------------------------------------------
/final/client/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/final/client/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/final/client/public/space_kitty_pattern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/odyssey-lift-off-part2/c6f00b826d4973fdc7198a48cc275cb90f95d455/final/client/public/space_kitty_pattern.png


--------------------------------------------------------------------------------
/final/client/src/assets/cat_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/odyssey-lift-off-part2/c6f00b826d4973fdc7198a48cc275cb90f95d455/final/client/src/assets/cat_logo.png


--------------------------------------------------------------------------------
/final/client/src/assets/cat_logo@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/odyssey-lift-off-part2/c6f00b826d4973fdc7198a48cc275cb90f95d455/final/client/src/assets/cat_logo@2x.png


--------------------------------------------------------------------------------
/final/client/src/assets/space_cat_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/odyssey-lift-off-part2/c6f00b826d4973fdc7198a48cc275cb90f95d455/final/client/src/assets/space_cat_logo.png


--------------------------------------------------------------------------------
/final/client/src/assets/space_cat_logo@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/odyssey-lift-off-part2/c6f00b826d4973fdc7198a48cc275cb90f95d455/final/client/src/assets/space_cat_logo@2x.png


--------------------------------------------------------------------------------
/final/client/src/assets/space_kitty_pattern.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:fi="http://pattern.flaticon.com/" x="0" y="0" width="700" height="350" viewBox="0 0 700 350"><rect x="0px" y="0px" width="100%" height="100%" opacity="0" fill="#ffffff"/><defs><g transform="matrix(0.09496202146658489 0.017493003703064697 -0.017493003703064697 0.09496202146658489 215.84477146984858 71.1779132504656)" id="L1_0"><path d="m495.513 424.878a81.368 81.368 0 0 0 .487-8.878 80.091 80.091 0 0 0 -80-80h-8a24 24 0 0 1 0-48h32a28 28 0 0 0 0-56h-32a80.133 80.133 0 0 0 -76.585 56.9 225.667 225.667 0 0 0 -19.729-34.366 223.259 223.259 0 0 0 -106.452-82.184 8.03 8.03 0 0 1 -5.234-7.507v-140.843a8 8 0 0 0 -9.94-7.761l-7.46 1.861a53.8 53.8 0 0 0 -36.036 29.9h-61.128a53.8 53.8 0 0 0 -36.036-29.9l-7.46-1.861a8 8 0 0 0 -9.94 7.761v64h16v-53.665a37.883 37.883 0 0 1 24.41 24.2 8 8 0 0 0 7.59 5.465h72a8 8 0 0 0 7.59-5.47 37.886 37.886 0 0 1 24.41-24.196v130.509a24.091 24.091 0 0 0 15.7 22.521 208.309 208.309 0 0 1 136.3 195.467v97.169h-182.987a32.057 32.057 0 0 1 30.987-24h24a8 8 0 0 0 8-8v-40a72.081 72.081 0 0 1 72-72v-16a88.1 88.1 0 0 0 -88 88v32h-16a47.8 47.8 0 0 0 -32 12.261v-148.261h-16v176h-56v-6.111a20.832 20.832 0 0 1 11.578-18.734 8 8 0 0 0 4.422-7.155v-144h-16v139.446a36.709 36.709 0 0 0 -16 30.443v6.111h-32v-6.111a20.832 20.832 0 0 1 11.578-18.734 8 8 0 0 0 4.422-7.155v-344h-16v339.446a36.709 36.709 0 0 0 -16 30.443v14.111a8 8 0 0 0 8 8h392a80.139 80.139 0 0 0 75.446-53.334l-15.086-5.332a64.113 64.113 0 0 1 -60.36 42.666h-64v-24h64a40 40 0 0 0 0-80h-8a64 64 0 0 1 0-128h32a12 12 0 0 1 0 24h-32a40 40 0 0 0 0 80h8a64.072 64.072 0 0 1 64 64 65.03 65.03 0 0 1 -.392 7.122zm-87.513-32.878h8a24 24 0 0 1 0 48h-64v-57.169q0-7.132-.452-14.2a79.749 79.749 0 0 0 56.452 23.369z" fill="#cfcfcf"/><circle cx="80" cy="96" r="16" fill="#cfcfcf"/><circle cx="152" cy="96" r="16" fill="#cfcfcf"/><path d="m88 160h8a23.9 23.9 0 0 0 16-6.126 23.9 23.9 0 0 0 16 6.126h8a24.027 24.027 0 0 0 24-24h-16a8.009 8.009 0 0 1 -8 8h-8a8.009 8.009 0 0 1 -8-8c0-.232-.015-.46-.035-.687a11.992 11.992 0 0 0 -3.965-23.313h-8a11.992 11.992 0 0 0 -3.965 23.313c-.02.227-.035.455-.035.687a8.009 8.009 0 0 1 -8 8h-8a8.009 8.009 0 0 1 -8-8h-16a24.027 24.027 0 0 0 24 24z" fill="#cfcfcf"/></g><g transform="matrix(-0.024977943364550337 -0.08855815536434979 0.08855815536434979 -0.024977943364550337 218.67010590089325 165.9926586600161)" id="L1_5"><circle cx="10" cy="500" r="10" fill="#cfcfcf"/><circle cx="267" cy="245" r="10" fill="#cfcfcf"/><path d="M398.479,118.032c-8.071-8.072-18.802-12.516-30.216-12.516c-11.414,0-22.146,4.446-30.216,12.516    c-16.661,16.662-16.661,43.772,0,60.433c8.332,8.331,19.272,12.495,30.216,12.495c10.941,0,21.886-4.166,30.216-12.495    C415.14,161.803,415.14,134.693,398.479,118.032z M384.282,164.266c-8.833,8.832-23.206,8.832-32.037,0    c-8.833-8.832-8.833-23.204,0-32.037c4.279-4.279,9.967-6.635,16.018-6.635c6.051,0,11.739,2.356,16.018,6.635    C393.114,141.062,393.114,155.434,384.282,164.266z" fill="#cfcfcf"/><path d="M125.409,411.45c-4.964-2.472-10.99-0.451-13.462,4.512l-11.958,24.015c-5.2,10.441-15.658,17.423-27.296,18.219    l-13.908,0.952c-2.351,0.157-3.897-1.014-4.612-1.729s-1.889-2.264-1.729-4.613l0.952-13.907    c0.797-11.637,7.779-22.096,18.219-27.296l24.014-11.958c4.964-2.472,6.984-8.499,4.512-13.462    c-2.471-4.963-8.498-6.984-13.462-4.512l-24.014,11.958c-16.792,8.362-28.02,25.182-29.302,43.898l-0.952,13.907    c-0.514,7.507,2.242,14.863,7.562,20.183c4.898,4.898,11.523,7.624,18.403,7.624c0.591,0,1.186-0.02,1.78-0.061l13.908-0.952    c18.716-1.281,35.536-12.508,43.898-29.302l11.958-24.014C132.392,419.948,130.372,413.922,125.409,411.45z" fill="#cfcfcf"/><path d="M505.07,8.18c-4.711-4.641-11.201-7.068-17.793-6.639l-9.348,0.596c-83.819,5.351-162.262,45.81-215.215,111.004    L240.71,140.23l-57.583-1.691c-0.098-0.003-0.197-0.004-0.294-0.004c-45.668,0-88.603,17.784-120.896,50.076L2.959,247.59    c-2.805,2.805-3.696,7-2.272,10.702c1.424,3.703,4.894,6.221,8.856,6.423l124.844,6.414l-5.09,6.267    c-2.565,3.159-2.971,7.553-1.026,11.127c1.956,3.596,4.006,7.135,6.144,10.617l-29.606,35.147    c-2.531,3.005-3.076,7.211-1.397,10.763c6.467,13.665,15.05,25.943,25.514,36.493c10.718,10.808,23.251,19.646,37.249,26.271    c1.368,0.648,2.835,0.965,4.293,0.965c2.261,0,4.503-0.764,6.327-2.243c6.378-5.174,13.731-11.311,20.843-17.245    c5.069-4.23,10.255-8.557,15.102-12.547c2.893,1.741,5.822,3.429,8.795,5.046c1.504,0.818,3.153,1.221,4.796,1.221    c2.186,0,4.358-0.712,6.156-2.108l6.843-5.31l6.442,125.37c0.204,3.962,2.721,7.432,6.423,8.856c1.172,0.45,2.39,0.67,3.6,0.67    c2.615,0,5.183-1.023,7.101-2.942l58.979-58.979c32.293-32.293,50.076-75.227,50.076-120.896v-54.995l23.267-18.055    c69.729-54.11,112.196-135.704,116.512-223.862l0.239-4.886C512.295,19.27,509.779,12.822,505.07,8.18z M33.123,245.822    l43.012-43.012c28.465-28.465,66.303-44.157,106.553-44.196l42.085,1.236l-74.71,91.98L33.123,245.822z M184.774,373.874    c-5.241,4.372-10.614,8.856-15.6,12.957c-9.644-5.223-18.368-11.74-25.992-19.428c-7.384-7.445-13.669-15.922-18.737-25.26    l21.676-25.733c6.554,8.793,13.728,17.122,21.478,24.925c0.006,0.006,0.012,0.011,0.018,0.017    c0.002,0.002,0.004,0.005,0.006,0.007c0.003,0.003,0.006,0.005,0.009,0.008c8.593,8.648,17.836,16.584,27.641,23.761    C191.811,368.002,188.264,370.962,184.774,373.874z M351.875,327.672c0,40.305-15.695,78.197-44.196,106.698l-43.012,43.012    l-6.002-116.792l93.209-72.33V327.672z M491.678,29.779c-4.029,82.297-43.673,158.467-108.767,208.98l-157.46,122.189    c-13.058-7.63-25.229-16.639-36.368-26.846l53.086-53.086c3.92-3.92,3.92-10.278,0-14.199c-3.921-3.921-10.278-3.921-14.199,0    l-53.036,53.036c-9.751-10.795-18.387-22.541-25.74-35.104L278.3,125.8C327.732,64.941,400.96,27.171,479.207,22.177l9.348-0.596    c1.225-0.076,2.045,0.532,2.423,0.904c0.377,0.371,1,1.178,0.94,2.409L491.678,29.779z" fill="#cfcfcf"/></g><g transform="matrix(-0.08572983577887992 0.029393086643328827 0.029393086643328827 0.08572983577887992 42.98460330273765 243.5191723890403)"><path d="m495.513 424.878a81.368 81.368 0 0 0 .487-8.878 80.091 80.091 0 0 0 -80-80h-8a24 24 0 0 1 0-48h32a28 28 0 0 0 0-56h-32a80.133 80.133 0 0 0 -76.585 56.9 225.667 225.667 0 0 0 -19.729-34.366 223.259 223.259 0 0 0 -106.452-82.184 8.03 8.03 0 0 1 -5.234-7.507v-140.843a8 8 0 0 0 -9.94-7.761l-7.46 1.861a53.8 53.8 0 0 0 -36.036 29.9h-61.128a53.8 53.8 0 0 0 -36.036-29.9l-7.46-1.861a8 8 0 0 0 -9.94 7.761v64h16v-53.665a37.883 37.883 0 0 1 24.41 24.2 8 8 0 0 0 7.59 5.465h72a8 8 0 0 0 7.59-5.47 37.886 37.886 0 0 1 24.41-24.196v130.509a24.091 24.091 0 0 0 15.7 22.521 208.309 208.309 0 0 1 136.3 195.467v97.169h-182.987a32.057 32.057 0 0 1 30.987-24h24a8 8 0 0 0 8-8v-40a72.081 72.081 0 0 1 72-72v-16a88.1 88.1 0 0 0 -88 88v32h-16a47.8 47.8 0 0 0 -32 12.261v-148.261h-16v176h-56v-6.111a20.832 20.832 0 0 1 11.578-18.734 8 8 0 0 0 4.422-7.155v-144h-16v139.446a36.709 36.709 0 0 0 -16 30.443v6.111h-32v-6.111a20.832 20.832 0 0 1 11.578-18.734 8 8 0 0 0 4.422-7.155v-344h-16v339.446a36.709 36.709 0 0 0 -16 30.443v14.111a8 8 0 0 0 8 8h392a80.139 80.139 0 0 0 75.446-53.334l-15.086-5.332a64.113 64.113 0 0 1 -60.36 42.666h-64v-24h64a40 40 0 0 0 0-80h-8a64 64 0 0 1 0-128h32a12 12 0 0 1 0 24h-32a40 40 0 0 0 0 80h8a64.072 64.072 0 0 1 64 64 65.03 65.03 0 0 1 -.392 7.122zm-87.513-32.878h8a24 24 0 0 1 0 48h-64v-57.169q0-7.132-.452-14.2a79.749 79.749 0 0 0 56.452 23.369z" fill="#cfcfcf"/><circle cx="80" cy="96" r="16" fill="#cfcfcf"/><circle cx="152" cy="96" r="16" fill="#cfcfcf"/><path d="m88 160h8a23.9 23.9 0 0 0 16-6.126 23.9 23.9 0 0 0 16 6.126h8a24.027 24.027 0 0 0 24-24h-16a8.009 8.009 0 0 1 -8 8h-8a8.009 8.009 0 0 1 -8-8c0-.232-.015-.46-.035-.687a11.992 11.992 0 0 0 -3.965-23.313h-8a11.992 11.992 0 0 0 -3.965 23.313c-.02.227-.035.455-.035.687a8.009 8.009 0 0 1 -8 8h-8a8.009 8.009 0 0 1 -8-8h-16a24.027 24.027 0 0 0 24 24z" fill="#cfcfcf"/></g><g transform="matrix(0.08311941197781797 0.01572529460686508 -0.01572529460686508 0.08311941197781797 16.72698823122436 278.6968786619945)"><circle cx="10" cy="500" r="10" fill="#cfcfcf"/><circle cx="267" cy="245" r="10" fill="#cfcfcf"/><path d="M398.479,118.032c-8.071-8.072-18.802-12.516-30.216-12.516c-11.414,0-22.146,4.446-30.216,12.516    c-16.661,16.662-16.661,43.772,0,60.433c8.332,8.331,19.272,12.495,30.216,12.495c10.941,0,21.886-4.166,30.216-12.495    C415.14,161.803,415.14,134.693,398.479,118.032z M384.282,164.266c-8.833,8.832-23.206,8.832-32.037,0    c-8.833-8.832-8.833-23.204,0-32.037c4.279-4.279,9.967-6.635,16.018-6.635c6.051,0,11.739,2.356,16.018,6.635    C393.114,141.062,393.114,155.434,384.282,164.266z" fill="#cfcfcf"/><path d="M125.409,411.45c-4.964-2.472-10.99-0.451-13.462,4.512l-11.958,24.015c-5.2,10.441-15.658,17.423-27.296,18.219    l-13.908,0.952c-2.351,0.157-3.897-1.014-4.612-1.729s-1.889-2.264-1.729-4.613l0.952-13.907    c0.797-11.637,7.779-22.096,18.219-27.296l24.014-11.958c4.964-2.472,6.984-8.499,4.512-13.462    c-2.471-4.963-8.498-6.984-13.462-4.512l-24.014,11.958c-16.792,8.362-28.02,25.182-29.302,43.898l-0.952,13.907    c-0.514,7.507,2.242,14.863,7.562,20.183c4.898,4.898,11.523,7.624,18.403,7.624c0.591,0,1.186-0.02,1.78-0.061l13.908-0.952    c18.716-1.281,35.536-12.508,43.898-29.302l11.958-24.014C132.392,419.948,130.372,413.922,125.409,411.45z" fill="#cfcfcf"/><path d="M505.07,8.18c-4.711-4.641-11.201-7.068-17.793-6.639l-9.348,0.596c-83.819,5.351-162.262,45.81-215.215,111.004    L240.71,140.23l-57.583-1.691c-0.098-0.003-0.197-0.004-0.294-0.004c-45.668,0-88.603,17.784-120.896,50.076L2.959,247.59    c-2.805,2.805-3.696,7-2.272,10.702c1.424,3.703,4.894,6.221,8.856,6.423l124.844,6.414l-5.09,6.267    c-2.565,3.159-2.971,7.553-1.026,11.127c1.956,3.596,4.006,7.135,6.144,10.617l-29.606,35.147    c-2.531,3.005-3.076,7.211-1.397,10.763c6.467,13.665,15.05,25.943,25.514,36.493c10.718,10.808,23.251,19.646,37.249,26.271    c1.368,0.648,2.835,0.965,4.293,0.965c2.261,0,4.503-0.764,6.327-2.243c6.378-5.174,13.731-11.311,20.843-17.245    c5.069-4.23,10.255-8.557,15.102-12.547c2.893,1.741,5.822,3.429,8.795,5.046c1.504,0.818,3.153,1.221,4.796,1.221    c2.186,0,4.358-0.712,6.156-2.108l6.843-5.31l6.442,125.37c0.204,3.962,2.721,7.432,6.423,8.856c1.172,0.45,2.39,0.67,3.6,0.67    c2.615,0,5.183-1.023,7.101-2.942l58.979-58.979c32.293-32.293,50.076-75.227,50.076-120.896v-54.995l23.267-18.055    c69.729-54.11,112.196-135.704,116.512-223.862l0.239-4.886C512.295,19.27,509.779,12.822,505.07,8.18z M33.123,245.822    l43.012-43.012c28.465-28.465,66.303-44.157,106.553-44.196l42.085,1.236l-74.71,91.98L33.123,245.822z M184.774,373.874    c-5.241,4.372-10.614,8.856-15.6,12.957c-9.644-5.223-18.368-11.74-25.992-19.428c-7.384-7.445-13.669-15.922-18.737-25.26    l21.676-25.733c6.554,8.793,13.728,17.122,21.478,24.925c0.006,0.006,0.012,0.011,0.018,0.017    c0.002,0.002,0.004,0.005,0.006,0.007c0.003,0.003,0.006,0.005,0.009,0.008c8.593,8.648,17.836,16.584,27.641,23.761    C191.811,368.002,188.264,370.962,184.774,373.874z M351.875,327.672c0,40.305-15.695,78.197-44.196,106.698l-43.012,43.012    l-6.002-116.792l93.209-72.33V327.672z M491.678,29.779c-4.029,82.297-43.673,158.467-108.767,208.98l-157.46,122.189    c-13.058-7.63-25.229-16.639-36.368-26.846l53.086-53.086c3.92-3.92,3.92-10.278,0-14.199c-3.921-3.921-10.278-3.921-14.199,0    l-53.036,53.036c-9.751-10.795-18.387-22.541-25.74-35.104L278.3,125.8C327.732,64.941,400.96,27.171,479.207,22.177l9.348-0.596    c1.225-0.076,2.045,0.532,2.423,0.904c0.377,0.371,1,1.178,0.94,2.409L491.678,29.779z" fill="#cfcfcf"/></g></defs><g fi:class="KUsePattern"><pattern id="pattern_L1_0" width="350" height="350" patternUnits="userSpaceOnUse"><use xlink:href="#L1_0" x="-350" y="-350"/><use xlink:href="#L1_0" x="0" y="-350"/><use xlink:href="#L1_0" x="350" y="-350"/><use xlink:href="#L1_0" x="-350" y="0"/><use xlink:href="#L1_0" x="0" y="0"/><use xlink:href="#L1_0" x="350" y="0"/><use xlink:href="#L1_0" x="-350" y="350"/><use xlink:href="#L1_0" x="0" y="350"/><use xlink:href="#L1_0" x="350" y="350"/></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern_L1_0)"/></g><g fi:class="KUsePattern"><pattern id="pattern_L1_5" width="350" height="350" patternUnits="userSpaceOnUse"><use xlink:href="#L1_5" x="-350" y="-350"/><use xlink:href="#L1_5" x="0" y="-350"/><use xlink:href="#L1_5" x="350" y="-350"/><use xlink:href="#L1_5" x="-350" y="0"/><use xlink:href="#L1_5" x="0" y="0"/><use xlink:href="#L1_5" x="350" y="0"/><use xlink:href="#L1_5" x="-350" y="350"/><use xlink:href="#L1_5" x="0" y="350"/><use xlink:href="#L1_5" x="350" y="350"/></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern_L1_5)"/></g><g fi:class="KUsePattern" transform="matrix(1 0 0 1 20 20)"><pattern id="pattern_UNKNOWN" width="350" height="350" patternUnits="userSpaceOnUse"><use xlink:href="#UNKNOWN" x="-350" y="-350"/><use xlink:href="#UNKNOWN" x="0" y="-350"/><use xlink:href="#UNKNOWN" x="350" y="-350"/><use xlink:href="#UNKNOWN" x="-350" y="0"/><use xlink:href="#UNKNOWN" x="0" y="0"/><use xlink:href="#UNKNOWN" x="350" y="0"/><use xlink:href="#UNKNOWN" x="-350" y="350"/><use xlink:href="#UNKNOWN" x="0" y="350"/><use xlink:href="#UNKNOWN" x="350" y="350"/></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern_UNKNOWN)"/></g><g fi:class="KUsePattern" transform="matrix(1 0 0 1 20 20)"><pattern id="pattern_UNKNOWN" width="350" height="350" patternUnits="userSpaceOnUse"><use xlink:href="#UNKNOWN" x="-350" y="-350"/><use xlink:href="#UNKNOWN" x="0" y="-350"/><use xlink:href="#UNKNOWN" x="350" y="-350"/><use xlink:href="#UNKNOWN" x="-350" y="0"/><use xlink:href="#UNKNOWN" x="0" y="0"/><use xlink:href="#UNKNOWN" x="350" y="0"/><use xlink:href="#UNKNOWN" x="-350" y="350"/><use xlink:href="#UNKNOWN" x="0" y="350"/><use xlink:href="#UNKNOWN" x="350" y="350"/></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern_UNKNOWN)"/></g></svg>


--------------------------------------------------------------------------------
/final/client/src/components/__tests__/module-detail.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { renderWithRouter, cleanup } from '../../utils/test-utils';
 3 | import ModuleDetail from '../module-detail';
 4 | 
 5 | const mockModule = {
 6 |   id: 'l_1',
 7 |   title: 'The Night Sky',
 8 |   content:
 9 |     '# Et tempus voces tigride remisso fer coimus\n\n## Montibus arbusta detrectas haud\n\n',
10 |   thumbnail: null,
11 |   videoUrl: 'https://youtu.be/dlKzlksOUtU',
12 |   topic: 'Cat-stronomy',
13 |   length: 164,
14 | };
15 | 
16 | const mockParentTrack = {
17 |   id: 'c_0',
18 |   title: 'Cat-stronomy, an introduction',
19 |   description: '# Pulchra vehi vidit misera sola armenta secabatur\n\n',
20 |   thumbnail:
21 |     'https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg',
22 |   trackLength: 2377,
23 |   modulesCount: 10,
24 |   numberOfViews: 51,
25 |   author: {
26 |     name: 'Henri, le Chat Noir',
27 |     photo:
28 |       'https://images.unsplash.com/photo-1442291928580-fb5d0856a8f1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
29 |   },
30 |   modules: [
31 |     {
32 |       id: 'l_0',
33 |       title: 'Exploring Time and Space',
34 |       length: 258,
35 |     },
36 |   ],
37 | };
38 | 
39 | describe('Module Detail View', () => {
40 |   // automatically unmount and cleanup DOM after the test is finished.
41 |   afterEach(cleanup);
42 | 
43 |   it('renders without error', () => {
44 |     renderWithRouter(<ModuleDetail module={mockModule} track={mockParentTrack} />);
45 |   });
46 | });
47 | 


--------------------------------------------------------------------------------
/final/client/src/components/__tests__/modules-navigation.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { renderWithRouter, cleanup } from '../../utils/test-utils';
 3 | import ModuleNav from '../modules-navigation';
 4 | 
 5 | const mockModule = {
 6 |   id: 'l_1',
 7 |   title: 'The Night Sky',
 8 |   content:
 9 |     '# Et tempus voces tigride remisso fer coimus\n\n## Montibus arbusta detrectas haud\n\n',
10 |   thumbnail: null,
11 |   videoUrl: 'https://youtu.be/dlKzlksOUtU',
12 |   topic: 'Cat-stronomy',
13 |   length: 164,
14 | };
15 | 
16 | const mockParentTrack = {
17 |   id: 'c_0',
18 |   title: 'Cat-stronomy, an introduction',
19 |   description: '# Pulchra vehi vidit misera sola armenta secabatur\n\n',
20 |   thumbnail:
21 |     'https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg',
22 |   trackLength: 2377,
23 |   modulesCount: 10,
24 |   numberOfViews: 51,
25 |   author: {
26 |     name: 'Henri, le Chat Noir',
27 |     photo:
28 |       'https://images.unsplash.com/photo-1442291928580-fb5d0856a8f1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
29 |   },
30 |   modules: [
31 |     {
32 |       id: 'l_0',
33 |       title: 'Exploring Time and Space',
34 |       length: 258,
35 |     },
36 |   ],
37 | };
38 | 
39 | describe('Modules Navigation View', () => {
40 |   // automatically unmount and cleanup DOM after the test is finished.
41 |   afterEach(cleanup);
42 | 
43 |   it('renders without error', () => {
44 |     renderWithRouter(<ModuleNav module={mockModule} track={mockParentTrack} />);
45 |   });
46 | });
47 | 


--------------------------------------------------------------------------------
/final/client/src/components/__tests__/query-result.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render, cleanup } from '../../utils/test-utils';
 3 | import QueryResult from '../query-result';
 4 | 
 5 | describe('Query Result', () => {
 6 |   // automatically unmount and cleanup DOM after the test is finished.
 7 |   afterEach(cleanup);
 8 | 
 9 |   it('renders loading state', async () => {
10 |     const { getByTestId } = render(<QueryResult loading={true} />);
11 |     getByTestId(/spinner/i);
12 |   });
13 | 
14 |   it('renders No Data message', async () => {
15 |     // passing no error and no data
16 |     const { getByText } = render(<QueryResult loading={false} />);
17 |     getByText(/nothing to show/i);
18 |   });
19 | 
20 |   it('renders Error', async () => {
21 |     const { getByText } = render(<QueryResult error={new Error('you lose')} />);
22 |     getByText(/you lose/i);
23 |   });
24 | });
25 | 


--------------------------------------------------------------------------------
/final/client/src/components/__tests__/track-detail.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { renderWithRouter, cleanup } from '../../utils/test-utils';
 3 | import TrackDetail from '../track-detail';
 4 | 
 5 | const mockTrack = {
 6 |   track: {
 7 |     id: 'c_0',
 8 |     title: 'Cat-stronomy, an introduction',
 9 |     description: '# Pulchra vehi vidit misera sola armenta secabatur\n\n',
10 |     thumbnail:
11 |       'https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg',
12 |     length: 2377,
13 |     modulesCount: 10,
14 |     numberOfViews: 51,
15 |     author: {
16 |       name: 'Henri, le Chat Noir',
17 |       photo:
18 |         'https://images.unsplash.com/photo-1442291928580-fb5d0856a8f1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
19 |     },
20 |     modules: [
21 |       {
22 |         id: 'l_0',
23 |         title: 'Exploring Time and Space',
24 |         length: 258,
25 |       },
26 |     ],
27 |   },
28 | };
29 | 
30 | describe('Module Detail View', () => {
31 |   // automatically unmount and cleanup DOM after the test is finished.
32 |   afterEach(cleanup);
33 | 
34 |   it('renders without error', () => {
35 |     renderWithRouter(<TrackDetail {...mockTrack} />);
36 |   });
37 | });
38 | 


--------------------------------------------------------------------------------
/final/client/src/components/content-section.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from '@emotion/styled';
 3 | import { widths, colors } from '../styles';
 4 | 
 5 | /**
 6 |  * Content Section component renders content (mainly text/mdown based)
 7 |  * for course detail and lesson detail
 8 |  */
 9 | const ContentSection = ({ children }) => {
10 |   return <ContentDiv>{children}</ContentDiv>;
11 | };
12 | 
13 | export default ContentSection;
14 | 
15 | /** ContentSection styled component */
16 | const ContentDiv = styled.div({
17 |   marginTop: 10,
18 |   display: 'flex',
19 |   flexDirection: 'column',
20 |   maxWidth: widths.textPageWidth,
21 |   width: '100%',
22 |   alignSelf: 'center',
23 |   backgroundColor: colors.background,
24 | });
25 | 


--------------------------------------------------------------------------------
/final/client/src/components/footer.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from '@emotion/styled';
 3 | import { colors, ApolloIcon } from '../styles';
 4 | 
 5 | /**
 6 |  * Footer is useless component to make our app look a little closer to a real website!
 7 |  */
 8 | const Footer = ({ children }) => {
 9 |   return (
10 |     <FooterContainer>
11 |       {new Date().getFullYear()} ©{' '}
12 |       <LogoContainer>
13 |         <ApolloIcon width="100px" height="40px" />
14 |       </LogoContainer>
15 |     </FooterContainer>
16 |   );
17 | };
18 | 
19 | export default Footer;
20 | 
21 | /** Footer styled components */
22 | const FooterContainer = styled.div({
23 |   display: 'flex',
24 |   flexDirection: 'row',
25 |   justifyContent: 'center',
26 |   alignItems: 'center',
27 |   color: colors.pink.base,
28 |   marginTop: 30,
29 |   height: 200,
30 |   padding: 20,
31 |   backgroundColor: 'white',
32 |   borderTop: `solid 1px ${colors.pink.light}`,
33 | });
34 | 
35 | const LogoContainer = styled.div({
36 |   height: 40,
37 |   marginLeft: 5,
38 |   svg: {
39 |     height: 40,
40 |   },
41 | });
42 | 


--------------------------------------------------------------------------------
/final/client/src/components/header.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { colors, widths } from '../styles';
 3 | import styled from '@emotion/styled';
 4 | import { Link } from 'react-router-dom';
 5 | import logo from '../assets/space_cat_logo.png';
 6 | 
 7 | /**
 8 |  * Header renders the top navigation
 9 |  * for this particular tutorial level, it only holds the home button
10 |  */
11 | const Header = ({ children }) => {
12 |   return (
13 |     <HeaderBar>
14 |       <Container>
15 |         <HomeButtonContainer>
16 |           <HomeLink to="/">
17 |             <HomeButton>
18 |               <LogoContainer>
19 |                 <Logo src={logo} />
20 |               </LogoContainer>
21 |               <Title>
22 |                 <h3>Catstronaut</h3>
23 |                 <div>Kitty space academy</div>
24 |               </Title>
25 |             </HomeButton>
26 |           </HomeLink>
27 |         </HomeButtonContainer>
28 |         {children}
29 |       </Container>
30 |     </HeaderBar>
31 |   );
32 | };
33 | 
34 | export default Header;
35 | 
36 | /** Header styled components */
37 | const HeaderBar = styled.div({
38 |   display: 'flex',
39 |   flexDirection: 'row',
40 |   alignItems: 'center',
41 |   justifyContent: 'center',
42 |   borderBottom: `solid 1px ${colors.pink.light}`,
43 |   boxShadow: '0px 1px 5px 0px rgba(0,0,0,0.15)',
44 |   padding: '5px 30px',
45 |   minHeight: 80,
46 |   backgroundColor: 'white',
47 | });
48 | 
49 | const Container = styled.div({
50 |   width: `${widths.regularPageWidth}px`,
51 | });
52 | 
53 | const HomeLink = styled(Link)({
54 |   textDecoration: 'none',
55 | });
56 | 
57 | const HomeButtonContainer = styled.div({
58 |   display: 'flex',
59 |   flex: 1,
60 | });
61 | 
62 | const HomeButton = styled.div({
63 |   display: 'flex',
64 |   flexDirection: 'row',
65 |   color: colors.accent,
66 |   alignItems: 'center',
67 |   ':hover': {
68 |     color: colors.pink.dark,
69 |   },
70 | });
71 | 
72 | const LogoContainer = styled.div({ display: 'flex', alignSelf: 'center' });
73 | 
74 | const Logo = styled.img({
75 |   height: 60,
76 |   width: 60,
77 |   marginRight: 8,
78 | });
79 | 
80 | const Title = styled.div({
81 |   display: 'flex',
82 |   flexDirection: 'column',
83 |   h3: {
84 |     lineHeight: '1em',
85 |     marginBottom: 0,
86 |   },
87 |   div: {
88 |     fontSize: '0.9em',
89 |     lineHeight: '0.8em',
90 |     paddingLeft: 2,
91 |   },
92 | });
93 | 


--------------------------------------------------------------------------------
/final/client/src/components/index.js:
--------------------------------------------------------------------------------
1 | export { default as Footer } from './footer';
2 | export { default as Header } from './header';
3 | export { default as Layout } from './layout';
4 | export { default as ModuleDetail } from './module-detail';
5 | export { default as QueryResult } from './query-result';
6 | 


--------------------------------------------------------------------------------
/final/client/src/components/layout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Header, Footer } from '../components';
 3 | import styled from '@emotion/styled';
 4 | import { widths, unit } from '../styles';
 5 | 
 6 | /**
 7 |  * Layout renders the full page content:
 8 |  * with header, Page container and footer
 9 |  */
10 | const Layout = ({ fullWidth, children, grid }) => {
11 |   return (
12 |     <>
13 |       <Header />
14 |       <PageContainer fullWidth={fullWidth} grid={grid}>
15 |         {children}
16 |       </PageContainer>
17 |       <Footer />
18 |     </>
19 |   );
20 | };
21 | 
22 | export default Layout;
23 | 
24 | /** Layout styled components */
25 | const PageContainer = styled.div((props) => ({
26 |   display: 'flex',
27 |   justifyContent: props.grid ? 'center' : 'top',
28 |   flexDirection: props.grid ? 'row' : 'column',
29 |   flexWrap: 'wrap',
30 |   alignSelf: 'center',
31 |   flexGrow: 1,
32 |   maxWidth: props.fullWidth ? undefined : `${widths.regularPageWidth}px`,
33 |   width: '100%',
34 |   padding: props.fullWidth ? 0 : unit * 2,
35 |   paddingBottom: unit * 5,
36 | }));
37 | 


--------------------------------------------------------------------------------
/final/client/src/components/md-content.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from '@emotion/styled';
 3 | import { colors } from '../styles';
 4 | import ReactMarkdown from 'react-markdown';
 5 | 
 6 | /**
 7 |  * Markdown component is a simple style wrapper for markdown content used across our app
 8 |  */
 9 | const MarkDown = ({ content }) => {
10 |   return <StyledMarkdown children={content} />;
11 | };
12 | 
13 | export default MarkDown;
14 | 
15 | /** Markdown styled components */
16 | const StyledMarkdown = styled(ReactMarkdown)({
17 |   color: colors.grey.darker,
18 | 
19 |   h1: {
20 |     fontSize: '1.7em',
21 |   },
22 |   h2: {
23 |     fontSize: '1.4em',
24 |   },
25 |   h3: {
26 |     fontSize: '1.2em',
27 |   },
28 |   a: {
29 |     color: colors.pink.base,
30 |   },
31 |   pre: {
32 |     padding: 20,
33 |     borderRadius: 4,
34 |     border: `solid 1px ${colors.silver.dark}`,
35 |     backgroundColor: colors.silver.base,
36 |     code: {
37 |       fontSize: '0.9em',
38 |     },
39 |   },
40 | });
41 | 


--------------------------------------------------------------------------------
/final/client/src/components/module-detail.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from '@emotion/styled';
 3 | import { colors, widths } from '../styles';
 4 | import useWindowDimensions from '../utils/useWindowDimensions';
 5 | import ContentSection from './content-section';
 6 | import ReactPlayer from 'react-player/youtube';
 7 | import ModulesNav from './modules-navigation';
 8 | import MarkDown from './md-content';
 9 | 
10 | /**
11 |  * Module Detail renders content of a given module:
12 |  * Video player, modules navigation and markdown content
13 |  */
14 | const ModuleDetail = ({ track, module }) => {
15 |   const { videoUrl, title, content } = module;
16 |   const { width } = useWindowDimensions();
17 | 
18 |   return (
19 |     <>
20 |       <TopSection>
21 |         <TopContainer totalWidth={width}>
22 |           <PlayerContainer>
23 |             <ReactPlayer url={videoUrl} width="100%" height="100%" />
24 |           </PlayerContainer>
25 |           <ModulesNav track={track} module={module}></ModulesNav>
26 |         </TopContainer>
27 |       </TopSection>
28 |       <ContentSection>
29 |         <ModuleTitle>{title}</ModuleTitle>
30 |         <MarkDown content={content} />
31 |       </ContentSection>
32 |     </>
33 |   );
34 | };
35 | 
36 | export default ModuleDetail;
37 | 
38 | /** Module Detail styled components */
39 | const TopSection = styled.div({
40 |   display: 'flex',
41 |   justifyContent: 'center',
42 |   backgroundColor: colors.black.base,
43 |   padding: 20,
44 |   borderBottom: `solid 1px ${colors.pink.base}`,
45 | });
46 | 
47 | const TopContainer = styled.div(({ totalWidth }) => ({
48 |   display: 'flex',
49 |   flexDirection: 'row',
50 |   alignSelf: 'center',
51 |   width: '100%',
52 |   maxWidth: widths.largePageWidth,
53 |   // 60 below removes 3 * 20 horizontal paddings (sides and inner between player and list)
54 |   height: ((totalWidth - 60) * (2 / 3)) / (16 / 9),
55 |   maxHeight: (widths.largePageWidth * (2 / 3)) / (16 / 9),
56 | }));
57 | 
58 | const PlayerContainer = styled.div({
59 |   width: '66%',
60 | });
61 | 
62 | const ModuleTitle = styled.h1({
63 |   marginTop: 10,
64 |   marginBottom: 30,
65 |   paddingBottom: 10,
66 |   color: colors.black.lighter,
67 |   borderBottom: `solid 1px ${colors.pink.base}`,
68 | });
69 | 


--------------------------------------------------------------------------------
/final/client/src/components/modules-navigation.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import styled from '@emotion/styled';
  3 | import { Link } from 'react-router-dom';
  4 | import { colors, IconArrowRight, IconDoubleArrowRight } from '../styles';
  5 | import { humanReadableTimeFromSeconds } from '../utils/helpers';
  6 | 
  7 | /**
  8 |  * Module Navigation: displays a list of modules titles
  9 |  * from a track and navigates to the modules page
 10 |  */
 11 | const ModulesNav = ({ module, track }) => {
 12 |   return (
 13 |     <ModulesNavContainer>
 14 |       <ModuleTitle>
 15 |         <h4>
 16 |           <Link to="../..">{track.title}</Link>
 17 |         </h4>
 18 |       </ModuleTitle>
 19 |       <ModulesList>
 20 |         {track.modules.map((navModule) => (
 21 |           <ModuleListItem key={`module_${navModule.id}`}>
 22 |             <div>
 23 |               <ModuleNavStyledLink
 24 |                 to={`/track/${track.id}/module/${navModule.id}`}
 25 |               >
 26 |                 <ModuleListItemContent isActive={navModule.id === module.id}>
 27 |                   {navModule.id === module.id ? (
 28 |                     <IconDoubleArrowRight width="14px" />
 29 |                   ) : (
 30 |                     <IconArrowRight width="14px" weight="thin" />
 31 |                   )}
 32 |                   <div>{navModule.title}</div>
 33 |                   <div>{humanReadableTimeFromSeconds(navModule.length)}</div>
 34 |                 </ModuleListItemContent>
 35 |               </ModuleNavStyledLink>
 36 |             </div>
 37 |           </ModuleListItem>
 38 |         ))}
 39 |       </ModulesList>
 40 |     </ModulesNavContainer>
 41 |   );
 42 | };
 43 | 
 44 | export default ModulesNav;
 45 | 
 46 | /** Module Navigation styled components */
 47 | const ModulesNavContainer = styled.div({
 48 |   width: '33%',
 49 |   position: 'relative',
 50 |   marginLeft: 20,
 51 |   backgroundColor: colors.black.light,
 52 |   borderRadius: 4,
 53 |   border: `solid 1px ${colors.black.lighter}`,
 54 |   overflow: 'auto',
 55 | });
 56 | 
 57 | const trackTitleHeight = 70;
 58 | 
 59 | const ModuleTitle = styled.div({
 60 |   display: 'flex',
 61 |   position: 'sticky',
 62 |   fontSize: '1.6em',
 63 |   fontWeight: '400',
 64 |   height: trackTitleHeight,
 65 |   alignItems: 'center',
 66 |   justifyContent: 'center',
 67 |   textAlign: 'center',
 68 |   backgroundColor: 'colors.pink.base',
 69 |   borderBottom: `solid 1px ${colors.pink.base}`,
 70 | 
 71 |   a: {
 72 |     textDecoration: 'none',
 73 |     color: colors.silver.base,
 74 |   },
 75 |   ':hover': {
 76 |     backgroundColor: colors.black.base,
 77 |   },
 78 | });
 79 | 
 80 | const ModulesList = styled.ul({
 81 |   listStyle: 'none',
 82 |   margin: 0,
 83 |   padding: 0,
 84 |   overflowY: 'scroll',
 85 |   height: `calc(100% - ${trackTitleHeight}px)`,
 86 | });
 87 | 
 88 | const ModuleListItem = styled.li((props) => ({
 89 |   borderBottom: `solid 1px ${colors.grey.darker}`,
 90 |   ':last-child': {
 91 |     borderBottom: 'none',
 92 |   },
 93 | }));
 94 | 
 95 | const ModuleNavStyledLink = styled(Link)({
 96 |   textDecoration: 'none',
 97 |   display: 'flex',
 98 |   alignItems: 'center',
 99 | });
100 | 
101 | const ModuleListItemContent = styled.div((props) => ({
102 |   backgroundColor: props.isActive ? colors.black.base : colors.black.light,
103 |   color: props.isActive ? colors.silver.lighter : colors.silver.darker,
104 |   minHeight: 80,
105 |   padding: '10px 20px',
106 |   display: 'flex',
107 |   alignItems: 'center',
108 |   justifyContent: 'space-between',
109 |   fontSize: '1.1em',
110 |   flex: 1,
111 |   ':hover': {
112 |     backgroundColor: props.isActive ? colors.black.dark : colors.black.base,
113 |     color: 'white',
114 |   },
115 | }));
116 | 


--------------------------------------------------------------------------------
/final/client/src/components/query-result.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from '@emotion/styled';
 3 | import { LoadingSpinner } from '@apollo/space-kit/Loaders/LoadingSpinner';
 4 | 
 5 | /**
 6 |  * Query Results conditionally renders Apollo useQuery hooks states:
 7 |  * loading, error or its children when data is ready
 8 |  */
 9 | const QueryResult = ({ loading, error, data, children }) => {
10 |   if (error) {
11 |     return <p>ERROR: {error.message}</p>;
12 |   }
13 |   if (loading) {
14 |     return (
15 |       <SpinnerContainer>
16 |         <LoadingSpinner data-testid="spinner" size="large" theme="grayscale" />
17 |       </SpinnerContainer>
18 |     );
19 |   }
20 |   if (!data) {
21 |     return <p>Nothing to show...</p>;
22 |   }
23 |   if (data) {
24 |     return children;
25 |   }
26 | };
27 | 
28 | export default QueryResult;
29 | 
30 | /** Query Result styled components */
31 | const SpinnerContainer = styled.div({
32 |   display: 'flex',
33 |   justifyContent: 'center',
34 |   alignItems: 'center',
35 |   width: '100%',
36 |   height: '100vh',
37 | });
38 | 


--------------------------------------------------------------------------------
/final/client/src/components/track-detail.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import styled from '@emotion/styled';
  3 | import {
  4 |   colors,
  5 |   Button,
  6 |   IconRun,
  7 |   IconView,
  8 |   IconTime,
  9 |   IconBook,
 10 | } from '../styles';
 11 | import { humanReadableTimeFromSeconds } from '../utils/helpers';
 12 | import { Link } from 'react-router-dom';
 13 | import ContentSection from './content-section';
 14 | import MarkDown from './md-content';
 15 | 
 16 | /**
 17 |  * Track Detail component renders the main content of a given track:
 18 |  * author, length, number of views, modules list, among other things.
 19 |  * It provides access to the first module of the track.
 20 |  */
 21 | const TrackDetail = ({ track }) => {
 22 |   const {
 23 |     title,
 24 |     description,
 25 |     thumbnail,
 26 |     author,
 27 |     length,
 28 |     modulesCount,
 29 |     modules,
 30 |     numberOfViews,
 31 |   } = track;
 32 | 
 33 |   return (
 34 |     <ContentSection>
 35 |       <CoverImage src={thumbnail} alt="" />
 36 |       <TrackDetails>
 37 |         <DetailRow>
 38 |           <h1>{title}</h1>
 39 |         </DetailRow>
 40 |         <DetailRow>
 41 |           <DetailItem>
 42 |             <h4>Track details</h4>
 43 |             <IconAndLabel>
 44 |               <IconView width="16px" />
 45 |               <div id="viewCount">{numberOfViews} view(s)</div>
 46 |             </IconAndLabel>
 47 |             <IconAndLabel>
 48 |               <IconBook width="14px" height="14px" />
 49 |               <div>{modulesCount} modules</div>
 50 |             </IconAndLabel>
 51 |             <IconAndLabel>
 52 |               <IconTime width="14px" />
 53 |               <div>{humanReadableTimeFromSeconds(length)}</div>
 54 |             </IconAndLabel>
 55 |           </DetailItem>
 56 |           <DetailItem>
 57 |             <h4>Author</h4>
 58 |             <AuthorImage src={author.photo} />
 59 |             <AuthorName>{author.name}</AuthorName>
 60 |           </DetailItem>
 61 |           <div>
 62 |             <StyledLink to={`./module/${modules[0]['id']}`}>
 63 |               <Button
 64 |                 icon={<IconRun width="20px" />}
 65 |                 color={colors.pink.base}
 66 |                 size="large"
 67 |               >
 68 |                 Start Track
 69 |               </Button>
 70 |             </StyledLink>
 71 |           </div>
 72 |         </DetailRow>
 73 |         <ModuleListContainer>
 74 |           <DetailItem>
 75 |             <h4>Modules</h4>
 76 |             <ul>
 77 |               {modules.map((module) => (
 78 |                 <li key={module.title}>
 79 |                   <div>{module.title}</div>
 80 |                   <ModuleLength>
 81 |                     {humanReadableTimeFromSeconds(module.length)}
 82 |                   </ModuleLength>
 83 |                 </li>
 84 |               ))}
 85 |             </ul>
 86 |           </DetailItem>
 87 |         </ModuleListContainer>
 88 |       </TrackDetails>
 89 |       <MarkDown content={description} />
 90 |     </ContentSection>
 91 |   );
 92 | };
 93 | 
 94 | export default TrackDetail;
 95 | 
 96 | /** Track detail styled components */
 97 | const CoverImage = styled.img({
 98 |   objectFit: 'cover',
 99 |   maxHeight: 400,
100 |   borderRadius: 4,
101 |   marginBottom: 30,
102 | });
103 | 
104 | const StyledLink = styled(Link)({
105 |   textDecoration: 'none',
106 |   color: 'white',
107 | });
108 | 
109 | const TrackDetails = styled.div({
110 |   display: 'flex',
111 |   flexDirection: 'column',
112 |   alignItems: 'center',
113 |   padding: 20,
114 |   borderRadius: 4,
115 |   marginBottom: 30,
116 |   border: `solid 1px ${colors.silver.dark}`,
117 |   backgroundColor: colors.silver.lighter,
118 |   h1: {
119 |     width: '100%',
120 |     textAlign: 'center',
121 |     marginBottom: 5,
122 |   },
123 |   h4: {
124 |     fontSize: '1.2em',
125 |     marginBottom: 5,
126 |     color: colors.text,
127 |   },
128 | });
129 | 
130 | const DetailRow = styled.div({
131 |   display: 'flex',
132 |   flexDirection: 'row',
133 |   justifyContent: 'space-between',
134 |   alignItems: 'center',
135 |   width: '100%',
136 |   paddingBottom: 20,
137 |   marginBottom: 20,
138 |   borderBottom: `solid 1px ${colors.silver.dark}`,
139 | });
140 | 
141 | const DetailItem = styled.div({
142 |   display: 'flex',
143 |   flexDirection: 'column',
144 |   alignItems: 'center',
145 |   justifyContent: 'space-between',
146 |   color: colors.textSecondary,
147 |   alignSelf: 'center',
148 | });
149 | 
150 | const AuthorImage = styled.img({
151 |   height: 30,
152 |   width: 30,
153 |   marginBottom: 8,
154 |   borderRadius: '50%',
155 |   objectFit: 'cover',
156 | });
157 | 
158 | const AuthorName = styled.div({
159 |   lineHeight: '1em',
160 |   fontSize: '1em',
161 | });
162 | 
163 | const IconAndLabel = styled.div({
164 |   display: 'flex',
165 |   flex: 'row',
166 |   alignItems: 'center',
167 |   maxHeight: 20,
168 |   width: '100%',
169 |   div: {
170 |     marginLeft: 8,
171 |   },
172 |   svg: {
173 |     maxHeight: 16,
174 |   },
175 |   '#viewCount': {
176 |     color: colors.pink.base,
177 |   },
178 | });
179 | 
180 | const ModuleListContainer = styled.div({
181 |   width: '100%',
182 |   ul: {
183 |     listStyle: 'none',
184 |     padding: 0,
185 |     margin: 0,
186 |     marginTop: 5,
187 |     li: {
188 |       fontSize: '1em',
189 |       display: 'flex',
190 |       justifyContent: 'space-between',
191 |       paddingBottom: 2,
192 |     },
193 |   },
194 | });
195 | 
196 | const ModuleLength = styled.div({
197 |   marginLeft: 30,
198 |   color: colors.grey.light,
199 | });
200 | 


--------------------------------------------------------------------------------
/final/client/src/containers/__tests__/track-card.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { renderApolloWithRouter, cleanup, waitForElement } from '../../utils/test-utils';
 3 | import TrackCard from '../track-card';
 4 | 
 5 | const mockTrackCardData = {
 6 |   id: 'c_0',
 7 |   title: 'Cat-stronomy, an introduction',
 8 |   thumbnail:
 9 |     'https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg',
10 |   length: 2377,
11 |   author: {
12 |     name: 'Henri, le Chat Noir',
13 |     photo:
14 |       'https://images.unsplash.com/photo-1442291928580-fb5d0856a8f1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
15 |   },
16 | };
17 | 
18 | describe('Track Card', () => {
19 |   // automatically unmount and cleanup DOM after the test is finished.
20 |   afterEach(cleanup);
21 | 
22 |   it('renders track Card', async () => {
23 |     const mocks = [];
24 |     const { getByText } = await renderApolloWithRouter(
25 |       <TrackCard track={mockTrackCardData} />,
26 |       {
27 |         mocks,
28 |         resolvers: {},
29 |         addTypename: false,
30 |       }
31 |     );
32 |     await waitForElement(() => getByText(/cat-stronomy/i));
33 |   });
34 | });
35 | 


--------------------------------------------------------------------------------
/final/client/src/containers/track-card.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import styled from '@emotion/styled';
  3 | import { colors, mq } from '../styles';
  4 | import { humanReadableTimeFromSeconds } from '../utils/helpers';
  5 | 
  6 | /**
  7 |  * Track Card component renders basic info in a card format
  8 |  * for each track populating the tracks grid homepage.
  9 |  */
 10 | const TrackCard = ({ track }) => {
 11 |   const { title, thumbnail, author, length, modulesCount } = track;
 12 | 
 13 |   return (
 14 |     <CardContainer>
 15 |       <CardContent>
 16 |         <CardImageContainer>
 17 |           <CardImage src={thumbnail} alt={title} />
 18 |         </CardImageContainer>
 19 |         <CardBody>
 20 |           <CardTitle>{title || ''}</CardTitle>
 21 |           <CardFooter>
 22 |             <AuthorImage src={author.photo} />
 23 |             <AuthorAndTrack>
 24 |               <AuthorName>{author.name}</AuthorName>
 25 |               <TrackLength>
 26 |                 {modulesCount} modules - {humanReadableTimeFromSeconds(length)}
 27 |               </TrackLength>
 28 |             </AuthorAndTrack>
 29 |           </CardFooter>
 30 |         </CardBody>
 31 |       </CardContent>
 32 |     </CardContainer>
 33 |   );
 34 | };
 35 | 
 36 | export default TrackCard;
 37 | 
 38 | /** Track Card styled components */
 39 | const CardContainer = styled.div({
 40 |   borderRadius: 6,
 41 |   color: colors.text,
 42 |   backgroundSize: 'cover',
 43 |   backgroundColor: 'white',
 44 |   boxShadow: '0px 1px 5px 0px rgba(0,0,0,0.15)',
 45 |   backgroundPosition: 'center',
 46 |   display: 'flex',
 47 |   flexDirection: 'column',
 48 |   justifyContent: 'space-between',
 49 |   [mq[0]]: {
 50 |     width: '90%',
 51 |   },
 52 |   [mq[1]]: {
 53 |     width: '47%',
 54 |   },
 55 |   [mq[2]]: {
 56 |     width: '31%',
 57 |   },
 58 |   height: 380,
 59 |   margin: 10,
 60 |   overflow: 'hidden',
 61 |   position: 'relative',
 62 |   ':hover': {
 63 |     backgroundColor: colors.pink.lightest,
 64 |   },
 65 |   cursor: 'pointer',
 66 | });
 67 | 
 68 | const CardContent = styled.div({
 69 |   display: 'flex',
 70 |   flexDirection: 'column',
 71 |   justifyContent: 'space-around',
 72 |   height: '100%',
 73 | });
 74 | 
 75 | const CardTitle = styled.h3({
 76 |   textAlign: 'center',
 77 |   fontSize: '1.4em',
 78 |   lineHeight: '1em',
 79 |   fontWeight: 700,
 80 |   color: colors.text,
 81 |   flex: 1,
 82 | });
 83 | 
 84 | const CardImageContainer = styled.div({
 85 |   height: 220,
 86 |   position: 'relative',
 87 |   '::after': {
 88 |     content: '""',
 89 |     position: 'absolute',
 90 |     top: 0,
 91 |     bottom: 0,
 92 |     left: 0,
 93 |     right: 0,
 94 |     background: 'rgba(250,0,150,0.20)',
 95 |   },
 96 | });
 97 | 
 98 | const CardImage = styled.img({
 99 |   objectFit: 'cover',
100 |   width: '100%',
101 |   height: '100%',
102 |   filter: 'grayscale(60%)',
103 | });
104 | 
105 | const CardBody = styled.div({
106 |   padding: 18,
107 |   flex: 1,
108 |   display: 'flex',
109 |   color: colors.textSecondary,
110 |   flexDirection: 'column',
111 |   justifyContent: 'space-around',
112 | });
113 | 
114 | const CardFooter = styled.div({
115 |   display: 'flex',
116 |   flexDirection: 'row',
117 | });
118 | 
119 | const AuthorImage = styled.img({
120 |   height: 30,
121 |   width: 30,
122 |   marginRight: 8,
123 |   borderRadius: '50%',
124 |   objectFit: 'cover',
125 | });
126 | 
127 | const AuthorAndTrack = styled.div({
128 |   display: 'flex',
129 |   flexDirection: 'column',
130 |   justifyContent: 'space-between',
131 | });
132 | 
133 | const AuthorName = styled.div({
134 |   lineHeight: '1em',
135 |   fontSize: '1.1em',
136 | });
137 | 
138 | const TrackLength = styled.div({
139 |   fontSize: '0.8em',
140 | });
141 | 


--------------------------------------------------------------------------------
/final/client/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { createRoot } from 'react-dom/client'
 3 | import GlobalStyles from './styles';
 4 | import Pages from './pages';
 5 | import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';
 6 | 
 7 | const client = new ApolloClient({
 8 |   uri: 'http://localhost:4000',
 9 |   cache: new InMemoryCache(),
10 | });
11 | 
12 | const root = createRoot(document.getElementById('root'));
13 | 
14 | root.render(
15 |   <ApolloProvider client={client}>
16 |     <GlobalStyles />
17 |     <Pages />
18 |   </ApolloProvider>
19 | );
20 | 


--------------------------------------------------------------------------------
/final/client/src/pages/__tests__/tracks.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | // this adds custom jest matchers from jest-dom
  3 | import '@testing-library/jest-dom/extend-expect';
  4 | import { InMemoryCache, gql } from '@apollo/client';
  5 | import { renderApolloWithRouter, cleanup, waitForElement } from '../../utils/test-utils';
  6 | import Tracks from '../tracks';
  7 | 
  8 | /** Best practice is to export this operation from the component file. We've defined it separately to remain consistent with the course content. */
  9 | const TRACKS = gql`
 10 |   query getTracks {
 11 |     tracksForHome {
 12 |       id
 13 |       title
 14 |       thumbnail
 15 |       length
 16 |       modulesCount
 17 |       author {
 18 |         name
 19 |         photo
 20 |       }
 21 |     }
 22 |   }
 23 | `;
 24 | 
 25 | const mockTrack = {
 26 |   id: 'c_0',
 27 |   title: 'Nap, the hard way',
 28 |   thumbnail:
 29 |     'https://images.unsplash.com/photo-1542403810-74c578300013?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
 30 |   length: 1420,
 31 |   modulesCount: 6,
 32 |   author: {
 33 |     name: 'Cheshire Cat',
 34 |     photo:
 35 |       'https://images.unsplash.com/photo-1593627010886-d34828365da7?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
 36 |   },
 37 | };
 38 | 
 39 | describe('Tracks Page', () => {
 40 |   afterEach(cleanup);
 41 |   const cache = new InMemoryCache({ addTypename: false });
 42 | 
 43 |   it('renders tracks', async () => {
 44 |     const mocks = [
 45 |       {
 46 |         request: { query: TRACKS },
 47 |         result: {
 48 |           data: {
 49 |             tracksForHome: [mockTrack],
 50 |           },
 51 |         },
 52 |       },
 53 |     ];
 54 | 
 55 |     const { getByText } = await renderApolloWithRouter(<Tracks />, {
 56 |       mocks,
 57 |       cache,
 58 |     });
 59 | 
 60 |     await waitForElement(() => getByText(/nap, the hard way/i));
 61 |   });
 62 | });
 63 | 
 64 | /*
 65 | import React from 'react';
 66 | import { renderApollo, cleanup, waitForElement } from '../../test-utils';
 67 | import { InMemoryCache } from '@apollo/client';
 68 | 
 69 | import Tracks, { TRACKS } from '../tracks';
 70 | const mockTrack = {
 71 |   id: 'c_0',
 72 |   title: 'Nap, the hard way',
 73 |   thumbnail:
 74 |     'https://images.unsplash.com/photo-1542403810-74c578300013?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
 75 |   trackLength: 1420,
 76 |   author: {
 77 |     name: 'Cheshire Cat',
 78 |   },
 79 | };
 80 | 
 81 | describe('Tracks Page', () => {
 82 |   // automatically unmount and cleanup DOM after the test is finished.
 83 |   afterEach(cleanup);
 84 | 
 85 |   it('renders tracks', async () => {
 86 |     const cache = new InMemoryCache({ addTypename: false });
 87 |     const mocks = [
 88 |       {
 89 |         request: { query: TRACKS },
 90 |         result: {
 91 |           data: {
 92 |             tracks: [mockTrack],
 93 |           },
 94 |         },
 95 |       },
 96 |     ];
 97 |     const { getByText } = await renderApollo(<Tracks />, {
 98 |       mocks,
 99 |       cache,
100 |     });
101 |     await waitForElement(() => getByText(/nap, the hard way/i));
102 |   });
103 | });*/
104 | 


--------------------------------------------------------------------------------
/final/client/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { BrowserRouter, Routes, Route } from 'react-router-dom';
 3 | /** importing our pages */
 4 | import Tracks from './tracks';
 5 | 
 6 | export default function Pages() {
 7 |   return (
 8 |     <BrowserRouter>
 9 |       <Routes>
10 |         <Route element={<Tracks />} path="/" />
11 |       </Routes>
12 |     </BrowserRouter>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/final/client/src/pages/tracks.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { useQuery, gql } from '@apollo/client';
 3 | import TrackCard from '../containers/track-card';
 4 | import { Layout, QueryResult } from '../components';
 5 | 
 6 | /** TRACKS gql query to retrieve all tracks */
 7 | const TRACKS = gql`
 8 |   query getTracks {
 9 |     tracksForHome {
10 |       id
11 |       title
12 |       thumbnail
13 |       length
14 |       modulesCount
15 |       author {
16 |         name
17 |         photo
18 |       }
19 |     }
20 |   }
21 | `;
22 | 
23 | /**
24 |  * Tracks Page is the Catstronauts home page.
25 |  * We display a grid of tracks fetched with useQuery with the TRACKS query
26 |  */
27 | const Tracks = () => {
28 |   const { loading, error, data } = useQuery(TRACKS);
29 | 
30 |   return (
31 |     <Layout grid>
32 |       <QueryResult error={error} loading={loading} data={data}>
33 |         {data?.tracksForHome?.map((track, index) => (
34 |           <TrackCard key={track.id} track={track} />
35 |         ))}
36 |       </QueryResult>
37 |     </Layout>
38 |   );
39 | };
40 | 
41 | export default Tracks;
42 | 


--------------------------------------------------------------------------------
/final/client/src/styles.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import '@apollo/space-kit/reset.css';
 3 | import { colors as SKColors } from '@apollo/space-kit/colors';
 4 | import { Global } from '@emotion/core';
 5 | 
 6 | const breakpoints = [480, 768, 992, 1200];
 7 | export const mq = breakpoints.map((bp) => `@media (min-width: ${bp}px)`);
 8 | 
 9 | export const unit = 8;
10 | export const widths = {
11 |   largePageWidth: 1600,
12 |   regularPageWidth: 1100,
13 |   textPageWidth: 800,
14 | };
15 | export const colors = {
16 |   primary: SKColors.indigo.base,
17 |   secondary: SKColors.teal.base,
18 |   accent: SKColors.pink.base,
19 |   background: SKColors.silver.light,
20 |   text: SKColors.black.base,
21 |   textSecondary: SKColors.grey.dark,
22 |   ...SKColors,
23 | };
24 | 
25 | const GlobalStyles = () => (
26 |   <Global
27 |     styles={{
28 |       [['html', 'body']]: {
29 |         height: '100%',
30 |       },
31 |       body: {
32 |         margin: 0,
33 |         padding: 0,
34 |         fontFamily: "'Source Sans Pro', sans-serif",
35 |         backgroundColor: colors.background,
36 |         color: colors.text,
37 |       },
38 |       '#root': {
39 |         display: 'flex',
40 |         flexDirection: 'column',
41 |         minHeight: '100%',
42 |         backgroundImage: 'url("/space_kitty_pattern.png")',
43 |       },
44 |       '*': {
45 |         boxSizing: 'border-box',
46 |       },
47 |       [['h1', 'h2', 'h3', 'h4', 'h5', 'h6']]: {
48 |         margin: 0,
49 |         fontWeight: 600,
50 |       },
51 |       h1: {
52 |         fontSize: 40,
53 |         lineHeight: 1,
54 |       },
55 |       h2: {
56 |         fontSize: 36,
57 |       },
58 |       h3: {
59 |         fontSize: 30,
60 |       },
61 |       h5: {
62 |         fontSize: 16,
63 |         textTransform: 'uppercase',
64 |         letterSpacing: 4,
65 |       },
66 |     }}
67 |   />
68 | );
69 | 
70 | export default GlobalStyles;
71 | 
72 | export { IconRun } from '@apollo/space-kit/icons/IconRun';
73 | export { IconView } from '@apollo/space-kit/icons/IconView';
74 | export { IconTime } from '@apollo/space-kit/icons/IconTime';
75 | export { IconBook } from '@apollo/space-kit/icons/IconBook';
76 | export { IconYoutube } from '@apollo/space-kit/icons/IconYoutube';
77 | export { IconArrowRight } from '@apollo/space-kit/icons/IconArrowRight';
78 | export { IconDoubleArrowRight } from '@apollo/space-kit/icons/IconDoubleArrowRight';
79 | export { ApolloIcon } from '@apollo/space-kit/icons/ApolloIcon';
80 | export { Button } from '@apollo/space-kit/Button';
81 | 


--------------------------------------------------------------------------------
/final/client/src/utils/helpers.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Format seconds to human readable text in a compact form:
 3 |  * s, m or H:m (not m:s or H:m:s)
 4 |  */
 5 | export const humanReadableTimeFromSeconds = (seconds) => {
 6 |   if (seconds < 60) {
 7 |     return `${seconds}s`;
 8 |   }
 9 |   const totalMinutes = Math.floor(seconds / 60);
10 |   let hours = Math.floor(totalMinutes / 60) || 0;
11 |   const minutestoDisplay = totalMinutes % 60;
12 |   let timeStr = ``;
13 |   if (hours > 0) {
14 |     timeStr += `${hours}h `;
15 |   }
16 |   timeStr += `${minutestoDisplay}m`;
17 | 
18 |   return timeStr;
19 | };
20 | 


--------------------------------------------------------------------------------
/final/client/src/utils/test-utils.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from '@testing-library/react';
 3 | import { BrowserRouter } from 'react-router-dom'
 4 | import '@testing-library/jest-dom/extend-expect';
 5 | import { MockedProvider } from '@apollo/client/testing';
 6 | 
 7 | const renderApollo = (
 8 |   node,
 9 |   { mocks, addTypename, defaultOptions, cache, resolvers, ...options }
10 | ) => {
11 |   return render(
12 |     <MockedProvider
13 |       mocks={mocks}
14 |       addTypename={addTypename}
15 |       defaultOptions={defaultOptions}
16 |       cache={cache}
17 |       resolvers={resolvers}
18 |       removeTypename
19 |     >
20 |       {node}
21 |     </MockedProvider>,
22 |     options
23 |   );
24 | };
25 | 
26 | export const renderWithRouterGenerator = (renderer) => (node, options) => {
27 |   return renderer(<BrowserRouter>{node}</BrowserRouter>, options)
28 | }
29 | 
30 | export const renderWithRouter = renderWithRouterGenerator(render)
31 | 
32 | export const renderApolloWithRouter = renderWithRouterGenerator(renderApollo)
33 | 
34 | export * from '@testing-library/react';
35 | export { renderApollo };
36 | 


--------------------------------------------------------------------------------
/final/client/src/utils/useWindowDimensions.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | 
 3 | function getWindowDimensions() {
 4 |   const { innerWidth: width, innerHeight: height } = window;
 5 |   return {
 6 |     width,
 7 |     height,
 8 |   };
 9 | }
10 | 
11 | export default function useWindowDimensions() {
12 |   const [windowDimensions, setWindowDimensions] = useState(
13 |     getWindowDimensions()
14 |   );
15 | 
16 |   useEffect(() => {
17 |     function handleResize() {
18 |       setWindowDimensions(getWindowDimensions());
19 |     }
20 | 
21 |     window.addEventListener('resize', handleResize);
22 |     return () => window.removeEventListener('resize', handleResize);
23 |   }, []);
24 | 
25 |   return windowDimensions;
26 | }
27 | 


--------------------------------------------------------------------------------
/final/client/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import fs from 'fs/promises';
 3 | 
 4 | /*
 5 |   This override allows us to use .js files instead of exclusively .jsx.
 6 |   We should remove as soon as video updates can be prioritized.
 7 | */
 8 | export default defineConfig(() => ({
 9 |   test: {
10 |     globals: true,
11 |     environment: 'happy-dom',
12 |   },
13 |   server: {
14 |     host: 'localhost',
15 |     port: 3000
16 |   },
17 |   esbuild: {
18 |     loader: "jsx",
19 |     include: /src\/.*\.jsx?$/,
20 |     // loader: "tsx",
21 |     // include: /src\/.*\.[tj]sx?$/,
22 |     exclude: [],
23 |   },
24 |   optimizeDeps: {
25 |     esbuildOptions: {
26 |       plugins: [
27 |         {
28 |           name: "load-js-files-as-jsx",
29 |           setup(build) {
30 |             build.onLoad({ filter: /src\/.*\.js$/ }, async (args) => ({
31 |               loader: "jsx",
32 |               contents: await fs.readFile(args.path, "utf8"),
33 |             }));
34 |           },
35 |         },
36 |       ],
37 |     },
38 |   },
39 | }));


--------------------------------------------------------------------------------
/final/server/README.md:
--------------------------------------------------------------------------------
1 | # Catstronauts - server
2 | 
3 | The final stage of the `server` code after completing the Odyssey Lift-off II course.
4 | 


--------------------------------------------------------------------------------
/final/server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "catstronauts-server-complete",
 3 |   "version": "1.0.0",
 4 |   "description": "back-end demo app for Apollo's lift-off II course",
 5 |   "main": "src/index.js",
 6 |   "scripts": {
 7 |     "start": "nodemon src/index"
 8 |   },
 9 |   "dependencies": {
10 |     "@apollo/datasource-rest": "^5.0.2",
11 |     "@apollo/server": "^4.5.0",
12 |     "graphql": "^16.6.0",
13 |     "graphql-tag": "^2.12.6"
14 |   },
15 |   "devDependencies": {
16 |     "dotenv": "^8.2.0",
17 |     "nodemon": "^3.0.2"
18 |   },
19 |   "author": "Raphael Terrier @R4ph-t",
20 |   "license": "MIT",
21 |   "private": true
22 | }
23 | 


--------------------------------------------------------------------------------
/final/server/src/datasources/track-api.js:
--------------------------------------------------------------------------------
 1 | const { RESTDataSource } = require('@apollo/datasource-rest');
 2 | 
 3 | class TrackAPI extends RESTDataSource {
 4 |   // the Catstronauts catalog is hosted on this server
 5 |   baseURL = 'https://odyssey-lift-off-rest-api.herokuapp.com/';
 6 | 
 7 |   getTracksForHome() {
 8 |     return this.get('tracks');
 9 |   }
10 | 
11 |   getAuthor(authorId) {
12 |     return this.get(`author/${authorId}`);
13 |   }
14 | }
15 | 
16 | module.exports = TrackAPI;
17 | 


--------------------------------------------------------------------------------
/final/server/src/index.js:
--------------------------------------------------------------------------------
 1 | const { ApolloServer } = require('@apollo/server');
 2 | const { startStandaloneServer } = require('@apollo/server/standalone');
 3 | 
 4 | const typeDefs = require('./schema');
 5 | const resolvers = require('./resolvers');
 6 | 
 7 | const TrackAPI = require('./datasources/track-api');
 8 | 
 9 | async function startApolloServer() {
10 |   const server = new ApolloServer({ typeDefs, resolvers });
11 | 
12 |   const { url } = await startStandaloneServer(server, {
13 |     context: async () => {
14 |       const { cache } = server;
15 | 
16 |       return {
17 |         dataSources: {
18 |           trackAPI: new TrackAPI({ cache }),
19 |         },
20 |       };
21 |     },
22 |   });
23 | 
24 |   console.log(`
25 |     🚀  Server is running
26 |     📭  Query at ${url}
27 |   `);
28 | }
29 | 
30 | startApolloServer();
31 | 


--------------------------------------------------------------------------------
/final/server/src/resolvers.js:
--------------------------------------------------------------------------------
 1 | const resolvers = {
 2 |   Query: {
 3 |     // returns an array of Tracks that will be used to populate the homepage grid of our web client
 4 |     tracksForHome: (_, __, { dataSources }) => {
 5 |       return dataSources.trackAPI.getTracksForHome();
 6 |     },
 7 |   },
 8 |   Track: {
 9 |     author: ({ authorId }, _, { dataSources }) => {
10 |       return dataSources.trackAPI.getAuthor(authorId);
11 |     },
12 |   },
13 | };
14 | 
15 | module.exports = resolvers;
16 | 


--------------------------------------------------------------------------------
/final/server/src/schema.js:
--------------------------------------------------------------------------------
 1 | const gql = require('graphql-tag');
 2 | 
 3 | const typeDefs = gql`
 4 |   type Query {
 5 |     "Query to get tracks array for the homepage grid"
 6 |     tracksForHome: [Track!]!
 7 |   }
 8 | 
 9 |   "A track is a group of Modules that teaches about a specific topic"
10 |   type Track {
11 |     id: ID!
12 |     "The track's title"
13 |     title: String!
14 |     "The track's main Author"
15 |     author: Author!
16 |     "The track's illustration to display in track card or track page detail"
17 |     thumbnail: String
18 |     "The track's approximate length to complete, in minutes"
19 |     length: Int
20 |     "The number of modules this track contains"
21 |     modulesCount: Int
22 |   }
23 | 
24 |   "Author of a complete Track or a Module"
25 |   type Author {
26 |     id: ID!
27 |     "Author's first and last name"
28 |     name: String!
29 |     "Author's profile picture"
30 |     photo: String
31 |   }
32 | `;
33 | 
34 | module.exports = typeDefs;
35 | 


--------------------------------------------------------------------------------
/server/README.md:
--------------------------------------------------------------------------------
1 | # Catstronauts - server
2 | 
3 | The starting point of the `server` code for Odyssey Lift-off II course.
4 | 


--------------------------------------------------------------------------------
/server/package-lock.json:
--------------------------------------------------------------------------------
   1 | {
   2 |   "name": "catstronauts-server",
   3 |   "version": "1.0.0",
   4 |   "lockfileVersion": 3,
   5 |   "requires": true,
   6 |   "packages": {
   7 |     "": {
   8 |       "name": "catstronauts-server",
   9 |       "version": "1.0.0",
  10 |       "license": "MIT",
  11 |       "dependencies": {
  12 |         "@apollo/server": "^4.5.0",
  13 |         "@graphql-tools/mock": "^8.7.6",
  14 |         "@graphql-tools/schema": "^9.0.4",
  15 |         "graphql": "^16.6.0",
  16 |         "graphql-tag": "^2.12.6"
  17 |       },
  18 |       "devDependencies": {
  19 |         "dotenv": "^8.2.0",
  20 |         "nodemon": "^3.0.2"
  21 |       }
  22 |     },
  23 |     "node_modules/@apollo/cache-control-types": {
  24 |       "version": "1.0.3",
  25 |       "resolved": "https://registry.npmjs.org/@apollo/cache-control-types/-/cache-control-types-1.0.3.tgz",
  26 |       "integrity": "sha512-F17/vCp7QVwom9eG7ToauIKdAxpSoadsJnqIfyryLFSkLSOEqu+eC5Z3N8OXcUVStuOMcNHlyraRsA6rRICu4g==",
  27 |       "peerDependencies": {
  28 |         "graphql": "14.x || 15.x || 16.x"
  29 |       }
  30 |     },
  31 |     "node_modules/@apollo/protobufjs": {
  32 |       "version": "1.2.7",
  33 |       "resolved": "https://registry.npmjs.org/@apollo/protobufjs/-/protobufjs-1.2.7.tgz",
  34 |       "integrity": "sha512-Lahx5zntHPZia35myYDBRuF58tlwPskwHc5CWBZC/4bMKB6siTBWwtMrkqXcsNwQiFSzSx5hKdRPUmemrEp3Gg==",
  35 |       "hasInstallScript": true,
  36 |       "dependencies": {
  37 |         "@protobufjs/aspromise": "^1.1.2",
  38 |         "@protobufjs/base64": "^1.1.2",
  39 |         "@protobufjs/codegen": "^2.0.4",
  40 |         "@protobufjs/eventemitter": "^1.1.0",
  41 |         "@protobufjs/fetch": "^1.1.0",
  42 |         "@protobufjs/float": "^1.0.2",
  43 |         "@protobufjs/inquire": "^1.1.0",
  44 |         "@protobufjs/path": "^1.1.2",
  45 |         "@protobufjs/pool": "^1.1.0",
  46 |         "@protobufjs/utf8": "^1.1.0",
  47 |         "@types/long": "^4.0.0",
  48 |         "long": "^4.0.0"
  49 |       },
  50 |       "bin": {
  51 |         "apollo-pbjs": "bin/pbjs",
  52 |         "apollo-pbts": "bin/pbts"
  53 |       }
  54 |     },
  55 |     "node_modules/@apollo/server": {
  56 |       "version": "4.10.0",
  57 |       "resolved": "https://registry.npmjs.org/@apollo/server/-/server-4.10.0.tgz",
  58 |       "integrity": "sha512-pLx//lZ/pvUfWL9G8Np8+y3ujc0pYc8U7dwD6ztt9FAw8NmCPzPaDzlXLBAjGU6WnkqVBOnz8b3dOwRNjLYSUA==",
  59 |       "dependencies": {
  60 |         "@apollo/cache-control-types": "^1.0.3",
  61 |         "@apollo/server-gateway-interface": "^1.1.1",
  62 |         "@apollo/usage-reporting-protobuf": "^4.1.1",
  63 |         "@apollo/utils.createhash": "^2.0.0",
  64 |         "@apollo/utils.fetcher": "^2.0.0",
  65 |         "@apollo/utils.isnodelike": "^2.0.0",
  66 |         "@apollo/utils.keyvaluecache": "^2.1.0",
  67 |         "@apollo/utils.logger": "^2.0.0",
  68 |         "@apollo/utils.usagereporting": "^2.1.0",
  69 |         "@apollo/utils.withrequired": "^2.0.0",
  70 |         "@graphql-tools/schema": "^9.0.0",
  71 |         "@josephg/resolvable": "^1.0.0",
  72 |         "@types/express": "^4.17.13",
  73 |         "@types/express-serve-static-core": "^4.17.30",
  74 |         "@types/node-fetch": "^2.6.1",
  75 |         "async-retry": "^1.2.1",
  76 |         "cors": "^2.8.5",
  77 |         "express": "^4.17.1",
  78 |         "loglevel": "^1.6.8",
  79 |         "lru-cache": "^7.10.1",
  80 |         "negotiator": "^0.6.3",
  81 |         "node-abort-controller": "^3.1.1",
  82 |         "node-fetch": "^2.6.7",
  83 |         "uuid": "^9.0.0",
  84 |         "whatwg-mimetype": "^3.0.0"
  85 |       },
  86 |       "engines": {
  87 |         "node": ">=14.16.0"
  88 |       },
  89 |       "peerDependencies": {
  90 |         "graphql": "^16.6.0"
  91 |       }
  92 |     },
  93 |     "node_modules/@apollo/server-gateway-interface": {
  94 |       "version": "1.1.1",
  95 |       "resolved": "https://registry.npmjs.org/@apollo/server-gateway-interface/-/server-gateway-interface-1.1.1.tgz",
  96 |       "integrity": "sha512-pGwCl/po6+rxRmDMFgozKQo2pbsSwE91TpsDBAOgf74CRDPXHHtM88wbwjab0wMMZh95QfR45GGyDIdhY24bkQ==",
  97 |       "dependencies": {
  98 |         "@apollo/usage-reporting-protobuf": "^4.1.1",
  99 |         "@apollo/utils.fetcher": "^2.0.0",
 100 |         "@apollo/utils.keyvaluecache": "^2.1.0",
 101 |         "@apollo/utils.logger": "^2.0.0"
 102 |       },
 103 |       "peerDependencies": {
 104 |         "graphql": "14.x || 15.x || 16.x"
 105 |       }
 106 |     },
 107 |     "node_modules/@apollo/usage-reporting-protobuf": {
 108 |       "version": "4.1.1",
 109 |       "resolved": "https://registry.npmjs.org/@apollo/usage-reporting-protobuf/-/usage-reporting-protobuf-4.1.1.tgz",
 110 |       "integrity": "sha512-u40dIUePHaSKVshcedO7Wp+mPiZsaU6xjv9J+VyxpoU/zL6Jle+9zWeG98tr/+SZ0nZ4OXhrbb8SNr0rAPpIDA==",
 111 |       "dependencies": {
 112 |         "@apollo/protobufjs": "1.2.7"
 113 |       }
 114 |     },
 115 |     "node_modules/@apollo/utils.createhash": {
 116 |       "version": "2.0.1",
 117 |       "resolved": "https://registry.npmjs.org/@apollo/utils.createhash/-/utils.createhash-2.0.1.tgz",
 118 |       "integrity": "sha512-fQO4/ZOP8LcXWvMNhKiee+2KuKyqIcfHrICA+M4lj/h/Lh1H10ICcUtk6N/chnEo5HXu0yejg64wshdaiFitJg==",
 119 |       "dependencies": {
 120 |         "@apollo/utils.isnodelike": "^2.0.1",
 121 |         "sha.js": "^2.4.11"
 122 |       },
 123 |       "engines": {
 124 |         "node": ">=14"
 125 |       }
 126 |     },
 127 |     "node_modules/@apollo/utils.dropunuseddefinitions": {
 128 |       "version": "2.0.1",
 129 |       "resolved": "https://registry.npmjs.org/@apollo/utils.dropunuseddefinitions/-/utils.dropunuseddefinitions-2.0.1.tgz",
 130 |       "integrity": "sha512-EsPIBqsSt2BwDsv8Wu76LK5R1KtsVkNoO4b0M5aK0hx+dGg9xJXuqlr7Fo34Dl+y83jmzn+UvEW+t1/GP2melA==",
 131 |       "engines": {
 132 |         "node": ">=14"
 133 |       },
 134 |       "peerDependencies": {
 135 |         "graphql": "14.x || 15.x || 16.x"
 136 |       }
 137 |     },
 138 |     "node_modules/@apollo/utils.fetcher": {
 139 |       "version": "2.0.1",
 140 |       "resolved": "https://registry.npmjs.org/@apollo/utils.fetcher/-/utils.fetcher-2.0.1.tgz",
 141 |       "integrity": "sha512-jvvon885hEyWXd4H6zpWeN3tl88QcWnHp5gWF5OPF34uhvoR+DFqcNxs9vrRaBBSY3qda3Qe0bdud7tz2zGx1A==",
 142 |       "engines": {
 143 |         "node": ">=14"
 144 |       }
 145 |     },
 146 |     "node_modules/@apollo/utils.isnodelike": {
 147 |       "version": "2.0.1",
 148 |       "resolved": "https://registry.npmjs.org/@apollo/utils.isnodelike/-/utils.isnodelike-2.0.1.tgz",
 149 |       "integrity": "sha512-w41XyepR+jBEuVpoRM715N2ZD0xMD413UiJx8w5xnAZD2ZkSJnMJBoIzauK83kJpSgNuR6ywbV29jG9NmxjK0Q==",
 150 |       "engines": {
 151 |         "node": ">=14"
 152 |       }
 153 |     },
 154 |     "node_modules/@apollo/utils.keyvaluecache": {
 155 |       "version": "2.1.1",
 156 |       "resolved": "https://registry.npmjs.org/@apollo/utils.keyvaluecache/-/utils.keyvaluecache-2.1.1.tgz",
 157 |       "integrity": "sha512-qVo5PvUUMD8oB9oYvq4ViCjYAMWnZ5zZwEjNF37L2m1u528x5mueMlU+Cr1UinupCgdB78g+egA1G98rbJ03Vw==",
 158 |       "dependencies": {
 159 |         "@apollo/utils.logger": "^2.0.1",
 160 |         "lru-cache": "^7.14.1"
 161 |       },
 162 |       "engines": {
 163 |         "node": ">=14"
 164 |       }
 165 |     },
 166 |     "node_modules/@apollo/utils.logger": {
 167 |       "version": "2.0.1",
 168 |       "resolved": "https://registry.npmjs.org/@apollo/utils.logger/-/utils.logger-2.0.1.tgz",
 169 |       "integrity": "sha512-YuplwLHaHf1oviidB7MxnCXAdHp3IqYV8n0momZ3JfLniae92eYqMIx+j5qJFX6WKJPs6q7bczmV4lXIsTu5Pg==",
 170 |       "engines": {
 171 |         "node": ">=14"
 172 |       }
 173 |     },
 174 |     "node_modules/@apollo/utils.printwithreducedwhitespace": {
 175 |       "version": "2.0.1",
 176 |       "resolved": "https://registry.npmjs.org/@apollo/utils.printwithreducedwhitespace/-/utils.printwithreducedwhitespace-2.0.1.tgz",
 177 |       "integrity": "sha512-9M4LUXV/fQBh8vZWlLvb/HyyhjJ77/I5ZKu+NBWV/BmYGyRmoEP9EVAy7LCVoY3t8BDcyCAGfxJaLFCSuQkPUg==",
 178 |       "engines": {
 179 |         "node": ">=14"
 180 |       },
 181 |       "peerDependencies": {
 182 |         "graphql": "14.x || 15.x || 16.x"
 183 |       }
 184 |     },
 185 |     "node_modules/@apollo/utils.removealiases": {
 186 |       "version": "2.0.1",
 187 |       "resolved": "https://registry.npmjs.org/@apollo/utils.removealiases/-/utils.removealiases-2.0.1.tgz",
 188 |       "integrity": "sha512-0joRc2HBO4u594Op1nev+mUF6yRnxoUH64xw8x3bX7n8QBDYdeYgY4tF0vJReTy+zdn2xv6fMsquATSgC722FA==",
 189 |       "engines": {
 190 |         "node": ">=14"
 191 |       },
 192 |       "peerDependencies": {
 193 |         "graphql": "14.x || 15.x || 16.x"
 194 |       }
 195 |     },
 196 |     "node_modules/@apollo/utils.sortast": {
 197 |       "version": "2.0.1",
 198 |       "resolved": "https://registry.npmjs.org/@apollo/utils.sortast/-/utils.sortast-2.0.1.tgz",
 199 |       "integrity": "sha512-eciIavsWpJ09za1pn37wpsCGrQNXUhM0TktnZmHwO+Zy9O4fu/WdB4+5BvVhFiZYOXvfjzJUcc+hsIV8RUOtMw==",
 200 |       "dependencies": {
 201 |         "lodash.sortby": "^4.7.0"
 202 |       },
 203 |       "engines": {
 204 |         "node": ">=14"
 205 |       },
 206 |       "peerDependencies": {
 207 |         "graphql": "14.x || 15.x || 16.x"
 208 |       }
 209 |     },
 210 |     "node_modules/@apollo/utils.stripsensitiveliterals": {
 211 |       "version": "2.0.1",
 212 |       "resolved": "https://registry.npmjs.org/@apollo/utils.stripsensitiveliterals/-/utils.stripsensitiveliterals-2.0.1.tgz",
 213 |       "integrity": "sha512-QJs7HtzXS/JIPMKWimFnUMK7VjkGQTzqD9bKD1h3iuPAqLsxd0mUNVbkYOPTsDhUKgcvUOfOqOJWYohAKMvcSA==",
 214 |       "engines": {
 215 |         "node": ">=14"
 216 |       },
 217 |       "peerDependencies": {
 218 |         "graphql": "14.x || 15.x || 16.x"
 219 |       }
 220 |     },
 221 |     "node_modules/@apollo/utils.usagereporting": {
 222 |       "version": "2.1.0",
 223 |       "resolved": "https://registry.npmjs.org/@apollo/utils.usagereporting/-/utils.usagereporting-2.1.0.tgz",
 224 |       "integrity": "sha512-LPSlBrn+S17oBy5eWkrRSGb98sWmnEzo3DPTZgp8IQc8sJe0prDgDuppGq4NeQlpoqEHz0hQeYHAOA0Z3aQsxQ==",
 225 |       "dependencies": {
 226 |         "@apollo/usage-reporting-protobuf": "^4.1.0",
 227 |         "@apollo/utils.dropunuseddefinitions": "^2.0.1",
 228 |         "@apollo/utils.printwithreducedwhitespace": "^2.0.1",
 229 |         "@apollo/utils.removealiases": "2.0.1",
 230 |         "@apollo/utils.sortast": "^2.0.1",
 231 |         "@apollo/utils.stripsensitiveliterals": "^2.0.1"
 232 |       },
 233 |       "engines": {
 234 |         "node": ">=14"
 235 |       },
 236 |       "peerDependencies": {
 237 |         "graphql": "14.x || 15.x || 16.x"
 238 |       }
 239 |     },
 240 |     "node_modules/@apollo/utils.withrequired": {
 241 |       "version": "2.0.1",
 242 |       "resolved": "https://registry.npmjs.org/@apollo/utils.withrequired/-/utils.withrequired-2.0.1.tgz",
 243 |       "integrity": "sha512-YBDiuAX9i1lLc6GeTy1m7DGLFn/gMnvXqlalOIMjM7DeOgIacEjjfwPqb0M1CQ2v11HhR15d1NmxJoRCfrNqcA==",
 244 |       "engines": {
 245 |         "node": ">=14"
 246 |       }
 247 |     },
 248 |     "node_modules/@graphql-tools/merge": {
 249 |       "version": "8.4.2",
 250 |       "resolved": "https://registry.npmjs.org/@graphql-tools/merge/-/merge-8.4.2.tgz",
 251 |       "integrity": "sha512-XbrHAaj8yDuINph+sAfuq3QCZ/tKblrTLOpirK0+CAgNlZUCHs0Fa+xtMUURgwCVThLle1AF7svJCxFizygLsw==",
 252 |       "dependencies": {
 253 |         "@graphql-tools/utils": "^9.2.1",
 254 |         "tslib": "^2.4.0"
 255 |       },
 256 |       "peerDependencies": {
 257 |         "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
 258 |       }
 259 |     },
 260 |     "node_modules/@graphql-tools/mock": {
 261 |       "version": "8.7.20",
 262 |       "resolved": "https://registry.npmjs.org/@graphql-tools/mock/-/mock-8.7.20.tgz",
 263 |       "integrity": "sha512-ljcHSJWjC/ZyzpXd5cfNhPI7YljRVvabKHPzKjEs5ElxWu2cdlLGvyNYepApXDsM/OJG/2xuhGM+9GWu5gEAPQ==",
 264 |       "dependencies": {
 265 |         "@graphql-tools/schema": "^9.0.18",
 266 |         "@graphql-tools/utils": "^9.2.1",
 267 |         "fast-json-stable-stringify": "^2.1.0",
 268 |         "tslib": "^2.4.0"
 269 |       },
 270 |       "peerDependencies": {
 271 |         "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
 272 |       }
 273 |     },
 274 |     "node_modules/@graphql-tools/schema": {
 275 |       "version": "9.0.19",
 276 |       "resolved": "https://registry.npmjs.org/@graphql-tools/schema/-/schema-9.0.19.tgz",
 277 |       "integrity": "sha512-oBRPoNBtCkk0zbUsyP4GaIzCt8C0aCI4ycIRUL67KK5pOHljKLBBtGT+Jr6hkzA74C8Gco8bpZPe7aWFjiaK2w==",
 278 |       "dependencies": {
 279 |         "@graphql-tools/merge": "^8.4.1",
 280 |         "@graphql-tools/utils": "^9.2.1",
 281 |         "tslib": "^2.4.0",
 282 |         "value-or-promise": "^1.0.12"
 283 |       },
 284 |       "peerDependencies": {
 285 |         "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
 286 |       }
 287 |     },
 288 |     "node_modules/@graphql-tools/utils": {
 289 |       "version": "9.2.1",
 290 |       "resolved": "https://registry.npmjs.org/@graphql-tools/utils/-/utils-9.2.1.tgz",
 291 |       "integrity": "sha512-WUw506Ql6xzmOORlriNrD6Ugx+HjVgYxt9KCXD9mHAak+eaXSwuGGPyE60hy9xaDEoXKBsG7SkG69ybitaVl6A==",
 292 |       "dependencies": {
 293 |         "@graphql-typed-document-node/core": "^3.1.1",
 294 |         "tslib": "^2.4.0"
 295 |       },
 296 |       "peerDependencies": {
 297 |         "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
 298 |       }
 299 |     },
 300 |     "node_modules/@graphql-typed-document-node/core": {
 301 |       "version": "3.2.0",
 302 |       "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
 303 |       "integrity": "sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==",
 304 |       "peerDependencies": {
 305 |         "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
 306 |       }
 307 |     },
 308 |     "node_modules/@josephg/resolvable": {
 309 |       "version": "1.0.1",
 310 |       "resolved": "https://registry.npmjs.org/@josephg/resolvable/-/resolvable-1.0.1.tgz",
 311 |       "integrity": "sha512-CtzORUwWTTOTqfVtHaKRJ0I1kNQd1bpn3sUh8I3nJDVY+5/M/Oe1DnEWzPQvqq/xPIIkzzzIP7mfCoAjFRvDhg=="
 312 |     },
 313 |     "node_modules/@protobufjs/aspromise": {
 314 |       "version": "1.1.2",
 315 |       "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
 316 |       "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ=="
 317 |     },
 318 |     "node_modules/@protobufjs/base64": {
 319 |       "version": "1.1.2",
 320 |       "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
 321 |       "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
 322 |     },
 323 |     "node_modules/@protobufjs/codegen": {
 324 |       "version": "2.0.4",
 325 |       "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
 326 |       "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
 327 |     },
 328 |     "node_modules/@protobufjs/eventemitter": {
 329 |       "version": "1.1.0",
 330 |       "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
 331 |       "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q=="
 332 |     },
 333 |     "node_modules/@protobufjs/fetch": {
 334 |       "version": "1.1.0",
 335 |       "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
 336 |       "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
 337 |       "dependencies": {
 338 |         "@protobufjs/aspromise": "^1.1.1",
 339 |         "@protobufjs/inquire": "^1.1.0"
 340 |       }
 341 |     },
 342 |     "node_modules/@protobufjs/float": {
 343 |       "version": "1.0.2",
 344 |       "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
 345 |       "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ=="
 346 |     },
 347 |     "node_modules/@protobufjs/inquire": {
 348 |       "version": "1.1.0",
 349 |       "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
 350 |       "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q=="
 351 |     },
 352 |     "node_modules/@protobufjs/path": {
 353 |       "version": "1.1.2",
 354 |       "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
 355 |       "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA=="
 356 |     },
 357 |     "node_modules/@protobufjs/pool": {
 358 |       "version": "1.1.0",
 359 |       "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
 360 |       "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw=="
 361 |     },
 362 |     "node_modules/@protobufjs/utf8": {
 363 |       "version": "1.1.0",
 364 |       "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
 365 |       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
 366 |     },
 367 |     "node_modules/@types/body-parser": {
 368 |       "version": "1.19.5",
 369 |       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
 370 |       "integrity": "sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==",
 371 |       "dependencies": {
 372 |         "@types/connect": "*",
 373 |         "@types/node": "*"
 374 |       }
 375 |     },
 376 |     "node_modules/@types/connect": {
 377 |       "version": "3.4.38",
 378 |       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
 379 |       "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
 380 |       "dependencies": {
 381 |         "@types/node": "*"
 382 |       }
 383 |     },
 384 |     "node_modules/@types/express": {
 385 |       "version": "4.17.21",
 386 |       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
 387 |       "integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
 388 |       "dependencies": {
 389 |         "@types/body-parser": "*",
 390 |         "@types/express-serve-static-core": "^4.17.33",
 391 |         "@types/qs": "*",
 392 |         "@types/serve-static": "*"
 393 |       }
 394 |     },
 395 |     "node_modules/@types/express-serve-static-core": {
 396 |       "version": "4.17.43",
 397 |       "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.43.tgz",
 398 |       "integrity": "sha512-oaYtiBirUOPQGSWNGPWnzyAFJ0BP3cwvN4oWZQY+zUBwpVIGsKUkpBpSztp74drYcjavs7SKFZ4DX1V2QeN8rg==",
 399 |       "dependencies": {
 400 |         "@types/node": "*",
 401 |         "@types/qs": "*",
 402 |         "@types/range-parser": "*",
 403 |         "@types/send": "*"
 404 |       }
 405 |     },
 406 |     "node_modules/@types/http-errors": {
 407 |       "version": "2.0.4",
 408 |       "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
 409 |       "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA=="
 410 |     },
 411 |     "node_modules/@types/long": {
 412 |       "version": "4.0.2",
 413 |       "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.2.tgz",
 414 |       "integrity": "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA=="
 415 |     },
 416 |     "node_modules/@types/mime": {
 417 |       "version": "1.3.5",
 418 |       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
 419 |       "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="
 420 |     },
 421 |     "node_modules/@types/node": {
 422 |       "version": "20.11.20",
 423 |       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.20.tgz",
 424 |       "integrity": "sha512-7/rR21OS+fq8IyHTgtLkDK949uzsa6n8BkziAKtPVpugIkO6D+/ooXMvzXxDnZrmtXVfjb1bKQafYpb8s89LOg==",
 425 |       "dependencies": {
 426 |         "undici-types": "~5.26.4"
 427 |       }
 428 |     },
 429 |     "node_modules/@types/node-fetch": {
 430 |       "version": "2.6.11",
 431 |       "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.11.tgz",
 432 |       "integrity": "sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==",
 433 |       "dependencies": {
 434 |         "@types/node": "*",
 435 |         "form-data": "^4.0.0"
 436 |       }
 437 |     },
 438 |     "node_modules/@types/qs": {
 439 |       "version": "6.9.11",
 440 |       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.11.tgz",
 441 |       "integrity": "sha512-oGk0gmhnEJK4Yyk+oI7EfXsLayXatCWPHary1MtcmbAifkobT9cM9yutG/hZKIseOU0MqbIwQ/u2nn/Gb+ltuQ=="
 442 |     },
 443 |     "node_modules/@types/range-parser": {
 444 |       "version": "1.2.7",
 445 |       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
 446 |       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
 447 |     },
 448 |     "node_modules/@types/send": {
 449 |       "version": "0.17.4",
 450 |       "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
 451 |       "integrity": "sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==",
 452 |       "dependencies": {
 453 |         "@types/mime": "^1",
 454 |         "@types/node": "*"
 455 |       }
 456 |     },
 457 |     "node_modules/@types/serve-static": {
 458 |       "version": "1.15.5",
 459 |       "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.5.tgz",
 460 |       "integrity": "sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==",
 461 |       "dependencies": {
 462 |         "@types/http-errors": "*",
 463 |         "@types/mime": "*",
 464 |         "@types/node": "*"
 465 |       }
 466 |     },
 467 |     "node_modules/abbrev": {
 468 |       "version": "1.1.1",
 469 |       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
 470 |       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
 471 |       "dev": true
 472 |     },
 473 |     "node_modules/accepts": {
 474 |       "version": "1.3.8",
 475 |       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
 476 |       "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
 477 |       "dependencies": {
 478 |         "mime-types": "~2.1.34",
 479 |         "negotiator": "0.6.3"
 480 |       },
 481 |       "engines": {
 482 |         "node": ">= 0.6"
 483 |       }
 484 |     },
 485 |     "node_modules/anymatch": {
 486 |       "version": "3.1.3",
 487 |       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
 488 |       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
 489 |       "dev": true,
 490 |       "dependencies": {
 491 |         "normalize-path": "^3.0.0",
 492 |         "picomatch": "^2.0.4"
 493 |       },
 494 |       "engines": {
 495 |         "node": ">= 8"
 496 |       }
 497 |     },
 498 |     "node_modules/array-flatten": {
 499 |       "version": "1.1.1",
 500 |       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
 501 |       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
 502 |     },
 503 |     "node_modules/async-retry": {
 504 |       "version": "1.3.3",
 505 |       "resolved": "https://registry.npmjs.org/async-retry/-/async-retry-1.3.3.tgz",
 506 |       "integrity": "sha512-wfr/jstw9xNi/0teMHrRW7dsz3Lt5ARhYNZ2ewpadnhaIp5mbALhOAP+EAdsC7t4Z6wqsDVv9+W6gm1Dk9mEyw==",
 507 |       "dependencies": {
 508 |         "retry": "0.13.1"
 509 |       }
 510 |     },
 511 |     "node_modules/asynckit": {
 512 |       "version": "0.4.0",
 513 |       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
 514 |       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
 515 |     },
 516 |     "node_modules/balanced-match": {
 517 |       "version": "1.0.2",
 518 |       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
 519 |       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
 520 |       "dev": true
 521 |     },
 522 |     "node_modules/binary-extensions": {
 523 |       "version": "2.2.0",
 524 |       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
 525 |       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
 526 |       "dev": true,
 527 |       "engines": {
 528 |         "node": ">=8"
 529 |       }
 530 |     },
 531 |     "node_modules/body-parser": {
 532 |       "version": "1.20.1",
 533 |       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
 534 |       "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
 535 |       "dependencies": {
 536 |         "bytes": "3.1.2",
 537 |         "content-type": "~1.0.4",
 538 |         "debug": "2.6.9",
 539 |         "depd": "2.0.0",
 540 |         "destroy": "1.2.0",
 541 |         "http-errors": "2.0.0",
 542 |         "iconv-lite": "0.4.24",
 543 |         "on-finished": "2.4.1",
 544 |         "qs": "6.11.0",
 545 |         "raw-body": "2.5.1",
 546 |         "type-is": "~1.6.18",
 547 |         "unpipe": "1.0.0"
 548 |       },
 549 |       "engines": {
 550 |         "node": ">= 0.8",
 551 |         "npm": "1.2.8000 || >= 1.4.16"
 552 |       }
 553 |     },
 554 |     "node_modules/brace-expansion": {
 555 |       "version": "1.1.11",
 556 |       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
 557 |       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
 558 |       "dev": true,
 559 |       "dependencies": {
 560 |         "balanced-match": "^1.0.0",
 561 |         "concat-map": "0.0.1"
 562 |       }
 563 |     },
 564 |     "node_modules/braces": {
 565 |       "version": "3.0.2",
 566 |       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
 567 |       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
 568 |       "dev": true,
 569 |       "dependencies": {
 570 |         "fill-range": "^7.0.1"
 571 |       },
 572 |       "engines": {
 573 |         "node": ">=8"
 574 |       }
 575 |     },
 576 |     "node_modules/bytes": {
 577 |       "version": "3.1.2",
 578 |       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
 579 |       "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
 580 |       "engines": {
 581 |         "node": ">= 0.8"
 582 |       }
 583 |     },
 584 |     "node_modules/call-bind": {
 585 |       "version": "1.0.7",
 586 |       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
 587 |       "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
 588 |       "dependencies": {
 589 |         "es-define-property": "^1.0.0",
 590 |         "es-errors": "^1.3.0",
 591 |         "function-bind": "^1.1.2",
 592 |         "get-intrinsic": "^1.2.4",
 593 |         "set-function-length": "^1.2.1"
 594 |       },
 595 |       "engines": {
 596 |         "node": ">= 0.4"
 597 |       },
 598 |       "funding": {
 599 |         "url": "https://github.com/sponsors/ljharb"
 600 |       }
 601 |     },
 602 |     "node_modules/chokidar": {
 603 |       "version": "3.6.0",
 604 |       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
 605 |       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
 606 |       "dev": true,
 607 |       "dependencies": {
 608 |         "anymatch": "~3.1.2",
 609 |         "braces": "~3.0.2",
 610 |         "glob-parent": "~5.1.2",
 611 |         "is-binary-path": "~2.1.0",
 612 |         "is-glob": "~4.0.1",
 613 |         "normalize-path": "~3.0.0",
 614 |         "readdirp": "~3.6.0"
 615 |       },
 616 |       "engines": {
 617 |         "node": ">= 8.10.0"
 618 |       },
 619 |       "funding": {
 620 |         "url": "https://paulmillr.com/funding/"
 621 |       },
 622 |       "optionalDependencies": {
 623 |         "fsevents": "~2.3.2"
 624 |       }
 625 |     },
 626 |     "node_modules/combined-stream": {
 627 |       "version": "1.0.8",
 628 |       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
 629 |       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
 630 |       "dependencies": {
 631 |         "delayed-stream": "~1.0.0"
 632 |       },
 633 |       "engines": {
 634 |         "node": ">= 0.8"
 635 |       }
 636 |     },
 637 |     "node_modules/concat-map": {
 638 |       "version": "0.0.1",
 639 |       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
 640 |       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
 641 |       "dev": true
 642 |     },
 643 |     "node_modules/content-disposition": {
 644 |       "version": "0.5.4",
 645 |       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
 646 |       "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
 647 |       "dependencies": {
 648 |         "safe-buffer": "5.2.1"
 649 |       },
 650 |       "engines": {
 651 |         "node": ">= 0.6"
 652 |       }
 653 |     },
 654 |     "node_modules/content-type": {
 655 |       "version": "1.0.5",
 656 |       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
 657 |       "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
 658 |       "engines": {
 659 |         "node": ">= 0.6"
 660 |       }
 661 |     },
 662 |     "node_modules/cookie": {
 663 |       "version": "0.5.0",
 664 |       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
 665 |       "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
 666 |       "engines": {
 667 |         "node": ">= 0.6"
 668 |       }
 669 |     },
 670 |     "node_modules/cookie-signature": {
 671 |       "version": "1.0.6",
 672 |       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
 673 |       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
 674 |     },
 675 |     "node_modules/cors": {
 676 |       "version": "2.8.5",
 677 |       "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
 678 |       "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
 679 |       "dependencies": {
 680 |         "object-assign": "^4",
 681 |         "vary": "^1"
 682 |       },
 683 |       "engines": {
 684 |         "node": ">= 0.10"
 685 |       }
 686 |     },
 687 |     "node_modules/debug": {
 688 |       "version": "2.6.9",
 689 |       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
 690 |       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
 691 |       "dependencies": {
 692 |         "ms": "2.0.0"
 693 |       }
 694 |     },
 695 |     "node_modules/define-data-property": {
 696 |       "version": "1.1.4",
 697 |       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
 698 |       "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
 699 |       "dependencies": {
 700 |         "es-define-property": "^1.0.0",
 701 |         "es-errors": "^1.3.0",
 702 |         "gopd": "^1.0.1"
 703 |       },
 704 |       "engines": {
 705 |         "node": ">= 0.4"
 706 |       },
 707 |       "funding": {
 708 |         "url": "https://github.com/sponsors/ljharb"
 709 |       }
 710 |     },
 711 |     "node_modules/delayed-stream": {
 712 |       "version": "1.0.0",
 713 |       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
 714 |       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
 715 |       "engines": {
 716 |         "node": ">=0.4.0"
 717 |       }
 718 |     },
 719 |     "node_modules/depd": {
 720 |       "version": "2.0.0",
 721 |       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
 722 |       "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
 723 |       "engines": {
 724 |         "node": ">= 0.8"
 725 |       }
 726 |     },
 727 |     "node_modules/destroy": {
 728 |       "version": "1.2.0",
 729 |       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
 730 |       "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
 731 |       "engines": {
 732 |         "node": ">= 0.8",
 733 |         "npm": "1.2.8000 || >= 1.4.16"
 734 |       }
 735 |     },
 736 |     "node_modules/dotenv": {
 737 |       "version": "8.6.0",
 738 |       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
 739 |       "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
 740 |       "dev": true,
 741 |       "engines": {
 742 |         "node": ">=10"
 743 |       }
 744 |     },
 745 |     "node_modules/ee-first": {
 746 |       "version": "1.1.1",
 747 |       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
 748 |       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
 749 |     },
 750 |     "node_modules/encodeurl": {
 751 |       "version": "1.0.2",
 752 |       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
 753 |       "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
 754 |       "engines": {
 755 |         "node": ">= 0.8"
 756 |       }
 757 |     },
 758 |     "node_modules/es-define-property": {
 759 |       "version": "1.0.0",
 760 |       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
 761 |       "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
 762 |       "dependencies": {
 763 |         "get-intrinsic": "^1.2.4"
 764 |       },
 765 |       "engines": {
 766 |         "node": ">= 0.4"
 767 |       }
 768 |     },
 769 |     "node_modules/es-errors": {
 770 |       "version": "1.3.0",
 771 |       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
 772 |       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
 773 |       "engines": {
 774 |         "node": ">= 0.4"
 775 |       }
 776 |     },
 777 |     "node_modules/escape-html": {
 778 |       "version": "1.0.3",
 779 |       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
 780 |       "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
 781 |     },
 782 |     "node_modules/etag": {
 783 |       "version": "1.8.1",
 784 |       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
 785 |       "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
 786 |       "engines": {
 787 |         "node": ">= 0.6"
 788 |       }
 789 |     },
 790 |     "node_modules/express": {
 791 |       "version": "4.18.2",
 792 |       "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
 793 |       "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
 794 |       "dependencies": {
 795 |         "accepts": "~1.3.8",
 796 |         "array-flatten": "1.1.1",
 797 |         "body-parser": "1.20.1",
 798 |         "content-disposition": "0.5.4",
 799 |         "content-type": "~1.0.4",
 800 |         "cookie": "0.5.0",
 801 |         "cookie-signature": "1.0.6",
 802 |         "debug": "2.6.9",
 803 |         "depd": "2.0.0",
 804 |         "encodeurl": "~1.0.2",
 805 |         "escape-html": "~1.0.3",
 806 |         "etag": "~1.8.1",
 807 |         "finalhandler": "1.2.0",
 808 |         "fresh": "0.5.2",
 809 |         "http-errors": "2.0.0",
 810 |         "merge-descriptors": "1.0.1",
 811 |         "methods": "~1.1.2",
 812 |         "on-finished": "2.4.1",
 813 |         "parseurl": "~1.3.3",
 814 |         "path-to-regexp": "0.1.7",
 815 |         "proxy-addr": "~2.0.7",
 816 |         "qs": "6.11.0",
 817 |         "range-parser": "~1.2.1",
 818 |         "safe-buffer": "5.2.1",
 819 |         "send": "0.18.0",
 820 |         "serve-static": "1.15.0",
 821 |         "setprototypeof": "1.2.0",
 822 |         "statuses": "2.0.1",
 823 |         "type-is": "~1.6.18",
 824 |         "utils-merge": "1.0.1",
 825 |         "vary": "~1.1.2"
 826 |       },
 827 |       "engines": {
 828 |         "node": ">= 0.10.0"
 829 |       }
 830 |     },
 831 |     "node_modules/fast-json-stable-stringify": {
 832 |       "version": "2.1.0",
 833 |       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
 834 |       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
 835 |     },
 836 |     "node_modules/fill-range": {
 837 |       "version": "7.0.1",
 838 |       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
 839 |       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
 840 |       "dev": true,
 841 |       "dependencies": {
 842 |         "to-regex-range": "^5.0.1"
 843 |       },
 844 |       "engines": {
 845 |         "node": ">=8"
 846 |       }
 847 |     },
 848 |     "node_modules/finalhandler": {
 849 |       "version": "1.2.0",
 850 |       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
 851 |       "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
 852 |       "dependencies": {
 853 |         "debug": "2.6.9",
 854 |         "encodeurl": "~1.0.2",
 855 |         "escape-html": "~1.0.3",
 856 |         "on-finished": "2.4.1",
 857 |         "parseurl": "~1.3.3",
 858 |         "statuses": "2.0.1",
 859 |         "unpipe": "~1.0.0"
 860 |       },
 861 |       "engines": {
 862 |         "node": ">= 0.8"
 863 |       }
 864 |     },
 865 |     "node_modules/form-data": {
 866 |       "version": "4.0.0",
 867 |       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
 868 |       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
 869 |       "dependencies": {
 870 |         "asynckit": "^0.4.0",
 871 |         "combined-stream": "^1.0.8",
 872 |         "mime-types": "^2.1.12"
 873 |       },
 874 |       "engines": {
 875 |         "node": ">= 6"
 876 |       }
 877 |     },
 878 |     "node_modules/forwarded": {
 879 |       "version": "0.2.0",
 880 |       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
 881 |       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
 882 |       "engines": {
 883 |         "node": ">= 0.6"
 884 |       }
 885 |     },
 886 |     "node_modules/fresh": {
 887 |       "version": "0.5.2",
 888 |       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
 889 |       "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
 890 |       "engines": {
 891 |         "node": ">= 0.6"
 892 |       }
 893 |     },
 894 |     "node_modules/fsevents": {
 895 |       "version": "2.3.3",
 896 |       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
 897 |       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
 898 |       "dev": true,
 899 |       "hasInstallScript": true,
 900 |       "optional": true,
 901 |       "os": [
 902 |         "darwin"
 903 |       ],
 904 |       "engines": {
 905 |         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 906 |       }
 907 |     },
 908 |     "node_modules/function-bind": {
 909 |       "version": "1.1.2",
 910 |       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
 911 |       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
 912 |       "funding": {
 913 |         "url": "https://github.com/sponsors/ljharb"
 914 |       }
 915 |     },
 916 |     "node_modules/get-intrinsic": {
 917 |       "version": "1.2.4",
 918 |       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
 919 |       "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
 920 |       "dependencies": {
 921 |         "es-errors": "^1.3.0",
 922 |         "function-bind": "^1.1.2",
 923 |         "has-proto": "^1.0.1",
 924 |         "has-symbols": "^1.0.3",
 925 |         "hasown": "^2.0.0"
 926 |       },
 927 |       "engines": {
 928 |         "node": ">= 0.4"
 929 |       },
 930 |       "funding": {
 931 |         "url": "https://github.com/sponsors/ljharb"
 932 |       }
 933 |     },
 934 |     "node_modules/glob-parent": {
 935 |       "version": "5.1.2",
 936 |       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
 937 |       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
 938 |       "dev": true,
 939 |       "dependencies": {
 940 |         "is-glob": "^4.0.1"
 941 |       },
 942 |       "engines": {
 943 |         "node": ">= 6"
 944 |       }
 945 |     },
 946 |     "node_modules/gopd": {
 947 |       "version": "1.0.1",
 948 |       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
 949 |       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
 950 |       "dependencies": {
 951 |         "get-intrinsic": "^1.1.3"
 952 |       },
 953 |       "funding": {
 954 |         "url": "https://github.com/sponsors/ljharb"
 955 |       }
 956 |     },
 957 |     "node_modules/graphql": {
 958 |       "version": "16.8.1",
 959 |       "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.8.1.tgz",
 960 |       "integrity": "sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==",
 961 |       "engines": {
 962 |         "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
 963 |       }
 964 |     },
 965 |     "node_modules/graphql-tag": {
 966 |       "version": "2.12.6",
 967 |       "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.6.tgz",
 968 |       "integrity": "sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==",
 969 |       "dependencies": {
 970 |         "tslib": "^2.1.0"
 971 |       },
 972 |       "engines": {
 973 |         "node": ">=10"
 974 |       },
 975 |       "peerDependencies": {
 976 |         "graphql": "^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
 977 |       }
 978 |     },
 979 |     "node_modules/has-flag": {
 980 |       "version": "3.0.0",
 981 |       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
 982 |       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
 983 |       "dev": true,
 984 |       "engines": {
 985 |         "node": ">=4"
 986 |       }
 987 |     },
 988 |     "node_modules/has-property-descriptors": {
 989 |       "version": "1.0.2",
 990 |       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
 991 |       "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
 992 |       "dependencies": {
 993 |         "es-define-property": "^1.0.0"
 994 |       },
 995 |       "funding": {
 996 |         "url": "https://github.com/sponsors/ljharb"
 997 |       }
 998 |     },
 999 |     "node_modules/has-proto": {
1000 |       "version": "1.0.3",
1001 |       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
1002 |       "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
1003 |       "engines": {
1004 |         "node": ">= 0.4"
1005 |       },
1006 |       "funding": {
1007 |         "url": "https://github.com/sponsors/ljharb"
1008 |       }
1009 |     },
1010 |     "node_modules/has-symbols": {
1011 |       "version": "1.0.3",
1012 |       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
1013 |       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
1014 |       "engines": {
1015 |         "node": ">= 0.4"
1016 |       },
1017 |       "funding": {
1018 |         "url": "https://github.com/sponsors/ljharb"
1019 |       }
1020 |     },
1021 |     "node_modules/hasown": {
1022 |       "version": "2.0.1",
1023 |       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
1024 |       "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
1025 |       "dependencies": {
1026 |         "function-bind": "^1.1.2"
1027 |       },
1028 |       "engines": {
1029 |         "node": ">= 0.4"
1030 |       }
1031 |     },
1032 |     "node_modules/http-errors": {
1033 |       "version": "2.0.0",
1034 |       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
1035 |       "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
1036 |       "dependencies": {
1037 |         "depd": "2.0.0",
1038 |         "inherits": "2.0.4",
1039 |         "setprototypeof": "1.2.0",
1040 |         "statuses": "2.0.1",
1041 |         "toidentifier": "1.0.1"
1042 |       },
1043 |       "engines": {
1044 |         "node": ">= 0.8"
1045 |       }
1046 |     },
1047 |     "node_modules/iconv-lite": {
1048 |       "version": "0.4.24",
1049 |       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
1050 |       "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
1051 |       "dependencies": {
1052 |         "safer-buffer": ">= 2.1.2 < 3"
1053 |       },
1054 |       "engines": {
1055 |         "node": ">=0.10.0"
1056 |       }
1057 |     },
1058 |     "node_modules/ignore-by-default": {
1059 |       "version": "1.0.1",
1060 |       "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
1061 |       "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
1062 |       "dev": true
1063 |     },
1064 |     "node_modules/inherits": {
1065 |       "version": "2.0.4",
1066 |       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
1067 |       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
1068 |     },
1069 |     "node_modules/ipaddr.js": {
1070 |       "version": "1.9.1",
1071 |       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
1072 |       "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
1073 |       "engines": {
1074 |         "node": ">= 0.10"
1075 |       }
1076 |     },
1077 |     "node_modules/is-binary-path": {
1078 |       "version": "2.1.0",
1079 |       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
1080 |       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
1081 |       "dev": true,
1082 |       "dependencies": {
1083 |         "binary-extensions": "^2.0.0"
1084 |       },
1085 |       "engines": {
1086 |         "node": ">=8"
1087 |       }
1088 |     },
1089 |     "node_modules/is-extglob": {
1090 |       "version": "2.1.1",
1091 |       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
1092 |       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
1093 |       "dev": true,
1094 |       "engines": {
1095 |         "node": ">=0.10.0"
1096 |       }
1097 |     },
1098 |     "node_modules/is-glob": {
1099 |       "version": "4.0.3",
1100 |       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
1101 |       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
1102 |       "dev": true,
1103 |       "dependencies": {
1104 |         "is-extglob": "^2.1.1"
1105 |       },
1106 |       "engines": {
1107 |         "node": ">=0.10.0"
1108 |       }
1109 |     },
1110 |     "node_modules/is-number": {
1111 |       "version": "7.0.0",
1112 |       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
1113 |       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
1114 |       "dev": true,
1115 |       "engines": {
1116 |         "node": ">=0.12.0"
1117 |       }
1118 |     },
1119 |     "node_modules/lodash.sortby": {
1120 |       "version": "4.7.0",
1121 |       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
1122 |       "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA=="
1123 |     },
1124 |     "node_modules/loglevel": {
1125 |       "version": "1.9.1",
1126 |       "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.1.tgz",
1127 |       "integrity": "sha512-hP3I3kCrDIMuRwAwHltphhDM1r8i55H33GgqjXbrisuJhF4kRhW1dNuxsRklp4bXl8DSdLaNLuiL4A/LWRfxvg==",
1128 |       "engines": {
1129 |         "node": ">= 0.6.0"
1130 |       },
1131 |       "funding": {
1132 |         "type": "tidelift",
1133 |         "url": "https://tidelift.com/funding/github/npm/loglevel"
1134 |       }
1135 |     },
1136 |     "node_modules/long": {
1137 |       "version": "4.0.0",
1138 |       "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
1139 |       "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
1140 |     },
1141 |     "node_modules/lru-cache": {
1142 |       "version": "7.18.3",
1143 |       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
1144 |       "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
1145 |       "engines": {
1146 |         "node": ">=12"
1147 |       }
1148 |     },
1149 |     "node_modules/media-typer": {
1150 |       "version": "0.3.0",
1151 |       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
1152 |       "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
1153 |       "engines": {
1154 |         "node": ">= 0.6"
1155 |       }
1156 |     },
1157 |     "node_modules/merge-descriptors": {
1158 |       "version": "1.0.1",
1159 |       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
1160 |       "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
1161 |     },
1162 |     "node_modules/methods": {
1163 |       "version": "1.1.2",
1164 |       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
1165 |       "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
1166 |       "engines": {
1167 |         "node": ">= 0.6"
1168 |       }
1169 |     },
1170 |     "node_modules/mime": {
1171 |       "version": "1.6.0",
1172 |       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
1173 |       "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
1174 |       "bin": {
1175 |         "mime": "cli.js"
1176 |       },
1177 |       "engines": {
1178 |         "node": ">=4"
1179 |       }
1180 |     },
1181 |     "node_modules/mime-db": {
1182 |       "version": "1.52.0",
1183 |       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
1184 |       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
1185 |       "engines": {
1186 |         "node": ">= 0.6"
1187 |       }
1188 |     },
1189 |     "node_modules/mime-types": {
1190 |       "version": "2.1.35",
1191 |       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
1192 |       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
1193 |       "dependencies": {
1194 |         "mime-db": "1.52.0"
1195 |       },
1196 |       "engines": {
1197 |         "node": ">= 0.6"
1198 |       }
1199 |     },
1200 |     "node_modules/minimatch": {
1201 |       "version": "3.1.2",
1202 |       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
1203 |       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
1204 |       "dev": true,
1205 |       "dependencies": {
1206 |         "brace-expansion": "^1.1.7"
1207 |       },
1208 |       "engines": {
1209 |         "node": "*"
1210 |       }
1211 |     },
1212 |     "node_modules/ms": {
1213 |       "version": "2.0.0",
1214 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
1215 |       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
1216 |     },
1217 |     "node_modules/negotiator": {
1218 |       "version": "0.6.3",
1219 |       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
1220 |       "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
1221 |       "engines": {
1222 |         "node": ">= 0.6"
1223 |       }
1224 |     },
1225 |     "node_modules/node-abort-controller": {
1226 |       "version": "3.1.1",
1227 |       "resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz",
1228 |       "integrity": "sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ=="
1229 |     },
1230 |     "node_modules/node-fetch": {
1231 |       "version": "2.7.0",
1232 |       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
1233 |       "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
1234 |       "dependencies": {
1235 |         "whatwg-url": "^5.0.0"
1236 |       },
1237 |       "engines": {
1238 |         "node": "4.x || >=6.0.0"
1239 |       },
1240 |       "peerDependencies": {
1241 |         "encoding": "^0.1.0"
1242 |       },
1243 |       "peerDependenciesMeta": {
1244 |         "encoding": {
1245 |           "optional": true
1246 |         }
1247 |       }
1248 |     },
1249 |     "node_modules/nodemon": {
1250 |       "version": "3.1.0",
1251 |       "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.0.tgz",
1252 |       "integrity": "sha512-xqlktYlDMCepBJd43ZQhjWwMw2obW/JRvkrLxq5RCNcuDDX1DbcPT+qT1IlIIdf+DhnWs90JpTMe+Y5KxOchvA==",
1253 |       "dev": true,
1254 |       "dependencies": {
1255 |         "chokidar": "^3.5.2",
1256 |         "debug": "^4",
1257 |         "ignore-by-default": "^1.0.1",
1258 |         "minimatch": "^3.1.2",
1259 |         "pstree.remy": "^1.1.8",
1260 |         "semver": "^7.5.3",
1261 |         "simple-update-notifier": "^2.0.0",
1262 |         "supports-color": "^5.5.0",
1263 |         "touch": "^3.1.0",
1264 |         "undefsafe": "^2.0.5"
1265 |       },
1266 |       "bin": {
1267 |         "nodemon": "bin/nodemon.js"
1268 |       },
1269 |       "engines": {
1270 |         "node": ">=10"
1271 |       },
1272 |       "funding": {
1273 |         "type": "opencollective",
1274 |         "url": "https://opencollective.com/nodemon"
1275 |       }
1276 |     },
1277 |     "node_modules/nodemon/node_modules/debug": {
1278 |       "version": "4.3.4",
1279 |       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
1280 |       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
1281 |       "dev": true,
1282 |       "dependencies": {
1283 |         "ms": "2.1.2"
1284 |       },
1285 |       "engines": {
1286 |         "node": ">=6.0"
1287 |       },
1288 |       "peerDependenciesMeta": {
1289 |         "supports-color": {
1290 |           "optional": true
1291 |         }
1292 |       }
1293 |     },
1294 |     "node_modules/nodemon/node_modules/ms": {
1295 |       "version": "2.1.2",
1296 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
1297 |       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
1298 |       "dev": true
1299 |     },
1300 |     "node_modules/nopt": {
1301 |       "version": "1.0.10",
1302 |       "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
1303 |       "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
1304 |       "dev": true,
1305 |       "dependencies": {
1306 |         "abbrev": "1"
1307 |       },
1308 |       "bin": {
1309 |         "nopt": "bin/nopt.js"
1310 |       },
1311 |       "engines": {
1312 |         "node": "*"
1313 |       }
1314 |     },
1315 |     "node_modules/normalize-path": {
1316 |       "version": "3.0.0",
1317 |       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
1318 |       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
1319 |       "dev": true,
1320 |       "engines": {
1321 |         "node": ">=0.10.0"
1322 |       }
1323 |     },
1324 |     "node_modules/object-assign": {
1325 |       "version": "4.1.1",
1326 |       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
1327 |       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
1328 |       "engines": {
1329 |         "node": ">=0.10.0"
1330 |       }
1331 |     },
1332 |     "node_modules/object-inspect": {
1333 |       "version": "1.13.1",
1334 |       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
1335 |       "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
1336 |       "funding": {
1337 |         "url": "https://github.com/sponsors/ljharb"
1338 |       }
1339 |     },
1340 |     "node_modules/on-finished": {
1341 |       "version": "2.4.1",
1342 |       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
1343 |       "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
1344 |       "dependencies": {
1345 |         "ee-first": "1.1.1"
1346 |       },
1347 |       "engines": {
1348 |         "node": ">= 0.8"
1349 |       }
1350 |     },
1351 |     "node_modules/parseurl": {
1352 |       "version": "1.3.3",
1353 |       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
1354 |       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
1355 |       "engines": {
1356 |         "node": ">= 0.8"
1357 |       }
1358 |     },
1359 |     "node_modules/path-to-regexp": {
1360 |       "version": "0.1.7",
1361 |       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
1362 |       "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
1363 |     },
1364 |     "node_modules/picomatch": {
1365 |       "version": "2.3.1",
1366 |       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
1367 |       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
1368 |       "dev": true,
1369 |       "engines": {
1370 |         "node": ">=8.6"
1371 |       },
1372 |       "funding": {
1373 |         "url": "https://github.com/sponsors/jonschlinkert"
1374 |       }
1375 |     },
1376 |     "node_modules/proxy-addr": {
1377 |       "version": "2.0.7",
1378 |       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
1379 |       "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
1380 |       "dependencies": {
1381 |         "forwarded": "0.2.0",
1382 |         "ipaddr.js": "1.9.1"
1383 |       },
1384 |       "engines": {
1385 |         "node": ">= 0.10"
1386 |       }
1387 |     },
1388 |     "node_modules/pstree.remy": {
1389 |       "version": "1.1.8",
1390 |       "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
1391 |       "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
1392 |       "dev": true
1393 |     },
1394 |     "node_modules/qs": {
1395 |       "version": "6.11.0",
1396 |       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
1397 |       "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
1398 |       "dependencies": {
1399 |         "side-channel": "^1.0.4"
1400 |       },
1401 |       "engines": {
1402 |         "node": ">=0.6"
1403 |       },
1404 |       "funding": {
1405 |         "url": "https://github.com/sponsors/ljharb"
1406 |       }
1407 |     },
1408 |     "node_modules/range-parser": {
1409 |       "version": "1.2.1",
1410 |       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
1411 |       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
1412 |       "engines": {
1413 |         "node": ">= 0.6"
1414 |       }
1415 |     },
1416 |     "node_modules/raw-body": {
1417 |       "version": "2.5.1",
1418 |       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
1419 |       "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
1420 |       "dependencies": {
1421 |         "bytes": "3.1.2",
1422 |         "http-errors": "2.0.0",
1423 |         "iconv-lite": "0.4.24",
1424 |         "unpipe": "1.0.0"
1425 |       },
1426 |       "engines": {
1427 |         "node": ">= 0.8"
1428 |       }
1429 |     },
1430 |     "node_modules/readdirp": {
1431 |       "version": "3.6.0",
1432 |       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
1433 |       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
1434 |       "dev": true,
1435 |       "dependencies": {
1436 |         "picomatch": "^2.2.1"
1437 |       },
1438 |       "engines": {
1439 |         "node": ">=8.10.0"
1440 |       }
1441 |     },
1442 |     "node_modules/retry": {
1443 |       "version": "0.13.1",
1444 |       "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
1445 |       "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
1446 |       "engines": {
1447 |         "node": ">= 4"
1448 |       }
1449 |     },
1450 |     "node_modules/safe-buffer": {
1451 |       "version": "5.2.1",
1452 |       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
1453 |       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
1454 |       "funding": [
1455 |         {
1456 |           "type": "github",
1457 |           "url": "https://github.com/sponsors/feross"
1458 |         },
1459 |         {
1460 |           "type": "patreon",
1461 |           "url": "https://www.patreon.com/feross"
1462 |         },
1463 |         {
1464 |           "type": "consulting",
1465 |           "url": "https://feross.org/support"
1466 |         }
1467 |       ]
1468 |     },
1469 |     "node_modules/safer-buffer": {
1470 |       "version": "2.1.2",
1471 |       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
1472 |       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
1473 |     },
1474 |     "node_modules/semver": {
1475 |       "version": "7.6.0",
1476 |       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
1477 |       "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
1478 |       "dev": true,
1479 |       "dependencies": {
1480 |         "lru-cache": "^6.0.0"
1481 |       },
1482 |       "bin": {
1483 |         "semver": "bin/semver.js"
1484 |       },
1485 |       "engines": {
1486 |         "node": ">=10"
1487 |       }
1488 |     },
1489 |     "node_modules/semver/node_modules/lru-cache": {
1490 |       "version": "6.0.0",
1491 |       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
1492 |       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
1493 |       "dev": true,
1494 |       "dependencies": {
1495 |         "yallist": "^4.0.0"
1496 |       },
1497 |       "engines": {
1498 |         "node": ">=10"
1499 |       }
1500 |     },
1501 |     "node_modules/send": {
1502 |       "version": "0.18.0",
1503 |       "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
1504 |       "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
1505 |       "dependencies": {
1506 |         "debug": "2.6.9",
1507 |         "depd": "2.0.0",
1508 |         "destroy": "1.2.0",
1509 |         "encodeurl": "~1.0.2",
1510 |         "escape-html": "~1.0.3",
1511 |         "etag": "~1.8.1",
1512 |         "fresh": "0.5.2",
1513 |         "http-errors": "2.0.0",
1514 |         "mime": "1.6.0",
1515 |         "ms": "2.1.3",
1516 |         "on-finished": "2.4.1",
1517 |         "range-parser": "~1.2.1",
1518 |         "statuses": "2.0.1"
1519 |       },
1520 |       "engines": {
1521 |         "node": ">= 0.8.0"
1522 |       }
1523 |     },
1524 |     "node_modules/send/node_modules/ms": {
1525 |       "version": "2.1.3",
1526 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
1527 |       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
1528 |     },
1529 |     "node_modules/serve-static": {
1530 |       "version": "1.15.0",
1531 |       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
1532 |       "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
1533 |       "dependencies": {
1534 |         "encodeurl": "~1.0.2",
1535 |         "escape-html": "~1.0.3",
1536 |         "parseurl": "~1.3.3",
1537 |         "send": "0.18.0"
1538 |       },
1539 |       "engines": {
1540 |         "node": ">= 0.8.0"
1541 |       }
1542 |     },
1543 |     "node_modules/set-function-length": {
1544 |       "version": "1.2.1",
1545 |       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
1546 |       "integrity": "sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==",
1547 |       "dependencies": {
1548 |         "define-data-property": "^1.1.2",
1549 |         "es-errors": "^1.3.0",
1550 |         "function-bind": "^1.1.2",
1551 |         "get-intrinsic": "^1.2.3",
1552 |         "gopd": "^1.0.1",
1553 |         "has-property-descriptors": "^1.0.1"
1554 |       },
1555 |       "engines": {
1556 |         "node": ">= 0.4"
1557 |       }
1558 |     },
1559 |     "node_modules/setprototypeof": {
1560 |       "version": "1.2.0",
1561 |       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
1562 |       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
1563 |     },
1564 |     "node_modules/sha.js": {
1565 |       "version": "2.4.11",
1566 |       "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
1567 |       "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
1568 |       "dependencies": {
1569 |         "inherits": "^2.0.1",
1570 |         "safe-buffer": "^5.0.1"
1571 |       },
1572 |       "bin": {
1573 |         "sha.js": "bin.js"
1574 |       }
1575 |     },
1576 |     "node_modules/side-channel": {
1577 |       "version": "1.0.5",
1578 |       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.5.tgz",
1579 |       "integrity": "sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==",
1580 |       "dependencies": {
1581 |         "call-bind": "^1.0.6",
1582 |         "es-errors": "^1.3.0",
1583 |         "get-intrinsic": "^1.2.4",
1584 |         "object-inspect": "^1.13.1"
1585 |       },
1586 |       "engines": {
1587 |         "node": ">= 0.4"
1588 |       },
1589 |       "funding": {
1590 |         "url": "https://github.com/sponsors/ljharb"
1591 |       }
1592 |     },
1593 |     "node_modules/simple-update-notifier": {
1594 |       "version": "2.0.0",
1595 |       "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
1596 |       "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
1597 |       "dev": true,
1598 |       "dependencies": {
1599 |         "semver": "^7.5.3"
1600 |       },
1601 |       "engines": {
1602 |         "node": ">=10"
1603 |       }
1604 |     },
1605 |     "node_modules/statuses": {
1606 |       "version": "2.0.1",
1607 |       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
1608 |       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
1609 |       "engines": {
1610 |         "node": ">= 0.8"
1611 |       }
1612 |     },
1613 |     "node_modules/supports-color": {
1614 |       "version": "5.5.0",
1615 |       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
1616 |       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
1617 |       "dev": true,
1618 |       "dependencies": {
1619 |         "has-flag": "^3.0.0"
1620 |       },
1621 |       "engines": {
1622 |         "node": ">=4"
1623 |       }
1624 |     },
1625 |     "node_modules/to-regex-range": {
1626 |       "version": "5.0.1",
1627 |       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
1628 |       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
1629 |       "dev": true,
1630 |       "dependencies": {
1631 |         "is-number": "^7.0.0"
1632 |       },
1633 |       "engines": {
1634 |         "node": ">=8.0"
1635 |       }
1636 |     },
1637 |     "node_modules/toidentifier": {
1638 |       "version": "1.0.1",
1639 |       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
1640 |       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
1641 |       "engines": {
1642 |         "node": ">=0.6"
1643 |       }
1644 |     },
1645 |     "node_modules/touch": {
1646 |       "version": "3.1.0",
1647 |       "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
1648 |       "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==",
1649 |       "dev": true,
1650 |       "dependencies": {
1651 |         "nopt": "~1.0.10"
1652 |       },
1653 |       "bin": {
1654 |         "nodetouch": "bin/nodetouch.js"
1655 |       }
1656 |     },
1657 |     "node_modules/tr46": {
1658 |       "version": "0.0.3",
1659 |       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
1660 |       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
1661 |     },
1662 |     "node_modules/tslib": {
1663 |       "version": "2.6.2",
1664 |       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
1665 |       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
1666 |     },
1667 |     "node_modules/type-is": {
1668 |       "version": "1.6.18",
1669 |       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
1670 |       "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
1671 |       "dependencies": {
1672 |         "media-typer": "0.3.0",
1673 |         "mime-types": "~2.1.24"
1674 |       },
1675 |       "engines": {
1676 |         "node": ">= 0.6"
1677 |       }
1678 |     },
1679 |     "node_modules/undefsafe": {
1680 |       "version": "2.0.5",
1681 |       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
1682 |       "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
1683 |       "dev": true
1684 |     },
1685 |     "node_modules/undici-types": {
1686 |       "version": "5.26.5",
1687 |       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
1688 |       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
1689 |     },
1690 |     "node_modules/unpipe": {
1691 |       "version": "1.0.0",
1692 |       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
1693 |       "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
1694 |       "engines": {
1695 |         "node": ">= 0.8"
1696 |       }
1697 |     },
1698 |     "node_modules/utils-merge": {
1699 |       "version": "1.0.1",
1700 |       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
1701 |       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
1702 |       "engines": {
1703 |         "node": ">= 0.4.0"
1704 |       }
1705 |     },
1706 |     "node_modules/uuid": {
1707 |       "version": "9.0.1",
1708 |       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
1709 |       "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
1710 |       "funding": [
1711 |         "https://github.com/sponsors/broofa",
1712 |         "https://github.com/sponsors/ctavan"
1713 |       ],
1714 |       "bin": {
1715 |         "uuid": "dist/bin/uuid"
1716 |       }
1717 |     },
1718 |     "node_modules/value-or-promise": {
1719 |       "version": "1.0.12",
1720 |       "resolved": "https://registry.npmjs.org/value-or-promise/-/value-or-promise-1.0.12.tgz",
1721 |       "integrity": "sha512-Z6Uz+TYwEqE7ZN50gwn+1LCVo9ZVrpxRPOhOLnncYkY1ZzOYtrX8Fwf/rFktZ8R5mJms6EZf5TqNOMeZmnPq9Q==",
1722 |       "engines": {
1723 |         "node": ">=12"
1724 |       }
1725 |     },
1726 |     "node_modules/vary": {
1727 |       "version": "1.1.2",
1728 |       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
1729 |       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
1730 |       "engines": {
1731 |         "node": ">= 0.8"
1732 |       }
1733 |     },
1734 |     "node_modules/webidl-conversions": {
1735 |       "version": "3.0.1",
1736 |       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
1737 |       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
1738 |     },
1739 |     "node_modules/whatwg-mimetype": {
1740 |       "version": "3.0.0",
1741 |       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
1742 |       "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
1743 |       "engines": {
1744 |         "node": ">=12"
1745 |       }
1746 |     },
1747 |     "node_modules/whatwg-url": {
1748 |       "version": "5.0.0",
1749 |       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
1750 |       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
1751 |       "dependencies": {
1752 |         "tr46": "~0.0.3",
1753 |         "webidl-conversions": "^3.0.0"
1754 |       }
1755 |     },
1756 |     "node_modules/yallist": {
1757 |       "version": "4.0.0",
1758 |       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
1759 |       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
1760 |       "dev": true
1761 |     }
1762 |   }
1763 | }
1764 | 


--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "catstronauts-server",
 3 |   "version": "1.0.0",
 4 |   "description": "back-end demo app for Apollo's lift-off II course",
 5 |   "main": "src/index.js",
 6 |   "scripts": {
 7 |     "start": "nodemon src/index"
 8 |   },
 9 |   "dependencies": {
10 |     "@apollo/server": "^4.5.0",
11 |     "@graphql-tools/mock": "^8.7.6",
12 |     "@graphql-tools/schema": "^9.0.4",
13 |     "graphql": "^16.6.0",
14 |     "graphql-tag": "^2.12.6"
15 |   },
16 |   "devDependencies": {
17 |     "dotenv": "^8.2.0",
18 |     "nodemon": "^3.0.2"
19 |   },
20 |   "author": "Raphael Terrier @R4ph-t",
21 |   "license": "MIT",
22 |   "private": true
23 | }
24 | 


--------------------------------------------------------------------------------
/server/src/index.js:
--------------------------------------------------------------------------------
 1 | const { ApolloServer } = require('@apollo/server');
 2 | const { startStandaloneServer } = require('@apollo/server/standalone');
 3 | const { addMocksToSchema } = require('@graphql-tools/mock');
 4 | const { makeExecutableSchema } = require('@graphql-tools/schema');
 5 | 
 6 | const typeDefs = require('./schema');
 7 | 
 8 | const mocks = {
 9 |   Query: () => ({
10 |     tracksForHome: () => [...new Array(6)],
11 |   }),
12 |   Track: () => ({
13 |     id: () => 'track_01',
14 |     title: () => 'Astro Kitty, Space Explorer',
15 |     author: () => {
16 |       return {
17 |         name: 'Grumpy Cat',
18 |         photo:
19 |           'https://res.cloudinary.com/dety84pbu/image/upload/v1606816219/kitty-veyron-sm_mctf3c.jpg',
20 |       };
21 |     },
22 |     thumbnail: () =>
23 |       'https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg',
24 |     length: () => 1210,
25 |     modulesCount: () => 6,
26 |   }),
27 | };
28 | 
29 | async function startApolloServer() {
30 |   const server = new ApolloServer({
31 |     schema: addMocksToSchema({
32 |       schema: makeExecutableSchema({ typeDefs }),
33 |       mocks,
34 |     }),
35 |   });
36 |   const { url } = await startStandaloneServer(server);
37 | 
38 |   console.log(`
39 |       🚀  Server is running
40 |       📭  Query at ${url}
41 |     `);
42 | }
43 | 
44 | startApolloServer();
45 | 


--------------------------------------------------------------------------------
/server/src/schema.js:
--------------------------------------------------------------------------------
 1 | const gql = require('graphql-tag');
 2 | 
 3 | const typeDefs = gql`
 4 |   type Query {
 5 |     "Query to get tracks array for the homepage grid"
 6 |     tracksForHome: [Track!]!
 7 |   }
 8 | 
 9 |   "A track is a group of Modules that teaches about a specific topic"
10 |   type Track {
11 |     id: ID!
12 |     "The track's title"
13 |     title: String!
14 |     "The track's main Author"
15 |     author: Author!
16 |     "The track's illustration to display in track card or track page detail"
17 |     thumbnail: String
18 |     "The track's approximate length to complete, in minutes"
19 |     length: Int
20 |     "The number of modules this track contains"
21 |     modulesCount: Int
22 |   }
23 | 
24 |   "Author of a complete Track or a Module"
25 |   type Author {
26 |     id: ID!
27 |     "Author's first and last name"
28 |     name: String!
29 |     "Author's profile picture"
30 |     photo: String
31 |   }
32 | `;
33 | 
34 | module.exports = typeDefs;
35 | 


--------------------------------------------------------------------------------