How to use reduxful - 10 common examples

const BlackPopulationChange = ({ init, data, Layout }) => {
  useEffect(() => {
    init();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const loading =
    !isLoaded(data.ncdbYearly1990) || !isLoaded(data.ncdbYearly2017);

  return (
    
  );
};

const TemplateAPICard = ({ init, data, Layout }) => {
  useEffect(() => {
    init();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const loading = !isLoaded(data.ridershipOverTime);

  return (
    
  );
};

const SystemWideSummaryMeta = data => ({
  title: "System Wide Summary",
  slug: "system-wide-summary",
  introText: (
    <p>
      {isLoaded(data.busSystemWideSummary)
        ? `This chart is generated from ${data.busSystemWideSummary.value.results
            .reduce((acc, result) =&gt; acc + result.total_ons, 0)
            .toLocaleString()} total onboarding events and ${data.busSystemWideSummary.value.results
            .reduce((acc, result) =&gt; acc + result.total_offs, 0)
            .toLocaleString()} total offboarding events. Morning and evening rush hour peaks are defined as an hour before and after their respective peaks with a.m rush being 6:30 a.m to 9 a.m. and p.m. rush being 2:30 p.m. to 6:45 p.m. Identifying these peak hours gives us the ability to focus on local and system-wide trends that affect the most people.`
        : null}
    </p>
  ),
  visualization: SystemWideSummaryVisualization, // data, isLoading are passed to this as props
  additionalText: <p>,
  shareText: "",
  tags: ["Transportation", "Bus", "Portland", "Oregon"],
  selector: null,
  analysis: (
    
      </p>

const HolcRedliningVisualization = ({ data }) => {
  if (!isLoaded(data.redliningMap)) return ;

  const polygonFieldName = "holc_grade";
  const redliningMap = data.redliningMap.value.results.features;
  const colorScale = scaleOrdinal()
    .domain(["A", "B", "C", "D"])
    .range([
      // Color-blind safe diverging color scale from ColorBrewer
      [77, 175, 74],
      [30, 98, 189],
      [255, 178, 31],
      [220, 69, 86]
    ]);

  const REDLINING_GRADES = {
    A: '"Best"',
    B: '"Still Desirable"',

import requestAdapter from "../request-adapter";

const apiConfig = { requestAdapter };

const HOST = "https://service.civicpdx.org";

const apiDesc = {
  getNcdbYearlyData: {
    url: `${HOST}/housing2019/v1/api/ncdbsampleyearly/`,
    // you can apply any needed data transformations to value here
    // if complex, separate tranformation function to another file
    dataTransform: data => data
  }
};

const blackPopulationChangeData = new Reduxful(
  "blackPopulationChangeData",
  apiDesc,
  apiConfig
);

export default blackPopulationChangeData;

import requestAdapter from "../request-adapter";

const apiConfig = { requestAdapter };

const HOST = "https://service.civicpdx.org/housing2019/v1/api";

const apiDesc = {
  getRedliningMapData: {
    url: `${HOST}/holcportlandredlining/`,
    // you can apply any needed data transformations to value here
    // if complex, separate tranformation function to another file
    dataTransform: data => data
  }
};

const holcRedliningData = new Reduxful("holcRedliningData", apiDesc, apiConfig);

export default holcRedliningData;

import requestAdapter from "../request-adapter";

const apiConfig = { requestAdapter };

const HOST = "https://service.civicpdx.org";

const apiDesc = {
  getTotalLoansData: {
    url: `${HOST}/housing2019/v1/api/sc2hmdaapprovalbyrace2013t2017/`,
    // you can apply any needed data transformations to value here
    // if complex, separate tranformation function to another file
    dataTransform: data => data
  }
};

const homeLoanApprovalsData = new Reduxful(
  "homeLoanApprovalsData",
  apiDesc,
  apiConfig
);

export default homeLoanApprovalsData;

const apiDesc = {
  getBusAmRushSummaryData: {
    url:
      "https://service.civicpdx.org/transportation2019/v1/toad/busAmRushSummary/?limit=10000",
    dataTransform: data => data
  },
  getOnOffsData: {
    url: `${HOST}/passenger-census/system/annual/averages/?format=json`,
    // you can apply any needed data transformations to value here
    // if complex, separate tranformation function to another file
    dataTransform: data => data
  }
};

const morningRushData = new Reduxful("morningRushData", apiDesc, apiConfig);

export default morningRushData;

import Reduxful from "reduxful";
import requestAdapter from "../request-adapter";

const apiConfig = { requestAdapter };

const HOST = "https://service.civicpdx.org/transportation-systems";
const LIMIT = 1000; // default is 100, should fetch all for area

const apiDesc = {
  getDisturbanceStops: {
    url: `${HOST}/trimet-stop-events/disturbance-stops/?limit=${LIMIT}`
  }
};

const beforeAfterDelayMapsApi = new Reduxful(
  "beforeAfterDelayMapsApi",
  apiDesc,
  apiConfig
);

export default beforeAfterDelayMapsApi;

y: data[year][race],
              series: race
            }))
          ),
        []
      )
  },
  getNcdbYearlyData: {
    url: `${HOST}/ncdbsampleyearly/`,
    // you can apply any needed data transformations to value here
    // if complex, separate tranformation function to another file
    dataTransform: data => data
  }
};

const housingDisplacementData = new Reduxful(
  "housingDisplacementData",
  apiDesc,
  apiConfig
);

export default housingDisplacementData;