kristianweb / fakebooker-frontend Goto Github PK

The About.jsx component located in ProfilePage.jsx should display user's personal data in a way similar to how facebook does it. However we've decided that we shouldn't ask for sensitive data at the login (Full name, birthday, etc..) so we will refactor the About.jsx component and it should look like this:

The button will prompt to a form component which would be targeted to sensitive data. The form component will be addressed in other issue.
Don't delete the previous About.jsx component since the data is going to be filled the same way just keep it for reference and pull in a part from it when needed.

You can work on this feature by creating and using a branch called feature/update-about.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Describe the bug
When a guest tries to hit other user's profile page ( for example /profile/kristian ) an error is thrown from the getPosts function. It is thrown because getPosts fetches current authenticated user's post, it should be able to use :username param from the url for a second option. We don't have to be logged in to see other people's profiles.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://side-kick-app.herokuapp.com/
2. Make sure you aren't logged in ( clear local and sessionStorage )
3. Go to https://side-kick-app.herokuapp.com/profile/kristian
4. An antd box with message Error should appear on your screen.

Expected behavior
Guest should be able to see other user's profiles without logging in.

You can work on this bug by creating and using a branch called fix/get-posts

Is your feature request related to a problem? Please describe.
We need to migrate the loadUser function located in actions/auth.js.

Describe the solution you'd like
Connect the login function with the graphql backend:
Apollo docs
Youtube Tutorial
Detailed blog about using Apollo Client together with Redux

You will work on this feature by creating and using a branch called feature/loaduser-frontend-implementation

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
When the user adds a new post it doesn't update posts redux state so you have to refresh to get the new post. Update redux create post action so it shows the newly added post after adding it to DB.

You can work on this feature by creating and using a branch called fix/show-new-post

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

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.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

What is this?

• Feature - use branch named feature/profile-page to finish this feature.

Explain in detail if needed:

Create a new component under components folder and name it Profile. Use react-router to route to this component when the route is /profile. Don't worry about authorization or other aspects. Just create an empty component that just display a header saying Profile works

What is this?

• Feature - use branch named feature/landing-page to finish this feature.

Explain in detail if needed:

Create the theme (i.e., only html and css) for the landing page. Follow the image below and add your own take on it if needed, since wireframes haven't been decided yet. The key takeaway is the two column layout as shown below.

You can also check Material UI website for similar inspiration.

For mobile, use this as an inspiration.

Functionality to be followed in next issue.

Is your feature request related to a problem? Please describe.
We need to implement deleting posts functionality. We already have that setup on the backend we just have to wire that up with the frontend.

You can work on this feature by creating and using a branch called feature/post-delete

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
Design a comment component that's going to be used whenever a post has comments or you want to comment a particular post ( or posts ).

Describe the solution you'd like
The comment should contain a simple body for a starting point and an action button.
Start off by designing for mobile-first since there's less overhead when designing for mobile. Design for 3 layouts: 375px Mobile, 768px Tablet, 1920px Desktop.

For design tools and you can use Adobe XD or Figma, make sure you are using Roboto Font and a consistent spacing system ( 4px -> 8px -> 12 -> 16 and so on ). The design should be similar and should be fitting in our profile page

Helpers
For resources you can use this:
1. ( This screenshot is taken from olympus design )

2.

3. You can use Facebook's way of doing it ( preferred as it is tested and it works )

If you are using Figma please do provide a shared document so we can give you feedback as soon as possible. Adobe XD also provides that but I don't know how it works yet so we would have to discuss that as well!

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
For now to get the current user we have to make a query which first checks the local cache and if there's no user in there it would make a request to the server which is not needed because we can save the user into cache and then read ONLY from it. For now the local state management is magical => you don't know if you have something in there or not.

You should work on this issue after you've implemented #111

You can work on this feature by creating and using a branch called feature/refactor-user

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
We need to visualize likes on our posts and implement likeability ( liking and unliking )

You should work on this issue once backend liking system issue is implemented

Describe the solution you'd like
Use this whole tutorial for reference on how to implement likeability. Just make sure you adjust that code and use it in our app ( don't straight copy/paste please! )

You can work on this feature by creating and using a branch called feature/likes-integration

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
We need to implement the Profile Posts UI. Make sure its responsive on all resolutions.

Post UI Design

Describe the solution you'd like
1. Create Post, Like, Comment, Share, PostSettings components in src/app/components/ProfilePage/components . The components should serve as placeholders at first point since the backend logic is not implemented yet.

2. Code the UI components using React ( Functional Components in pair with Hooks ) and styled components. The components should look like the design referenced above.

3. Make sure all the components are reusable and completely isolated from each other.

You can work on this feature using a branch called feature/post-integration.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. yarn test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
We decided to use styled-components for the styling of elements but there are still some CSS files

Describe the solution you'd like
Convert the component's CSS files to this schema ( component.styles.js )
Then, convert all the CSS classes to their styled-component equivalent and integrate them into the component.
Keep the App.css file and delete the index.css file, because we don't need 2 global CSS files
(note: we still need 1 global CSS file for setting default styles (Ex: font-family, font-size, etc) )

Describe alternatives you've considered
You can propose a different schema for the styled-components files.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
We need to implement the Profile Header which consists of different React UI components. Make sure its responsive on all resolutions.

ProfileHeader Design

Describe the solution you'd like
1. Create ProfileHeader, SendRequest, DirectMessage, Settings components in src/app/components/ProfilePage/components . The components should serve as placeholders at first point since the backend logic is not implemented yet.

2. Code the UI components using React ( Functional Components in pair with Hooks ) and styled components. The component should look like the design referenced above.

3. Make sure all the components are reusable and completely isolated from each other.

You can work on this feature using a branch called feature/profileHeader-integration.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. yarn test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
As it stands there's no validation for the password input on the registration form.
You can enter "1" for a password and that would be considered valid.
Short passwords are a security risk because they are easier to brute force.

Describe the solution you'd like
If the password is too small (Ex: less than 6 characters) then a message should appear saying so.

Describe alternatives you've considered
You could also have more validation like:

• Must have one capital letter
• Must have one number

You don't have to use all or any of these but there are just some examples, but there has to be a balance between security and convenience. No likes going through multiple hoops just a make a password.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
As you already know we are utilizing Apollo Cache for our local state management. The problem is the way we store/retrieve data is kinda weird and magical so we are gonna make that process easier by implementing some custom methods that are redux likely and more people will understand whats going on.

Describe the solution you'd like
Use this article and Apollo docs to refactor our current apollo cache setup into something more understandable.

You can work on this feature by creating and using a branch called feature/refactor-local-state

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
For now the auth is working, except there are few things that are yet to be implemented:

• Error handling in catch
• Deleting old context structure (Do it only when other points are ticked out, the old context structure should stay for now as a reference)
• Remembering the user - storing the data in session storage or storing the data in local storage if user ticks out "remember me" option on UI.
• Message display on both unsuccessful and successful response
• Front end input validation
• Lint fixes

When you're done with one of the features tick them out like so:

feature

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Describe the bug
When using storybook our custom styles aren't overriding antd ones. We need to find a way of importing antd using in-demand importing just how it is in our production app.

You can work on this bug by creating and using a branch called bug/fix-antd-storybook

Describe the bug
Change the travis.yml so that once the lint, build steps are done, the frontend react app should be deployed to heroku. Use your personal account, but add the api key as environment variable.

Note: I tried for travis.com, not travis.org. Lets stick with travis.com as I believe travis.org is old and will/should be deprecated in the future according to stackoverflow

Steps:
Here is what I've tried and it may help you.

1. Check travis tutorial
2. Do heroku login in your CLI.
3. You might have to run travis encrypt $(heroku auth:token) --add deploy.api_key --pro
4. Now you will see that the above command has added an api token in .travis.yml file. Copy this and add it as env variable(with heroku_token as the key and token as the value) in travis.com website for frontend repo. And in .travis.yml file replace the token with something like $heroku_token. You can learn more about env variables https://docs.travis-ci.com/user/environment-variables/

Is your feature request related to a problem? Please describe.
We need to implement the notification system design for our app.

Note: Once Issue #113 is closed, only then should you work on this issue.

Describe the solution you'd like
Implement the design component using ReactJS, styled-components and AntD in an isolated environment called Storybook. After you implement all states in storybook then you will connect the components to the backend. For this workflow use the comment system as reference or ask @KristianWEB for further investigation on it.

You can work on this feature using a branch called feature/notification-system.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
We need to create a folder and file for Gallery component.

Describe the solution you'd like

1. Create a new folder inside components folder and call it Gallery
2. Inside this folder, create a file called Gallery.jsx which is a React component.
3. Make sure that this react component is a functional component and render this <h1>Gallery works</h1>

You can work on this feature using a branch called feature/gallery-component.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
We've decided to remove redux so that issue is related to dropping it and using Apollo cache or Context for global state management whenever we need.

You can work on this feature by creating and using a branch called feature/drop-redux

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. yarn run lint doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
Design a notification system component that's gonna be used for displaying our posts notifications at first point.

For design tools and you can use Figma, make sure you are using our main color, Roboto Font and a consistent spacing system ( 4px -> 8px -> 12 -> 16 and so on ). The design should be similar and should be fitting in our profile page

Helpers
Use these examples to design it:

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
For our Posts frontend implementation we're starting off with migrating displaying posts functionality located in actions/post.js.

Describe the solution you'd like
Use this whole tutorial for reference on how to migrate getting posts functionality. Just make sure you adjust that code and use it in our app ( don't straight copy/paste please! ). You will also update the Post model so it contains all the child models instead of just storing their id's ( Comments, likes, users ).

You will work on this feature by creating and using a branch called feature/posts-graphql-implementation

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. yarn run lint doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
We need to implement comment component UI for our app.

Note: Once Issue #103 is closed, only then should you work on this issue.

Describe the solution you'd like
1. Create an Comment.jsx component that should be located in src/app/components/profilepage/components/. *
2. Create an Comment.styles.js component ( note that we are using styled-components ) and make sure you are implementing the design using mobile-first approach ( mobile and up to desktop ) so we can prevent a lot of boilerplate css code and save us from media queries headaches.

You can work on this feature using a branch called feature/comment-component.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
The Landing Page has 2 forms. Each has its own separate state and submit functions.
The Separation of concerns principle tells us that these form should be in there own component/file.

Describe the solution you'd like
Create a component called LoginForm and put it in its own file. It will contain all the state and logic of the login form. Do the same for the registration form but called it RegistrationForm.

Both components must share the same isPending state. You can have the LandingPage component have the pending state and give the forms props that allow them to read/set it or you can use the Context API.

Either way, there should be NO VISUAL DIFFERENCE between the old and the new landing page.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

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

We currently have a mocked-up Navbar React component but we need to redesign it according to olympus design and implement the new design. The Navbar Component should be fully responsive using the mobile-first approach and the minimum mobile resolution for responsiveness should be > 320-365px

Describe the solution you'd like
In this issue, you are supposed to write html, css code for Navbar component. This component is in components/Navbar/Navbar.jsx. For css, you can use styled-components and then import them into Navbar.jsx. Use ant-design wherever possible.

Helpers
Use the below UI Design ( Dev's logo is being used as we don't have one for the app ):
365px ( Iphone XR/XS ) : 715px

765px : 1000px

1000px+

There are still elements from this component that have to be improved but this is a good foundation.

The Navbar component is tight coupled with the Sidebar ( the pages navigation sit in there ) Here's the design:

Tho this Sidebar is going to be discussed on other issue, just to let you know that those two components work together.

You can work on this feature using a branch called feature/navbar-component.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. yarn test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
We need to update the register UI Component with the new fields so the it will include the following inputs: username?, fullName, email, password, confirmPassword, dateOfBirth, gender

Describe the solution you'd like

1. In /components/LandingPage folder, we already have RegisterForm.js file
2. Add more input fields to the component and make sure you are using mobile-first approach in pair with antd and styled-components.

You can work on this feature using a branch called feature/register-component-update.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. yarn test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
We're starting off with the posting, for most part back-end is set-up and now we must focus on implementing it within front-end repo. For starters you should create:

• A reducer named post and connect it to redux.
• An action file named post.
• Two types: ADD_POST(will be dispatched in try part of action) and POST_ERROR(will be dispatched in catch part of action).
• Posting directory where all of the post components should be held src-->app-->components-->ProfilePage-->components-->Posting
• Parent component named post.jsx, which is already has it's static holder in "CreatePost" component.
• The post component should have an addPost action that's simply adding the post to our DB. The base URI for posting is: https://osd-sidekick.herokuapp.com/api/posts, to create a post you must send a POST request to our back end via above URI with appropriate headers.
  These headers are:
• Authorization with jwt token that's stored in local or session storage based what user choosed.
• Content-Type of application/json
  For the request body you should only send the content document query.
  The content value is what user inputs in post form if you don't know how to read and store strings from input you should look into auth component where login and password fields were and how they worked (this must be a component level state).
  To validate whether data was successfully store in db you must check the cluster on our remote mongoDB, if you're not yet added there ask any of the active contributors to send you an invite.

Describe the solution you'd like
For now your component should only store data in db after clicking the publish button, you're not required to display the newly added post yet.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
We need a new folder and a new file before working on actual Navbar theme.

Describe the solution you'd like

1. Create a new folder inside components folder and call it Navbar
2. Inside this folder, create a file called Navbar.jsx which is a React component.
3. Make sure that this react component is a functional component and render this <h1>Navbar works</h1>

You can work on this feature using a branch called feature/navbar-component.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
We need refactor our folder structure because we have reusable components and they are located in the wrong place.

Resource 1
Resource 2
Resource 3
Resource 4

You can work on this feature by creating and using a branch called feature/refactor-folder-structure

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Design a detailed personal form for the user to show up as a modal if he wants to show more personal data about himself if he clickes on action button located in the about component:

The form should contain the following inputs: Personal Quotes, About Me, Location, Social Status, Date of Birth and Relationship. Use for reference the detailed version of the About component.

For design tools and you can use Adobe XD or Figma, make sure you are using Roboto Font and a consistent spacing system ( 4px -> 8px -> 12 -> 16 and so on ). The design should be similar and should be fitting in our profile page so for reference:

You can also research on the web for form ideas on dribbble, awwwards and other design websites.

Describe the solution you'd like
Start off by designing for mobile-first since there's less overhead when designing for mobile. Design for 3 layouts: 375px Mobile, 768px Tablet, 1920px Desktop.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
Github Actions came out soon and they are a good replace for my current TravisCI and ChromaticQA ( visual testing ) configuration.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
Design an About component that's gonna be used for showing our users' personal info.

Helpers

All the helpers for now are going to be in Bulgarian since I don't have the design myself and I'm getting it from third-party resources.

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

We currently have an About Component design made by me and we will need to implement it on the profile page. I haven't thought of responsive measurements for now the content inside will be responsive but the actual location of the component when viewed at smaller resolutions is not decided yet. I will update the issue when we do.

Design:

Component location:

Implementation
In this issue, you are supposed to write html, css code for the About component. Make a new folder and component in components/. For css, you can use styled-components and then import them into About.jsx. Use ant-design wherever possible.

You can work on this feature using a branch called feature/about-component.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. yarn test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
We will be working on adding actual functionality to our login/register page and for that we need context.

Describe the solution you'd like
Inside context directory create folder called auth that will follow naming & structural convention from featureContext folder. Initial state should consist of object with fields named isAuthenticated: set to false by default and token which will be retrieved from local storage. We will need two functions, one named: register and other one called login. Register should hit our back-end endpoint and retrive response data. Response will return either true or false status that should be stored in state. The same goes for login although it will return token that should also be stored inside local storage.

Edit:
We will also need new directory inside context called utils. This new directory should have a file called setAuthToken inside it a function called setAuthToken will be used to set global header with token retrieved from previous requests. This is so that we can constantly check whether user is authenticated or not.

Edit no. 2
Zihad will also style 404 page in the same PR.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
For now we can create posts and persist them in DB but we don't display them in the ProfilePage. We have to implement that feature using Post.jsx as a single element in a component wrapper for example PostList.jsx or Posts.jsx.

Describe the solution you'd like
Create a new component wrapper which would GET the posts for the current authenticated user from DB and then loop the data and pass it to the Post.jsx component ( for example Posts.jsx or PostList.jsx ).
Also you have to change the way Post.jsx gets the data since for now all values in there are placeholders.

You can work on this feature by creating and using a branch called feature/get-posts.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. yarn test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
We need to migrate login function located in actions/auth.js.

Describe the solution you'd like
Connect the login function with the graphql backend:
Apollo docs
Youtube Tutorial
Detailed blog about using Apollo Client together with Redux

You will work on this feature by creating and using a branch called feature/login-frontend-implementation

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
Design a Profile Header component that's gonna be used for showing our users on the app.

Helpers

Is your feature request related to a problem? Please describe.
We will start working on routing in this project, for that we need protected and basic routes.

Describe the solution you'd like
Create a routing folder inside components directory with PrivateRoute.jsx component and Routes.jsx component. You should be able to essentialy replace <Route/> declaration with <PrivateRoute /> component that you've created before and have it redirect you to appropriate component based on whether you're authenticated or not. For now use component level state that will hold two values: authenticated: and loading: both of them set to false by default.

Describe alternatives you've considered
We might want to wait for profile routes to be set-up first.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
We need to implement detailed form UI for our app.

Note: Once Issue #91 is closed, only then should you work on this issue.

Describe the solution you'd like
1. Create an PersonalForm.jsx component. DON'T delete the previous About Component and use it for reference.
2. Create an PersonalForm.styles.js component ( note that we are using styled-components ) and make sure you are coding the component in an isolated environment called storybook.

You can work on this feature using a branch called feature/about-component.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

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

We currently have an Last Photos Component design taken from the html olympus template and modified a bit from me. I haven't thought of responsive measurements for now the content inside will be responsive but the actual location of the component when viewed at smaller resolutions is not decided yet. I will update the issue when we do.

Design:

Component location(at the right of the Post Component, below the ProfileHeader Component):

Implementation
In this issue, you are supposed to write html, css code for the Last Photos component. Make a new folder and component in components/. For css, you can use styled-components and then import them into LastPhotos.jsx. Use ant-design wherever possible.

You can work on this feature using a branch called feature/lastphotos-component.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. yarn test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
For our Posts frontend implementation we're starting off with migrating displaying posts functionality located in actions/post.js.

Describe the solution you'd like
Use this whole tutorial for reference on how to migrate creating posts functionality. Just make sure you adjust that code and use it in our app ( don't straight copy/paste please! )

You will work on this feature by creating and using a branch called feature/posts-graphql-implementation

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. yarn run lint doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
I'm going to redesign and recode the frontend so it looks almost identical to the new Facebook design. Design a Navbar UI component that's gonna be used for navigating our users through our app.

Helpers

Navbar state when the user clicks on someone's profile:

I'll use the existing logo for facebook's one for now. I'll design a new one soon.

Is your feature request related to a problem? Please describe.
We need to implement the Create Post UI and for now it has a basic usage which is needed for the Post REST API and when we implement it I will make a new issue which will extend this component's functionality. Make sure its responsive on all resolutions.

Create Post UI Design

Desktop UI Design

Mobile UI Design

Describe the solution you'd like
1. Create CreatePost component in src/app/components/ProfilePage/components.

2. Code the UI components using React ( Functional Components in pair with Hooks ) and styled components. The components should look like the design referenced above.

You can work on this feature using a branch called feature/createpost-component.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. yarn test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Describe the bug
When user enters their credentials on login or register page, they shouldn't have to press the button with mouse to login or register. They should be able to do so by directly hitting the enter key or return key on their keyboard.

Possible Solution
You might have to look into onkeydown and see if the key pressed is the enter key.

Additional Notes
Use a branch called bug/enter-submit or something to work on this issue.

Is your feature request related to a problem? Please describe.
For our authentication layer we're starting off with migrating register function located in actions/auth.js.

Describe the solution you'd like
Connect the register function with the graphql backend:
Apollo docs
Youtube Tutorial
Detailed blog about using Apollo Client together with Redux

You will work on this feature by creating and using a branch called feature/register-frontend-implementation

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
Note: Once Issue #84 is closed, only then should you work on this issue.

We need to update the onSubmitRegister function with the new fields so the it will include the following properties username?, fullName, email, password, confirmPassword, dateOfBirth, gender and also update the register redux actions.

Describe the solution you'd like

1. In /components/LandingPage folder, we already have RegisterForm.js file
2. Add more properties to signUpState and update register function accordingly.

Keep in mind that this code is just for reference how the user is being stored, do not straight copy/paste

// RegisterForm.jsx
  const [signUpState, setSignUpState] = useState({
    username: "",
    email: "", 
    fullName: "",
    password: "",
    confirmPassword: "",
    dateOfBirth: "",
    gender: ""
  });

register({ username, email, fullName, password, dateOfBirth, gender });

// actions/auth.js
export const register = ({
  username,
  email,
  fullName,
  password,
  dateOfBirth,
  gender
}) => async dispatch => {
  const config = {
    headers: {
      "Content-Type": "application/json"
    }
  };

  const body = JSON.stringify({ username, email, fullName, password, dateOfBirth, gender });

We also need to implement validation for the the new fields . Make it simple, no need to make things complex at this current stage.

You can work on this feature using a branch called feature/register-component-update.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. yarn test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Is your feature request related to a problem? Please describe.
Note: Once Issue #28 is closed, only then should you work on this issue.

We need to make Gallery UI. Don't worry about making it mobile responsive. But make sure that its responsive on all desktop or tablet resolutions.

Describe the solution you'd like
In this issue, you are supposed to write html, css code for Gallery component. This component is in components/Gallery/Gallery.jsx. For css, you can add another file in this path components/Gallery/Gallery.css and then import it in Gallery.jsx. Use ant-design wherever possible.

Helpers
Use the below UI template for inspiration. However if you have a better template, please do bring it up in discussion on our discord channel.

https://html.crumina.net/html-olympus/07-ProfilePage-Photos.html

The gallery component is marked in rectangle as shown in the below image. Only code this part, don't worry about entire profile page. You can use stock/sample photos where ever necessary.

You can work on this feature using a branch called feature/gallery-component.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

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

Note: Once Issue #26 is closed, only then should you work on this issue.

We need to make Navbar UI for desktops. Don't worry about making it mobile responsive. But make sure that its responsive on all desktop or ipad resolutions.

Describe the solution you'd like
In this issue, you are supposed to write html, css code for Navbar component. This component is in components/Navbar/Navbar.jsx. For css, you can add another file in this path components/Navbar/Navbar.css and then import it in Navbar.jsx. Use ant-design wherever possible.

Helpers
Use the below UI template for inspiration. However if you have a better template, please do bring it up in discussion on our discord channel.

https://html.crumina.net/html-olympus/02-ProfilePage.html

The Navbar is at the top of the above webpage.

You can work on this feature using a branch called feature/navbar-component.

Pull Request Squashing

Please, go through these steps before you submit a PR.

1. Make sure that your PR is not a duplicate.
2. If not, then make sure that:

2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the fix/ or feature/ prefixes. Good examples are: fix/signin-issue or feature/issue-templates.

2.2. You have a descriptive commit message with a short title (first line).

2.3. You have only one commit (if not, squash them into one commit).

2.4. npm test doesn't throw any error. If it does, fix them first and amend your commit (git commit --amend).

3. After these steps, you're ready to open a pull request.

3.1. Give a descriptive title to your PR.

3.2. Provide a description of your changes.

3.3. Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Describe the bug
In the landing page, once someone has registered, their credentials are still in input boxes. We need to clear that state. Also when someone has registered, we should not only show a message saying Registration successful(which we are doing now), but should also point them to login tab.

Screenshots
Here is the screenshot. Look at the top, it says registration successful, but the credentials with which I have registered are still in the input boxes.

Summary

1. Clear the state once someone has registered successfully.
2. Show the message saying that they have registered successfully(which we are already doing, so don't remove this)
3. Now point them to login tab.