SHARE
TWEET

Untitled

a guest Feb 22nd, 2019 67 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {Component, ComponentClass, createContext} from 'react';
  2. import { IFilterType, IFiltersData, IFiltersSingle } from './type';
  3.  
  4. // import { DataService } from 'data/DataService';
  5. interface Props {
  6.   filtersType: string;
  7.   getJwtToken?: () => string;
  8. }
  9.  
  10. interface State {
  11.   filtersData: IFiltersData[];
  12.   fundDimensions: IFilterType[];
  13.   investmentDimensions: IFilterType[];
  14. }
  15.  
  16. interface FilterContextInterface {
  17.   clear: (e: React.MouseEvent<HTMLInputElement>) => void;
  18.   active: (e: React.MouseEvent<HTMLInputElement>) => void;
  19. }
  20.  
  21. const { Provider, Consumer } = createContext<FilterContextInterface | null>(null);
  22.  
  23. export const FilterProvider = Provider;
  24. export const FilterConsumer = Consumer;
  25.  
  26. export const FiltersContainer = (ContainerComponent: ComponentClass) =>
  27.   class extends Component<Props, State> {
  28.  
  29.     constructor(props: Props) {
  30.       super(props);
  31.       this.state = {
  32.         fundDimensions: [
  33.           { name: 'vintageYear', label: 'Vintage Year' },
  34.           { name: 'sectorGroup', label: 'Sector Focus' },
  35.           { name: 'stageGroup', label: 'Stage Focus' },
  36.           { name: 'teamLocation', label: 'Team Location' },
  37.         ],
  38.         investmentDimensions: [
  39.           { name: 'investmentYear', label: 'Investment Year' },
  40.           { name: 'investmentSectorGroup', label: 'Sector' },
  41.           { name: 'investmentStageGroup', label: 'Stage' },
  42.           { name: 'investmentCountry', label: 'Country' },
  43.         ],
  44.         filtersData: [],
  45.       };
  46.       this.setActiveElement = this.setActiveElement.bind(this);
  47.       this.clearFilters = this.clearFilters.bind(this);
  48.       this.getFilters = this.getFilters.bind(this);
  49.     }
  50.     componentDidMount() {
  51.       this.getFilters().then(({data:filtersData}: any) => {
  52.  
  53.         this.setState({
  54.               filtersData:
  55.                   Object.keys(filtersData).length !== 0 &&
  56.                   this.state[this.props.filtersType].map((item: IFilterType) => {
  57.                       const current = Object.keys(filtersData).filter(single => single === item.name);
  58.                       filtersData[current[0]].placeholder = item.label;
  59.                       filtersData[current[0]].values = filtersData[current[0]].values.map((element: string) => {
  60.                           return { title: element, checked: false };
  61.                       });
  62.                       return filtersData[current[0]];
  63.                   }),
  64.           });
  65.       });
  66.     }
  67.  
  68.     async getFilters(values?: any) {
  69.       // const token = this.context && this.context.getJwtToken ? this.context.getJwtToken() : '';
  70.       // return await DataService('graphql', token, {
  71.       //   operationName: null,
  72.       //   query: `{
  73.       //     vintageYear: funds(dimensions: ["vintageYear"], sorted: true) {
  74.       //       values: vintageYear
  75.       //     }
  76.       //     sectorGroup: funds(dimensions: ["sectorGroup"], sorted: true) {
  77.       //       values: sectorGroup
  78.       //     }
  79.       //     stageGroup: funds(dimensions: ["stageGroup"], sorted: true) {
  80.       //       values: stageGroup
  81.       //     }
  82.       //     teamLocation: funds(dimensions: ["teamLocation"], sorted: true) {
  83.       //       values: teamLocation
  84.       //     }
  85.       //     investmentYear: investments(dimensions: ["investmentYear"], sorted: true) {
  86.       //       values: investmentYear
  87.       //     }
  88.       //     investmentSectorGroup: investments(dimensions: ["investmentSectorGroup"], sorted: true) {
  89.       //       values: investmentSectorGroup
  90.       //     }
  91.       //     investmentStageGroup: investments(dimensions: ["investmentStageGroup"], sorted: true) {
  92.       //       values: investmentStageGroup
  93.       //     }
  94.       //     investmentCountry: investments(dimensions: ["investmentCountry"], sorted: true) {
  95.       //       values: investmentCountry
  96.       //     }
  97.       //   }`,
  98.       //   variables: {},
  99.       // });
  100.     }
  101.  
  102.     setActiveElement(e: React.MouseEvent<HTMLInputElement>) {
  103.       e.persist();
  104.       const title = e.currentTarget.getAttribute('data-title');
  105.       this.setState(prevState => {
  106.         const newData = prevState.filtersData.map((item: any) => {
  107.           item.values = item.values.map((single: IFiltersSingle) => {
  108.             if (single.title === title) {
  109.               single.checked = !single.checked;
  110.             }
  111.             return single;
  112.           });
  113.           return item;
  114.         });
  115.  
  116.         return { filtersData: newData };
  117.       });
  118.     }
  119.  
  120.     clearFilters(e?: React.MouseEvent<HTMLInputElement>) {
  121.       const title = e && e.currentTarget.getAttribute("data-title");
  122.       this.setState(prevState => {
  123.         const newData = prevState.filtersData.map((item: any) => {
  124.           item.values = item.values.map((single: IFiltersSingle) => {
  125.             single.checked = item.placeholder === title ? false : single.checked;
  126.             if (title === null) {
  127.               single.checked = false;
  128.             }
  129.             return single;
  130.           });
  131.           return item;
  132.         });
  133.  
  134.         return { filtersData: newData };
  135.       });
  136.     }
  137.  
  138.     render() {
  139.       const newProps = {
  140.         ...this.props,
  141.         filtersData: this.state.filtersData,
  142.         setActive: this.setActiveElement,
  143.         clearFilters: this.clearFilters,
  144.       };
  145.  
  146.       return (
  147.         <FilterProvider value={{ clear: this.clearFilters, active: this.setActiveElement }}>
  148.           <ContainerComponent {...newProps} />
  149.         </FilterProvider>
  150.       );
  151.     }
  152.   };
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top