DEV Community

Cover image for Hire+Plus! For Employees Here's how I built it (Redux - Company)
AjeaS
AjeaS

Posted on • Edited on

1 1

Hire+Plus! For Employees Here's how I built it (Redux - Company)

Purpose: The candidate will be able to view a company's profile, and see the jobs they posted.

Types, Actions and Reducers: Company state

Types

inside app > features > company > companyTypes.ts

Data types for a company. I have JobData imported from diff file, but I'm showing side-by-side for simplicity.

export type CompanyData = {
 id: string;
 companyName: string;
 companyDescription: string;
 companyUrl: string;
 email: string;
 isHiring: boolean;
 companySize: string;
 jobs: JobData[];
};

export type JobData = {
 id: string;
 companyName: string;
 position: string;
 location: string;
 salary: string;
 datePosted: string;
 jobType: string;
 applyUrl: string;
 description: string;
};

Enter fullscreen mode Exit fullscreen mode

Actions

inside app > features > company > companySlice.ts
setting the initial state for company reducer, and call getCompany from DB to get a company by id. I return the stringifyed version of the company.

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { getCompanyById } from '../../../utils/firebase/firebase.utils';
import { CompanyData } from './companyTypes';

interface companyState {
 company: CompanyData;
 isLoading: boolean;
}
const initialState: companyState = {
 company: {
   id: '',
   companyName: '',
   companyDescription: '',
   companyUrl: '',
   email: '',
   isHiring: false,
   companySize: '',
   jobs: [],
 },
 isLoading: false,
};

export const getCompany = createAsyncThunk(
 'job/getCompanyById',
 async (id: string) => {
 const company = await getCompanyById(id);
 const [companyObj] = company;
 return JSON.stringify(companyObj);
 }
);

Enter fullscreen mode Exit fullscreen mode

Reducers

I handled the response states and set the state accordantly.
On the .fulfilled response state, I get this data back, parse it and set it to state.

const companySlice = createSlice({
 name: 'job',
 initialState,
 reducers: {},
 extraReducers: (builder) => {
  builder
   .addCase(getCompany.pending, (state, action) => {
     state.isLoading = true;
   })
   .addCase(getCompany.fulfilled, (state, action) => {
     state.isLoading = false;
     state.company = JSON.parse(action.payload);
   })
   .addCase(getCompany.rejected, (state, action) => {
     state.isLoading = false;
     console.log('error with company data', action.error);
   });
 },
});

export default companySlice.reducer;
Enter fullscreen mode Exit fullscreen mode

That's all for the company/redux portion of the project, stay tuned!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video