Sort

1. We want to sort by :

• Added date
  • First to last
  • Last to first
• Position Name
  • A-Z
  • Z-A
• Company Name
  • A-Z
  • Z-A

2. Icon / location of the sort will be able when the ux/ui team will add it.

Create method to login and register users to the application.
Do it with firebase !

Responsive Update Password

When the UX/UI team will send us the responsive page, we will add it here.

After we done with #79 & #78 , please remove bootstrap from the application.
Check at index.html & package.json files.

With UX/UI friend, I will change all the app designs and will refactor the code to be more readable.

We need a new explanation in our README file.

Responsive Dashboard Main Page

When the UX/UI team will send us the responsive page, we will add it here.

at the login screen, there is demo users details there.
i need give some background for it so people can see it.

Navbar Refactor

Please, convert the navbar from bootstrap to Styled-Components.

Fix issues that status stay 'Applied' when we edit position.

The card move to the right status list, but in show - stay Applied.

Tooltip

When we hover above the Setting & Logout icons, we want to show a tooltip with the name of the icon.

Try other approach and start from almost beginning.

Refactor auth&user files.

Manage user Problem

• Modal too large
  

• Add labels to position and company name on header
  

• Status not updated on DB when change.

• Give margin to navbar when responsive mode
  

• Fix link when click on logo (404 error)

Company URL

Add company url to our services.

Add it to the modals : Add New Position, View & Edit Position.

Also, don't forgot to add it to the firebase functions (add, update)

Crate list component

• add title
• add card component (will look like image below) - will be print by map function.
  

New features will be available in the next release.

List

• Upload Cv's
• DnD
• Change language

Add some labels to header position (when modal show)

Example

Modal on desktop is too large.
Need fix the positions / margin/ height.

Example

Search Bar

In our application, we want to use the search bar for search position fast.

What we want?

• add a placeholder to search bar : Job Title, Company, or Keywords
• be able to search in the component (create only the logic, the component UI is ready).
• the results will show in the list component (we need to hide all other positions that not relevant to the search).

Spinner Refactor

Please, convert the spinner component from bootstrap to Styled-Components.

For few things we want to use transition animation :

1. Advance button (at add position modal)
   1.1- max-height of the modal will collapse and uncollapsed slowly.
   1.2- InputAdvancedGroup style (at style file) will show slowly the hidden inputs.

2. Modals - we want the modals will pop up nicely.

3. Errors will show and hide nicely too.

In src/components/Dashboard/Backdrop/ShowPosition change class to:

• Line 145 - from <div className='d-flex justify-content-sm-between responsiveWrapper'> to <div className='d-flex responsiveWrapper'>
• Line 184 - from <div className='d-flex flex-column'> to <div className='d-flex flex-column w-100'>
• All same classes- from className='w-100 col-form-label' to ``className='w-50 col-form-label'

Fix link when click on logo (404 error)

Responsive Login

When the UX/UI team will send us the responsive page, we will add it here.

We need to refactor the next component:

• List
• Sort

We got new delete icons (in view position modal), we need replace it :-)

Tests

In all good applications, we need to test our function, component, and more.
Let's get into it.

Create a test for every component and every function.

Responsive Add New Position modal

When the UX/UI team will send us the responsive modal, we will add it here.

Crate submitting component

• add simple text for now.

Responsive Profile

When the UX/UI team will send us the responsive page, we will add it here.

Responsive View Position modal

When the UX/UI team will send us the responsive modal, we will add it here.

Translation

In our application, we want to support 2 languages:

1. Hebrew
2. English

We can use packages or what ever needed.

Crate button component.
We need to check if the button adding list or adding card.

• create buttonText ( const buttonText=isList?"Add another list":"Add another card"
• create buttonTextOpacity ( const buttonTextOpacity = isList?1:0.5
• create buttonTextColor ( const buttonTextColor = isList?'"white":"inherit
• create buttonTextBackground ( const buttonTextBackground = isList?'"rgba(0,0,0,0.15)":"inherit
• create icon ( 'plus' icon +)
• change the cursor to pointer

Console.log

In the last version, i forgot to remove some consoles from the code.
remove it :-)

Responsive Sign Up

When the UX/UI team will send us the responsive page, we will add it here.

Drag And Drop

We want the user will be able to use DnD (Drag and Drop) in our application,
Please, use this package to do it: https://react-dnd.github.io/react-dnd/about

When we look into selected position i want to make the url's text as clickable link.

We have 5183 vulnerabilities, use the npm audit fix to fix this.

Responsive Edit Position modal

When the UX/UI team will send us the responsive modal, we will add it here.

Give margin to navbar when responsive mode

Example

Marge between the files : style.css & Global.style.css.

Create company details component that show :

• company name
• link to they website
• link to position
• HR mail
• HR name
• status (dropdown - send/denied/receive task/stage 1-4/contract)
• personal note

will be connected to #4 submitting component

When i add position i want to see the date i added it (or initial with custom date).

When accessing the login route there is an infinite redirect (all 404 pages):

Request URL: https://saikai.me/login
Request URL: https://saikai.me/login/?/
Request URL: https://saikai.me/login/?/&/
Request URL: https://saikai.me/login/?/&/~and~/
Request URL: https://saikai.me/login/?/&/~and~/~and~/
Request URL: https://saikai.me/login/?/&/~and~/~and~/~and~/

According to #62, we need to add a tooltip to :

• Edit position (at view position modal)
• Advance bottom (open/close advance) (at add new position modal)
  

and Fix the tooltip when hovering over the add new position icon.

Solve it after change the code:
from

// List Component
              <S.ListHeader title={positions.title}>
                <S.FilterButton
                  onClick={() => handleFilter()}
                  data-tooltip='Filter'
                >

to

// List Component
              <S.ListHeader positionTitle={positions.title}>
                <S.FilterButton
                  onClick={() => handleFilter()}
                  data-tooltip='Filter'
                >

AND need to change to props at the style.js file too.

from

// ..../List/style.js  -- ListHeader 
  background-color: ${({ title }) => colorForTitle(title)};

to

// ..../List/style.js  -- ListHeader 
  background-color: ${({ positionTitle }) => colorForTitle(positionTitle)};

Package's 📦

Install the next package's :

• - CRA
• - React-router-dom
• - Storybook
• - React-bootstrap, Bootstrap
• - Axios
• - Firebase
• - Redux, React-redux
• - React-textarea-autosize -> npm link

File structure 🏗️

• src
  • assets
    • icons
  • components
    • app.js
  • config
  • containers
  • contexts
  • services
  • styles
  • views
  • index.js

Replace the style.css with the Global.style.css file and insert it to index.js

Responsive Password Reset

When the UX/UI team will send us the responsive page, we will add it here.

Auth with Facebook & Google

With Firebase we can add sign In & sign up with facebook & google.
Add the logic part to the component.