cynthesize/cynthesize-frontend

Frontend written in JS and deployed GraphQL for Cynthesize. Development build: https://cynthesize-develop.netlify.com

cynthesize-frontend's Issues

Save users' profile image

Change the /home route to idea-feed page.

ER:

The /home should go to the route http://localhost:4200/idea/feed

AR:

It is going to an empty home page.

STR:

1. http://localhost:4200/home

Screenshots:

Design a comment component.

Currenty we have two kinds of comments.

• Simple commenting for ideas.
• WYSIWYG commenting for project. For WSIWYG, we need to implement Frola's text editor

We need to implement one comment component for this to take reference to distinguish which is referred to and impleted the commenting likewise.

Fix continuous deployment for Auth0

Steps to Reproduce:
For a PR, click on the develop preview, it'll open login page for the corresponding preview build, upon logging in you'll be redirected back to cynthesize-develop.netlify.com.

Explanation:
We currently have continuous deployment setup at netlify.com. For a PR, when a develop preview is built, we can't check it as the callback URL in evironment.ts is set to redirect at cynthesize-develop.netlify.com.

Expected Behaviour:
It should redirect back to the develop build. For more details regarding the probable fix, please visit Auth0 Documentation

Implement infinite scroll in idea feed.

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

Currently mat-pagination has been implemented on the idea feed. It would be better if infinite scroll is implemented.

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

Backup texts for no project or idea

On the users' profile page, if there is no project created by the user.

• If the user is visiting his/her profile:
  • It should display a button with text "Click to add project"
• If the user is visiting other's profile:
  • It should display "No projects created."

Same goes for ideas

Display user profile picture in navigation bar

The navigation bar should display the user's profile page on dropdown.

• Refer to details.component.html for use of profile picture. Currently we're also storing the user image link in the local storage. You should fetch the link/public id of the image and use that.

Refer to the screenshot for placement of image.

Changing font-family throughout the site

We're using Angular Material 2 for most of the UI components. The font-family is set to Gotham Light for all the elements. But this doesn't get applied on most of the places. We want to use 1. Gotham Light for headings and prime texts and 2. Open Sans for all other texts throughout the site, may it be button text, paragraph or texts on any other Angular material component.

Please take a look at this fix

Convert names to URLs

The title of projects and ideas cards should be links to them. This needs to be changed on idea-feed page and profile page.

Trim names of projects and ideas with spaces

The names of any project or any idea shouldn't be of type " name " or " name". Rather it should trim all the values of the extra spaces between words.

Use the following script:

var string = "   An awesome    Idea   ";
string.replace(/\s+/g,' ').trim();

>>> string
    "An awesome Idea";

Write GraphQL endpoint to fetch user contributions on profile page

On the Profile page, there are two tabs namely projects and ideas. These tabs should display the latest 6 ideas and projects created by the user.

Write a GraphQL query to fetch user contributions and make respective function in profile.service.ts

For clarifications and other help. Contact at the Gitter Channel

Set minimum character limit to ideas and project description

Do not allow submitting the idea or project if the description is less than fixed number of letters.

• For projects: Limit should be 150 characters.
• For ideas: Limit should be 50 characters.

Idea card on profile page extends beyond 50%

Describe the bug
The idea card has a property flex: 0 0 49% defined but it extends beyond it when text is too long.

To Reproduce

1. Add a new idea with similar text as this.
2. Go to profile page

Expected Behaviour

2 cards should be lined up in a row always.

Screenshots

Fix project stats

In the project stats part, following fixes are required:

• Watching should display the length of array or should display 0 if the returned field is null.

• Delete Mentors and Issues part.

• Checkpoints should display projectIssuessByprojectId.length

Text is cut-off from bottom in edit fields on profile page

To Reproduce

1. Go to profile page
2. Click on edit icon
3. Type something in any input field, characters with lower serif get cut off.

Screenshots

Project time and creator to be displayed only if they exist.

Expected Result (ER):

Project creation time and creator must be displayed only if they exist. Apply seperate conditions incase either of them is absent.

Actual Result (AR):

Created on by is displayed.

STR:

1. http://localhost:4200/project/8-Tweeter/view

Screenshots:

Bug in small screen idea feed navigation

Describe the bug
On small screen by clicking on Idea feed navigates to home.

Expected behavior
On clicking Idea feed should navigate to Ideas page

Screenshots

.

Untrack all vscode files and directories

Use datepicker for date of birth

On the profile page, it's better to use Material datepicker for taking date of birth.

Use local storage

Use local storage to store API responses for faster processing and saving lags caused to API calls,

Remove hard coded Collaborator in Project View

Expected Result (ER):

Collaborators are shown only when they exist. Otherwise display a text "Nothing to show." in the contributors card.

Actual Result (AR):

A blank collaborator is being displayed.

STR:

1. http://localhost:4200/project/8-Tweeter/view

Screenshots:

Design the Idea Feed

Idea Feed resides at the route /idea/feed. Currently it has pagination setup and fetches 5 ideas from the backend. Design the idea feed to display ideas in a proper view.

Page is being reloaded when we add a new issue.

Repeat the steps 1 & 2 of this issue and when step 2 is completed, the page reloads instead of fetching the latest data from the endpoints.

Expected behavior
The page should not reload in a Single Page Application.

This is present in two places in the codebase

• issue.component.ts
• details.component.ts

Add feature to delete idea.

This could be completed in two parts:

• Write mutation to delete a row from the ideas table.

• Use the mutation to delete an idea.

Add Idea page is not responsive

Describe the bug
On resizing the window, add idea page does not resize and the scroll bar also doesn't allows to view the entire modal.

Expected behavior
On changing the screen size the page should resize accordingly to aid users.

Screenshots

Black bottom border appears on hovering add idea/add project

Not able to add comments on existing issues

Description : I am working on another issue, and to test the issue I have to add new comments. But I could only type in the comment but no buttons or scroll bar to add the comment.

Browser :Chrome
Steps to reproduce the issue

1. Go on to the user profile page by clicking on the top right hand corner user icon.
2. Click on one of the existing projects on the profile (which has checkpoints or you can create these by using "Add Issue").
3. On the Left hand side click on one of the checkpoints.
4. On the main panel click on the comment icon.

Add issue component's width increases as we enter more text.

Design the Issue component for project dashboard.

Add loader at appropriate places

We need material spinners at different places around the site. For eg: when a component is being loaded or a service is being waited for.

Add the following code to add spinner:
<div class="loader" *ngIf="!isPageLoaded"><mat-spinner></mat-spinner></div>
and declare the variable isPageLoaded=false in the respective component.ts file. This variable will be changed to true once the response is complete.

Look at the file details.component.ts and details.component.html for an example.

Bug in add project form.

Describe the bug
A user can jump to second add-project form field even without filling previous ones.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'http://localhost:4200/project/add'
2. Click on any stepper 1, 2, 3, 4

Expected behavior

A user shouldn't be able to go to the next form field if he hasn't filled the previous one.

Additional context
Try to disable the next steppers based on the length of form fields of previous one. Suggest some better solutions if you can.

Try reading about Angular Material Steppers for reference.

Fix like button

Like button should have color and other properties set so that for a User it displays correctly.

Adding collaborators on a projects

PR #54

Design Add Project Page

Implement Popular and Latest sorting in Idea Feed.

The search filters are just plain text currently. Implement popular (sort by upvotes) and latest (sort by date descending) in idea feed.

Add slideshow on the home page

Add a slideshow on the route /home, i.e. in the home.component.html which displays 3-4 images and changes after a fixed interval automatically.

Add a minimal loader to Idea Feed until ideas load

Please discuss the loader design that will be implemented.

Add social links to user profile

At the users' profile page, add a dropdown to select the social platform and the URL to that platform. For example, the user wants to add github, facebook and twitter. The user would select from the dropdown which link to choose and in the corresponding text field, the user will add the link. The object that'll be sent as would be,

	{
		"github": "https://github.com/Cynthesize",
		"facebook": "https://facebook.com/cynthesizetech",
		"twitter": "https://twitter.com/cynthesizetech"
	}

This could be done in two parts:

• Create mutation for the request that'll be used.

• Implement dropdown and input field.

Dropdown to be used: https://material.angular.io/components/select/overview

Complete topic page

Fetch data from profile URL and use it to complete the profile page as developed in PR #35
The backend URL is /api/user/view/<username> whereas on the frontend the URL is at /users/<user-id>

• Change userid in the frontend to username and get that username from URL to maki API call.
• Fetch data from backend and embed the data with proper conditions on the page

Make different pull requests for this.

Rmove additional padding around comments and replies

In reference to te picture attached below, remove the additional padding around div and make the comment section more compact

Use Project name as well in the URL

Currently any project can be viewed as /view/project/<project-id>. This should not be the case. The project name should be /view/project/<project-id>-<project-name>.

Eg: The URL for the Cynthesize project is currently /view/project/191, it should be /view/project/191-Cynthesize.

This needs to be completed in two parts:

• Modifying query to match for project name as well.

• Modifying API call.

Fix Project URL for multiple words

Describe the bug
When the project name is added with spaces, then the project URL generated contains %20 in between the URLs.

To Reproduce
Steps to reproduce the behavior:

1. Go to /project/add.
2. Type a project name like An awesome app
3. Submit the project.

Expected behavior
The project URL generated should be something like 5-An-awesome-app, rather it gets redirected to 5-An%20awesome%20app and the API call is done for the same.

Add watch-project button on project view page.

Describe the solution you'd like
Add buttons to watch a project beside and similar to the add Issue button.

Just adding a button for now will do the job. Functionality will be implemented later.

Make project dashboard page responsive

This is a big feature so kindly discuss your implementation before starting to work on this issue.

Modify header

Change header design and it's compatibilty.

Profile Idea cards requires linkage

It redirects to home on click

Change URL for checkpoints

Steps to reproduce:

• Open any projects page.
• Open/Add any checkpoint from the left navbar.
• Notice that the route doesn't change

Expected Behaviour:
The URL for different checkpoints should change. For example: when we open "Design" checkpoint (say), The URL should something like /view/project/191-Cynthesize/Design.

Current Behaviour:
The URL remains the same /view/project/191-Cynthesize

Help for solving the issue:
You may see this video for better understanding of Angular routing and solving this issue.

Navbar URL fixes

These are the list of fixes that are required in the Navbar

• The idea button should link to /idea/feed as it does, it should have a plus icon that should link to /idea/add page.

• The Project button should link /project/feed.

• The Project button should have a plus icon that sould link to /project/add.

• Remove My Projects and About section

• Add "Add" text aside the plus icon on the navbar.

Redirect upon idea submission

Currently, when an idea is submitted, it doesn't redirect anywhere. It should redirect to ideas feed page uponn successful addition i.e. /view/feed/ideas.

Upvote on comments

Describe the bug
I. Upvote on new comment does not work or show anything.
II. Upvote on existing comments toggles the values 1,0 or 1,2

To Reproduce
Steps to reproduce the behavior:

1. Click on profile.
2. Click on a project.
3. On the Left hand side menu scroll down to checkpoints.
4. Click on one of the checkpoints
5. Add a new comment and click Upvote (for part I)
6. Click Upvote for existing comments (for Part II)

Expected behavior
Upvote should increase the comment votes starting at 1 and increasing on wards.

Desktop (please complete the following information):

• OS: Windows 10
• Browser chrome, Edge