We need to refactor the next component:

• List
• Sort

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

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

Responsive Update Password

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

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

Responsive Profile

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

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

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

We need a new explanation in our README file.

New features will be available in the next release.

List

• Upload Cv's
• DnD
• Change language

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

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

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).

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

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.

Responsive Login

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

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

Responsive Password Reset

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

Spinner Refactor

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

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)

Tooltip

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

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)

Responsive View Position modal

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

Add some labels to header position (when modal show)

Example

Responsive Add New Position modal

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

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.

Navbar Refactor

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

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.

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

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

Crate list component

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

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

Fix link when click on logo (404 error)

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

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

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)};

Console.log

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

Responsive Dashboard Main Page

When the UX/UI team will send us the responsive page, 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.

Responsive Edit Position modal

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

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

Give margin to navbar when responsive mode

Example

Responsive Sign Up

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

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'

Crate submitting component

• add simple text for now.

Try other approach and start from almost beginning.

Refactor auth&user files.

Auth with Facebook & Google

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

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

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~/

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

Example