iraq-rbc-capstones-2021 / capstone-react-jobie Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://rbc-jobie.netlify.app
Home Page: https://rbc-jobie.netlify.app
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.
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.
this is of low priority and can be done when everything else is done.
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.
get the jobs from state and filter based on id in url path
Remember to use a user object.
https://www.figma.com/file/mSkq4oU6rdiiUcJxGauixk/Jobie?node-id=1%3A4
Add links to the account dropdown and use the current user to display profile data and prefill account edit page.
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
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
Company Header:
Job Listing
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:
createStore
function, instead since we are using Redux-Toolkit, you have a function called configureStore
thunk
middleware with configureStore
check out this documentconfigurStore
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.takes a company object
https://www.figma.com/file/mSkq4oU6rdiiUcJxGauixk/Jobie?node-id=182%3A1582
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 issue has low priority. The action needs to send an email to the company using firebase emailing services.
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
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
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.
The navbar, and footer are already added into the layout component, just implement what's in between
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.
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.
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
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 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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.