iraq-rbc-capstones-2021 / capstone-react-jobie Goto Github PK

Most components required to do this page is already done, waiting for the job table that should be merged today, let's implement the home page. Remember to use the Section component for the header, and navbar and footer aren't needed

https://www.figma.com/file/mSkq4oU6rdiiUcJxGauixk/Jobie?node-id=1%3A2

it shouldn't contain navbar and footer. The header is already available as a component

It should take a job object as prop, and render it like this

takes a company object

https://www.figma.com/file/mSkq4oU6rdiiUcJxGauixk/Jobie?node-id=182%3A1582

Routes:
Home -> /
About -> /about
Roadmaps -> /roadmaps
Jobs -> /jobs
Contact -> /contact
Search -> Expands a search bar with autocomplete, and on submit navigates to /search/[query]
Login -> /login

Add links to the account dropdown and use the current user to display profile data and prefill account edit page.

this is of low priority and can be done when everything else is done.

Figma

The navbar, and footer are already added into the layout component, just implement what's in between

You need to create a user slice inside redux with the required data. When a user registers, you dispatch the username & password, then create a user profile in firebase, then commit a user object to redux. When the user isn't logged in, the slice initial state should be user: null

Additionally, the user slice needs to also hold if the user isCompany so upon registration, you need to check if it is a company registration or a user registration, and add that to the firestore profile collection.

This action when dispatched uses firebase auth to create the user, but also, uses firestore to populate a company or user profile.

All profiles go to profiles collection, even if their schema is different. However, companies need to have isCompany = true in its schema

this is no code issue. We need to seed the database with mock jobs to start linking the pages to the database. You can create a json file for 10 jobs, and I will add them to the database.

accent: #EC7063
dark: #34495E
light: #E7ECF2
primary: #072451
secondary: #154360

These are extracted from the Figma file. You would stick to these colors only plus gray-200 for highlighting, and white when necessary.

Also, please make sure to onboard your peers on how to use these when they work on their components.

it needs to be a modal in the navbar that displays the login pop up on any page. We also need to check if the user doesn't have a profile, to show a complete your profile action in the navbar to direct them towards the edit profile page.

change footer.js to Footer.js and apply the same to all other components. Pages should be kept lowercase because they identify route information.

To rename files on windows, use the git mv command so git would update its index for case-sensitive renaming as follows:

first cd components
then git mv footer.js Footer.js then do the same for all other files

finally, update the imports of these components, commit your changes and push.

use i18n-next library to introduce translation to the whole app.

make the road map page use the header that's already created and the component that is made for the logos

Takes a job-seeker or user profile object and renders it as follows

It needs to accept a dark=true prop to render a dark header on home page, otherwise it should be light. It needs to accept a picture as a prop, a title, and description.

It should also correctly render children as the action item when needed

it should contain the filters on top, without the latest jobs heading

create the components and put them inside a separate folder in components, as the image indicates there should be 3 components

It should take a summary object and renders the following

This issue has low priority. The action needs to send an email to the company using firebase emailing services.

This action will create a job, add it to the firebase jobs collection, and then add it to the store. It should only be possible for companies to post jobs.

Create a component with proper width and height that receives proper props and renders the following

Create a firebase project, and link it to the app using firebase.js file, then export authentication and database to be used later in either redux, or a custom hook.

Additionally, please configure the store with firebase as seen in this video with few adjustments:

1. You won't have createStore function, instead since we are using Redux-Toolkit, you have a function called configureStore
2. In order to add the extra arguments for thunk middleware with configureStore check out this document
3. To pass the enhancers to redux-toolkit store, please read the documentation for configurStore
4. In the video, you have the thunk created with extra arguments coming with dispatch. In Redux toolkit, it is slightly different. You can refer to this line of code for example, this callback function is called payloadCreator, next to the argument amount you can have another argument called thunkAPI that comes last. Inside of it there is a property called extra which contains the extra arguments that are passed to configureStore in step 1. Will allow you to access firebase.

You need to attach it to user's slice in the store with actions to update the profile.

it can follow after the pages are done by @bnar98 . I would suggest @Ge6ben to take the edit company page. While Bnar can take the edit user page once she finished implementing it part of issue #59

@zahrayh if you can offer your help and support on this as well. Thank you

Create custom hooks for isLoggedIn and isCompany to prevent users to access certain pages. Also prevent users to access the "Proposals" tab in single job page. In addition company profile should not be able to apply button but instead either "View" for home table or "Edit" if this is their job.

when a user search for a job in the navbar, they will be directed to /search/[keyword] so a dynamic page is needed that takes the keyword and render suggestions. As for filters, let's just add them visually without functionality for now

https://www.figma.com/file/mSkq4oU6rdiiUcJxGauixk/Jobie?node-id=1%3A6

it should take a testimonial item, and renders it as follows:

You can take inspiration from the Job Create page. These pages are in one issue because they mostly are similiar.

User:
https://www.figma.com/file/mSkq4oU6rdiiUcJxGauixk/Jobie?node-id=165%3A1377

Company:
https://www.figma.com/file/mSkq4oU6rdiiUcJxGauixk/Jobie?node-id=183%3A1967

Remember to use a user object.

https://www.figma.com/file/mSkq4oU6rdiiUcJxGauixk/Jobie?node-id=1%3A4

when building next app, build fails due to test files inside /pages, to fix it, we need to move .spec.js files outside /pages

$ next build

16:29:56.624 | > Build error occurred
16:29:56.626 | ReferenceError: describe is not defined
16:29:56.627 | at Module.4565 (/vercel/path0/.next/server/pages/index.spec.js:27:1)
16:29:56.627 | at __webpack_require__ (/vercel/path0/.next/server/webpack-runtime.js:25:43)
16:29:56.627 | at __webpack_exec__ (/vercel/path0/.next/server/pages/index.spec.js:164:39)
16:29:56.627 | at /vercel/path0/.next/server/pages/index.spec.js:165:69
16:29:56.627 | at Function.__webpack_require__.X (/vercel/path0/.next/server/webpack-runtime.js:108:21)
16:29:56.628 | at /vercel/path0/.next/server/pages/index.spec.js:165:47
16:29:56.628 | at Object.<anonymous> (/vercel/path0/.next/server/pages/index.spec.js:168:3)
16:29:56.628 | at Module._compile (internal/modules/cjs/loader.js:1085:14)
16:29:56.628 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
16:29:56.629 | at Module.load (internal/modules/cjs/loader.js:950:32) {
16:29:56.629 | type: 'ReferenceError'
16:29:56.629 | }
16:29:56.683 | error Command failed with exit code 1.
16:29:56.683 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
16:29:56.700 | Error: Command "yarn run build" exited with 1

Display all jobs sorted by date desc if possible and with pagination

use issue #69 redux slice. You need to create the payload creator to login a user or company then dispatches to the store. No need to create the slice, only the action, and action creator.

construct a job object to render it in this page using the components already created for the header, summary and listing

https://www.figma.com/file/mSkq4oU6rdiiUcJxGauixk/Jobie?node-id=9%3A3

This is to Clean up the index.js file so we can use it for testing until we set up the routing and adding the images we use in the website

It shouldn't contain the navbar and footer, those can be added into a layout component that wraps the whole app. Just what's in between

While this is a page, we will implement a layout that takes the navbar and footer, then renders children inside a <main> tag.

So, your page shouldn't include the navbar and footer, but still a page. The filename should be contact.js so the route /contact works

get the jobs from state and filter based on id in url path

create the about us page using the proper components

Although here it shows multiple irrelevent link placeholders, preferably decide on which links to include, even if it doesn't go anywhere

like: privacy policy, terms of agreement, etc..

The year for the copyright statement needs to be dynamic by reading current year from new Date()

Company Header:

• reduce size of image
• correct colors
• set consistent width

Job Listing

• fix the display and width
• display image or first letter in case image is not provided

it shouldn't contain navbar and footer, only what's in between

takes a company profile object and renders it as follows