@icon-solutions/icon-segment-builder

Icon Segment Builder

Icon Segment Builder is a React Componenten developed by Icon Solutions. The component is used to structure and offer functionailty to select data about Countries, Titles, Title groups, Title levels, Functions, Function groups and Industires. The data has to be structured based on the types offered within the NPM package.

How to use

Installation

The package is a private NPM package and is (so far) only available within the Icon Solutions development team.

npm install @icon-solutions/icon-segment-builder

Props

Disclaimer: Mandatatory props are marked with (*). Optional props are marked with (?).

countries (*)

countries requries an array of type Country. Leave as [] if you don't want to provide country-selection.

titles (*)

titles requries an array of type Title. Leave as [] if you don't want to provide title-selection.

jobFunctions (*)

jobFunctions requries an array of type JobFunction. Leave as [] if you don't want to provide job function-selection.

titleLevels (*)

titleLevels requries an array of type TitleLevel. Leave as [] if you don't want to provide title level-selection.

languages (*)

languages requries an array of type Language. Leave as [] if you don't want to provide language-selection.

naces (*)

naces requries an array of type Nace. Leave as [] if you don't want to provide nace / industry-selection. NB: Nace requires country selection to be able do determine which naces to use.

titleGroups (*)

titleGroups requries an array of type TitleGroup. Leave as [] if you don't want to provide title group-selection.

jobFunctionGroups (*)

jobFunctionGroups requries an array of type JobFunctionGroup. Leave as [] if you don't want to provide job function group-selection.

saveSegmentHandler (?)

A function that recieves data from selected items within the Icon Segment Builder (type: SegmentData). The function is triggered by the "Save"-button.

selectCountryHandler (?)

A async function that selects country. This is used within the country-selection tab and returns the selected country.

countProfilesHandler (?)

A function that recieves data from selected items within the Icon Segment Builder (type: SegmentData). The function is triggered by the "Count"-button.

importSegmentData (?)

A function returns segment data (type: SegmentData) and inject into segment builder.

Example usage

import React, { useState, useEffect } from 'react';

import { getAllTitles } from './services/titles/titles';
import { getAllTitleLevels } from './services/titleLevels/titleLevels';
import { getAllLanguages } from './services/languages/languages';
import { getAllJobFunctions } from './services/jobFunctions/jobFunctions';
import { getAllNaces } from './services/naces/naces';
import { countProfiles } from './services/count/count';
import { getAllJobFunctionGroups } from './services/jobFunctionGroups/jobFunctionGroups';
import { getAllTitleGroups } from './services/titleGroups/titleGroups';

import { SegmentBuilder, SegmentData, Title, TitleLevel, JobFunction, Language, Nace, Country, JobFunctionGroup, TitleGroup } from '@icon-solutions/icon-segment-builder';


function TestApp() {
  const [titles, setTitles] = useState<Array<Title>>([]);
  const [jobFunctions, setJobFunctions] = useState<Array<JobFunction>>([]);
  const [titleLevels, setTitleLevels] = useState<Array<TitleLevel>>([]);
  const [languages, setLanguages] = useState<Array<Language>>([]);
  const [countries, setCountries] = useState<Array<Country>>([]);
  const [naces, setNaces] = useState<Array<Nace>>([]);
  const [loading, setLoading] = useState<Boolean>(true);
  const [jobFunctionGroups, setJobFunctionGroups] = useState<Array<JobFunctionGroup>>([]);
  const [titleGroups, setTitleGroups] = useState<Array<TitleGroup>>([]);
  
  useEffect(() => {
    const fetchData = async () => {
        let titlesData = await getAllTitles();
        titlesData = await titlesData.data.recordset;
        setTitles((titlesData as unknown as Array<Title>));

        let jobFunctionsData = await getAllJobFunctions();
        jobFunctionsData = await jobFunctionsData.data.recordset;
        setJobFunctions((jobFunctionsData as unknown as Array<JobFunction>));

        let titleLevelsData = await getAllTitleLevels();
        titleLevelsData = await titleLevelsData.data.recordset;
        setTitleLevels((titleLevelsData as unknown as Array<TitleLevel>));

        let languagesData = await getAllLanguages();
        languagesData = await languagesData.data.recordset;
        setLanguages((languagesData as unknown as Array<Language>));

        let titleGroupsData = await getAllTitleGroups();
        titleGroupsData = await titleGroupsData.data.recordset;
        setTitleGroups((titleGroupsData as unknown as Array<TitleGroup>));

        let countriesData = await getAllCountries();
        countriesData = await countriesData.data.recordset;
        setCountries((countriesData as unknown as Array<Country>));

        let jobFunctionGroupsData = await getAllJobFunctionGroups();
        jobFunctionGroupsData = await jobFunctionGroupsData.data.recordset;
        setJobFunctionGroups((jobFunctionGroupsData as unknown as Array<JobFunctionGroup>));
    };

    fetchData().then(() => {
        setLoading(false);
    });
      
  }, []);

  const saveSegmentHandler = (segmentData: SegmentData) => {
      console.log("[TestApp.tsx] segmentData: ", segmentData);
  };

  const selectCountryHandler = async (selectedCountry: Country) => {
    console.log("[TestApp.tsx] selectedCountry: ", selectedCountry);
    let naceData = await getAllNaces(selectedCountry.CountryID);
    naceData = await naceData.data.recordset;
    setNaces((naceData as unknown as Array<Nace>));
  };

  const countProfilesHandler = async (segmentData: SegmentData) => {
    let countData = await countProfiles(segmentData);
    countData = await countData.data.recordset;
    console.log("[TestApp.tsx] count res:", countData)
    return (countData as any)[0].ProfileMatches;
  };

  const goBackHandler = () => {
    console.log("GO BACK!");
  };

  return (
    <div className="App">
      <header className="App-header">
        { loading ? 
          <p>Loading...</p>
          :
          <SegmentBuilder
            titles={titles}
            countries={countries}
            jobFunctions={jobFunctions}
            titleLevels={titleLevels}
            languages={languages}
            naces={naces}
            titleGroups={titleGroups}
            jobFunctionGroups={jobFunctionGroups}
            saveSegmentHandler={saveSegmentHandler}
            selectCountryHandler={selectCountryHandler}
            countProfilesHandler={countProfilesHandler}
            goBackHandler={goBackHandler}
          />
        }
      </header>
    </div>
  ); 
}

export default TestApp;