code-mentoring / learn Goto Github PK

Is your feature request related to a problem? Please describe.
As a developer on PCM, I want to run tests without the seeing the error printed from logs when testing negative flows

Describe the solution you'd like
Silence the logs for any test class

Describe alternatives you've considered
Currently logs are printing when running tests

Additional context

Development team requires a general lesson design and structure to guide their implementation, i.e. entities, API, etc.

E.g. Like the lessons in freecodecamp. The completed mark ( ✓ ) and the progress (10/21) showed in this screenshot:

The story:

As a user that wants to learn progressively down a path, I want to to learn concepts within a module.

What we should do:

We should build the Concept database entity so that the user can learn concepts of that module.

To be successful we need to:

• Build the Concept entity in the database
• Has the following properties:
  • id: UUID
  • name: string
  • icon: string
  • description: string
  • taughtIn: reference to a Module entity (foreign key contraint)
• Relevant additions to seed Modules
• Contain relevant tests for work done that pass in CI

Schema

LINK TO SCHEMA ERD

Is your feature request related to a problem? Please describe.
As a user, I want to signup to a path (like a language in Duolingo). This path should progress me from entry level lessons to advanced lessons of increasing difficulty as I progress.

Describe the solution you'd like

• A Path entity in the API that has a many to many relationship to User
• A Path should have:
  • name Name of the path (EG: Javascript, HTML, etc)
  • icon Link to icon of the path
  • description Short paragraph explaining the Path
  • modules All Module (Not completed) entities that belong to the path

The story:

As a user that wants to engage in his learning journey, I want to have friends within the community

What we should do:

We should build the Friends database entity so that the user can connect with other users to become friends in the platform.

To be successful we need to:

• Build the Module entity in the database
• Has the following properties:
  • id: UUID
  • userId1: UUID
  • userId2: UUID
  • since: date
• Relevant additions to seed Modules
• Contain relevant tests for work done that pass in CI

Schema

LINK TO SCHEMA ERD

Describe the bug
Running the project on windows is currently impossible due to environment variables being hardcoded into npm scripts.

To Reproduce
On windows, run yarn build

Expected behavior
Should build correctly on windows using somthing like cross-env

Desktop (please complete the following information):

• OS: Windows

Is your feature request related to a problem? Please describe.
As a contributor to Project CM, I want to read through a readme and wiki article to understand how to run and use the ui package.

Describe the solution you'd like

• We should have a Wiki article that outlines in detail how the UI project works
• We should have a README.md under packages/ui that links to the wiki and has some general information for the package.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
As a developer of PCM, I want to see all the files, classes, methods, functions etc that I have not tested.

Describe the solution you'd like
In the API, we should integrate coverage reporting with codecov automatically in the CI. PR check should fail if the coverage is reduced, ensuring that PRs add tests for new things.

Describe alternatives you've considered
Currently we're just testing which is great, but we have no way of knowing what has been tested.

Describe the bug
During the build process client package will generate an error preventing the build.

To Reproduce
Steps to reproduce the behavior:

1. cd into project/learn
2. execute yarn run build
3. The error will appear inside the file apollo.ts

Expected behavior
Build smoothly without error

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 81.0.4044.113

Is your feature request related to a problem? Please describe.
As a contributor to PCM, I want to run a command to populate my database with dummy data without having to think about it.

Describe the solution you'd like
There should be a seed script in API that populates all entities with mock data. As new entities are added, the seed script should be updated to include it.

Additional context

• It should be aliased with yarn seed in api project
• Documentation should be added to wiki/readme (@code-mentoring/documentation)
• Should print to the console what entities it added, and a sample user to login with

The story:

As a user, I want to easily adjust a number value

What we should do:

We should build a slider ui component so that range values can be visually identified.

To be successful we need to:

Check these off as they are completed:

• <Slider /> element is exposed in the ui package
• Allows for onChange property to notify if value changes
• Takes min property as number
• Takes max property as number
• Takes steps property as number to determine distance between values

Design

LINK TO FIGMA DESIGN

Other notes

• We may be able to use a library for this. Do some research to see if we can find a good one that we can style as we like

Is your feature request related to a problem? Please describe.
As a user, I want to see an easy to use list of items that clearly outline what option I have selected

Describe the solution you'd like
We should have a RadioList component (like a radio group, just styled differently) in the ui project.

• RadioComponent should be exposed in ui package
• Takes an array of options with name, label, and an optional subLabel (small text on the right)
• Only one option can be selected
• Has an onChange prop to allow for listening for changes

Additional context
Designs: https://www.figma.com/file/4iRXVSBcfJ7WQxYSZNc2FO/Components?node-id=40%3A0

The story:

As a front end developer that creates UI components and client interface, I want to be able to have the right colors available at the tailwind config file.

What we should do:

We should update the colors of the tailwind config file so that we can see the right results when comparing with the Figma project.

To be successful we need to:

Check these off as they are completed:

• Copy the colors from Figma project
• Paste them in the correct order in the tailwind config file

Design

LINK TO FIGMA DESIGN

Add user profile to seeder

The story:

As a learner that subscribed to a path, I want to view all the lessons and assignments on the path sorted chronologically like Duolingo

What we should do:

We should build a small component that takes an icon and label so that the user can click on one to go to the lesson/assignment.

To be successful we need to:

Check these off as they are completed:

• A small PathModule component in client components
• Takes the lesson prop of the Lesson type from the API
• Takes a prop state of values completed, locked or open

Design

LINK TO FIGMA DESIGN

Is your feature request related to a problem? Please describe.

• To create a useful revision history, teams should first agree on a commit message convention to use.
• New contributors don't know how to create a pull request.

Describe the solution you'd like
Update CONTRIBUTING.md with conventions for:

• Commit messages
• Pull requests

Describe alternatives you've considered
n/a

Additional context
n/a

Describe the bug
Added "seeders" to comment in DANGEROUSLY_RESET_DATABASE fn

Is your feature request related to a problem? Please describe.
Currently there is no CI to check PRs and new commits.

Describe the solution you'd like
Using Github actions, we should have an automated check that tests the API and front end, linting, seeding, etc for any new PR or commit

Describe alternatives you've considered
Travis could also work, but github actions seems to be the best solution considering our tasks are all here

Is your feature request related to a problem? Please describe.
As someone new to the platform, I want to tell the platform about myself (why I'm here, my skill level, etc)

Describe the solution you'd like
There should be an API graphql query updatePreferences that allow the user to configure:

• Their coding ability (1-10)
• Why they are here (text field)
• Practice cadence (1-4)

Additional context

• Eventually there may be extra preferences we add, however for now let' keep it to these 3.
• Relies on #78

Story

As a user, I want to log in and know who I am signed in as. I want the app to show my name, etc.

Why

Client should have a way of identifying who the current user is via a query { me {...} } GQL query

What

Query should take no parameters, and just return the current user based on the JWT supplied

The story:

As a social person that wants to find my friends on CM, I want to search via a name or email for people I know

What we should do:

We should build a searchUsers query so that users can search for other users (to eventually add them as a friend.

To be successful we need to:

• Have a searchUsers query
• Return a list of User entities on the result
• Should allow searching via email
• Should allow searching via name
• Contain relevant tests for work done that pass in CI

Query / Mutation structures

Query: searchUsers

query ($search: String!) {
  searchUsers(search: $search) {
    id
    firstName
    lastName
    # ...
  }
}

Is your feature request related to a problem? Please describe.
As a regular user of PCM, I want to save my preferences.

Describe the solution you'd like
There should be a DB model for User preferences (One to One relationship) with properties:

• userId (UUID)
• practiceGoal (Number 1-4)
• why (Text field of why they are here)

The UserService should be appended to include:

• An updatePreferences method to set the user's preferences.

Additional context

• This model will be used by the updatePreferences mutation

Describe the bug
There is a spacing issue with multiple users in the <LeaderboardWidget> component

To Reproduce
Steps to reproduce the behavior:

1. Login to dashboard
2. Have multiple users in the database
3. See padding error

Expected behavior
There should be a small space using the mb-2 class

Screenshots

Is your feature request related to a problem? Please describe.
As a contributer to Project CM, I want to see an organised repository of information regarding how I can help, and how the project works.

Describe the solution you'd like
We currently have some basic documentation in the README.md file. This should be moved over to a better system like Github Wiki

Describe alternatives you've considered
We can stick with README.md for now, but it will get too big pretty quickly.

As a user, I want to take a lesson which is going to be inside a path (like lessons in freecodecamp.org). Once I start doing this lesson and complete it. It should be marked as done, so that I can continue my progress to the next lesson.

Describe the solution you'd like
An Lesson entity in the API that have relation with the User_Path table so that I can keep track of the user's progress inside the path.

Describe alternatives you've considered
Possible columns inside the Lesson entity:

• Questions
  --That are the content or challenges that the user have to complete

• Score(%)
  --The amount of challenges the user have done

Additional context
e.g.: LIke the lessons in freecodecamp. The completed mark ( ✓ ) and the progress (10/21) showed in this screenshot

Blocked by

• #83

Is your feature request related to a problem? Please describe.
As someone who just signed up to CM, I want a nice introduction to the platform when I first sign in.

Describe the solution you'd like
We should replicate our welcoming process that we do for physical events online. Our famous, "So, why are you here?" should carry across to the platform to make new users feel welcome.

There should be a small wizard when a user first logs in that asks:

1. What their current level of coding is (1-10 slider)
2. Why they are here (text field)
3. What they want to learn (path selection)
4. How often they want to practice (learning goal like Duolingo)

Additional context
This should be designed and put into the PCM - App in Figma

Describe the bug
A recent merge of #60 creates invalid users. It's creating data using the repository directly not using the UserService.create. All data created should be created using services, as we don't know what extra stuff happens in them. Direct data entry should be discouraged unless it's inside a service itself.

To Reproduce
Steps to reproduce the behavior:

1. cd packages/api
2. yarn seed
3. Open up database UI
4. View plain text passwords for generated users

Expected behavior
User password should be hashed from generated users

Screenshots

Is your feature request related to a problem? Please describe.
Staging environment needed for:

• General QA testing can be carried out before deploying new releases to master branch
• Designers can log into current development version without requiring local environment

Describe the solution you'd like

• API in Heroku
• Client in Netlify
• Environments based on develop branch.

The bug relates to:

API

Describe the bug
After running...
yarn start-db
Docker Dashboard will generate this error preventing postgres to finish.

db_1 | 2020-05-01 01:45:08.789 UTC [82] FATAL: data directory "/var/lib/postgresql/data" has wrong ownership
db_1 | 2020-05-01 01:45:08.789 UTC [82] HINT: The server must be started by the user that owns the data directory.
db_1 | running bootstrap script ...
learn_db_1 exited with code 1

To Reproduce
Pull from branch develop
Run yarn start-db in project root.

Expected behavior
Docker will notify you that the database system is ready to accept connect.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome

• Installation and Setup section was removed README.md as expected, but the content was not updated in the Wiki.
• Update step 4 to "4. Install docker. This will be needed to run the database locally"
• Delete step 5

Is your feature request related to a problem? Please describe.
As someone learning how to code, I want to see how far I am generally across the languages/technologies I know.

Describe the solution you'd like
There should be a widget on the dashboard that displays all paths and the progress the user is through them.

Additional context
May want to use a canvas to draw the arc.
https://www.figma.com/file/MfOc0a8Ac9Zoh9RppoEuiD/CM-UI?node-id=2%3A0

Data
This will need dummy data for now. It should follow the format of:

interface PathProgress {
  path: Path // Still being worked on by @raysercast1 
  progress: number; // 0 - 1
}

// Dummy interface until it's available from #5 
interface Path {
  id: string;
  name: string;
  icon: string;
  description: string;
}

<ProgressWidget /> // fetches its own data (mocked for now)

The story:

As a user that wants to learn progressively down a path, I want to have my lessons and assignments divided up into small modules I can complete.

What we should do:

We should build the Module database entity so that the user can complete lessons and assignments.

To be successful we need to:

• Build the Module entity in the database
• Has the following properties:
  • id: UUID
  • name: string
  • icon: string
  • pathId: reference to a Path entity (foreign key contraint)
  • type: "lesson" OR "assignment"
  • previous: NULLABLE - reference to another module using ID (foreign key constraint)
• Relevant additions to seed Modules
• Contain relevant tests for work done that pass in CI

Schema

LINK TO SCHEMA ERD

We need a CI task to publish packages (specifically the ui package) so it can be used in other projects like www

• Installation and Setup section in README.md is different to the Wiki.
• Remove content from README.md which is covered in Wiki.

Is your feature request related to a problem? Please describe.
As a contributor to Project CM, I want to read through a readme and wiki article to understand how to run and use the client front-end package.

Describe the solution you'd like

• We should have a Wiki article that outlines in detail how the Client project works
• We should have a README.md under packages/client that links to the wiki and has some general information for the package.

Is your feature request related to a problem? Please describe.
As a contributor to Project CM, I want to read through a readme and wiki article to understand how to run and use the api package.

Describe the solution you'd like

• We should have a Wiki article that outlines in detail how the API project works
• We should have a README.md under packages/api that links to the wiki and has some general information for the package.

The story:

As a PCM contributor, I want to have some test users with userPreferences filled. This will help to test cases like onboarding workflow, update user...

What we should do:

When seeding users, it should seed user preferences using userPreferences service

To be successful we need to:

• Inject userPreferences service to Seeders.service
• In seedUsers fn, make that some users have userPreferences populated and some with null

Relies on

• #78 need to be merged first

Is your feature request related to a problem? Please describe.
As an avid learner, I want to signup to new paths and languages as I progress.

Describe the solution you'd like
There should be a modal where a user can signup to more Paths.

• Modal component added to ui
• Join Path Modal added to client
• Reads paths from the query paths {} in api
• Button is disabled until user selects a path
• Only one path can be selected

Additional context

• Will require a <Modal /> entity in ui
• Designs: https://www.figma.com/file/eyk5tQgLhIpyiORYfWxeUh/Learning-App?node-id=197%3A0

Is your feature request related to a problem? Please describe.
As a developer of this project, I want to know if the code I wrote broke anything anywhere in the API.

Describe the solution you'd like
Using Jest, to have automated testing on the API setup in Travis CI. It should test all the queries and mutations in the API.

The story:

As a new user that just signed up, I want to be greeted to the platform to orientate myself

What we should do:

We should build an onboarding experience for new users so that they feel welcomed to the platform and have set some initial goals.

To be successful we need to:

• Show the onboarding flow to new users
• Disable going to any other page in the app till it is completed (requires API feature)
• Provide a "wizard" like interface the user can step through to answer questions
• Submit data to a mutation updatePreferences (#79)

Design

LINK TO FIGMA PRESENTATION
LINK TO FIGMA DESIGN

Relies on

• #78
• #79
• #81

Is your feature request related to a problem? Please describe.
As a developer on PCM, I want to run tests easily without setting up a database

Describe the solution you'd like
We should have the option of a in memory, sqlite database that is used in tests.

Describe alternatives you've considered
Currently we just use normal connection

Additional context
https://gist.github.com/Ciantic/be6a8b8ca27ee15e2223f642b5e01549

Is your feature request related to a problem? Please describe.
As a developer of PCM, I want an easy way to connect to a database that doesn't involve configuring a database

Describe the solution you'd like
We should have a docker compose file that spins up a local database easily.

Describe alternatives you've considered
Currently we are enforcing that everyone sets up their own database, and is a learning curve for people to get onto the platform.

Additional context
Docker will be a pre-requirement for this

Describe the bug
UserService is imported twice

Is your feature request related to a problem? Please describe.
As a peer learner, I want to see other people I know and how they're progressing to see how I compare. Fun competition amongst friends.

Describe the solution you'd like
There should be a widget on the dashboard that shows a list of users ranked by their score.

Additional context
Relies on:

• #27 The user profile is not completed yet

The story:

As a user when I open a module I want to do assignments.

What we should do:

We should build the Assignment database entity so that the user can do lessons an assignment.

To be successful we need to:

• Build the Assignment entity in the database
• Has the following properties:
  • id: UUID
  • moduleId: UUID
  • description: string
• Relevant additions to seed Modules
• Contain relevant tests for work done that pass in CI

Schema

LINK TO SCHEMA ERD

Is your feature request related to a problem? Please describe.
As a user I want to navigate across the app easily and see relevant information about my progress in the app.

Describe the solution you'd like
A header component needs to be built for the UI. It should follow the designs given in the Figma document

Additional context
Figma designs: https://www.figma.com/file/MfOc0a8Ac9Zoh9RppoEuiD/CM-UI?node-id=0%3A1&viewport=550%2C371%2C0.47890499234199524

Relies on:

• #1 Me GQL Query

Is your feature request related to a problem? Please describe.
As a user, I want to put names to faces for all other people in the app.

Describe the solution you'd like
User profile images should be pulled in from gravatar and provided as a new attribute for the User entity.

Describe alternatives you've considered
We could also do uploading of pictures, however that would be more complex and we'd have to store them somewhere.

Additional context
Gravatar is a service that aims to be the users icon for all the internet. Services and apps around the internet use it instead of rolling their own profile image system.

The story:

As a signed-in user that wants to sign out, I want to be able to click on a button to sign out.

What we should do:

Build a sign-out mutation that clears the accessToken from the LoginOutput Type and return a message saying:

You have signed out!

To be successful we need to:

• Make a signOut query
• Redirect the signed-out user to the login page
• Return a boolean indicating if the user has signed out
• Contain relevant tests for work done that pass in CI

Query / Mutation structures

Query: signOut

query {
  signOut # Returns a boolean
}

#115

Is your feature request related to a problem? Please describe.
As a competitive learner, I want to see how I am comparing to other learners.

Describe the solution you'd like
Users compete to be ranked by highest scores in the Leaderboard (see #26 ).

Score is based on:

• 1 point per completed module

Additional context

• Score may become more sophisticated in future
• Just incrementing score per module completed is sufficient to begin with
• Score could be a number field on User entity

Is your feature request related to a problem? Please describe.
So we can maintain consistency of code quality, we should use TSLint across our project.

Describe the solution you'd like
The lint command should be run on CI so all PRs need to pass the lint check before they can be merged.