Scribd
Upload
15 views6 pages

Untitled Document

hdjsjs

Uploaded by

elcin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views6 pages

Untitled Document

hdjsjs

Uploaded by

elcin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

import React, { useEffect } from "react";

// import { useStore } from './draft/store';


// import { useSectors, useSubsectors, useIndicators, useCountries, useYears, useRanks } from
'./draft/useApi';
import SelectInput from "./draft/components/SelectInput";
import RangeInput from "./draft/components/RangeInput";

const App: React.FC = () => {


return (
<div className="p-4 bg-gray-800 min-h-screen">
<SelectInput label="Sector" type="sector" />
<SelectInput label="Subsector" type="subsector" />
<SelectInput label="Indicator" type="indicator" />
<SelectInput label="Country" type="country" />
<SelectInput label="Year" type="year" />
<RangeInput label="Rank" />
</div>
);
};

export default App;

—--------------------------------------------

import React from "react";


import { useEffect } from "react";

interface SelectInputProps {
label: string;
options: string[];
value: string;
onChange: (value: string) => void;
}

import {
useSectors,
useSubsectors,
useIndicators,
useCountries,
useYears,
useRanks,
} from "../useApi";
import { useStore } from "../store";

const SelectInput: React.FC<{ label: string; type: string }> = ({


label,
type,
}) => {
const {
sector,
subsector,
indicator,
country,
year,
setSector,
setSubsector,
setIndicator,
setCountry,
setYear,
} = useStore();

const { data: sectors } = useSectors();


const { data: subsectors } = useSubsectors(sector);
const { data: indicators } = useIndicators(subsector);
const { data: countries } = useCountries(indicator);
const { data: years } = useYears(country, indicator);

let options: string[] = [];


let value: string = "";
let onChange: (value: string) => void = () => {};

switch (type) {
case "sector":
options = sectors || [sector];
value = sector;
onChange = setSector;
break;
case "subsector":
options = subsectors || [subsector];
value = subsector;
onChange = setSubsector;
break;
case "indicator":
options = indicators || [
indicator,
];
value = indicator;
onChange = setIndicator;
break;
case "country":
options = countries || [country];
value = country;
onChange = setCountry;
break;
case "year":
options = years || [year];
value = year;
onChange = setYear;
break;
}

useEffect(() => {
if (options.length > 0 && !options.includes(value)) {
onChange(options[0]);
}
}, [options, value, onChange]);

return (
<div className="mb-4">
<label className="block text-white">{label}</label>
<select
value={value}
onChange={(e) => onChange(e.target.value)}
className="mt-1 block w-full bg-gray-700 text-white border border-gray-600 rounded-md
shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
>
{options.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
</div>
);
};

export default SelectInput;


—------------------------------------
import React from 'react';
import { useStore } from "../store";
import { useRanks } from "../useApi";

const RangeInput: React.FC<{ label: string }> = ({ label }) => {


const { indicator, year, rank, setRank } = useStore();
const { data: ranks } = useRanks(indicator, year);

const min = ranks?.min_rank || 1;


const max = ranks?.max_rank || 180;

return (
<div className="mb-4">
<label className="block text-white">{label}</label>
<input
type="range"
min={min}
max={max}
value={rank}
onChange={(e) => setRank(Number(e.target.value))}
className="mt-1 block w-full"
/>
<span className="block text-center text-white">{rank}</span>
</div>
);
};

export default RangeInput;


—-------------------------------------------------
import useSWR from "swr";
import axios from "axios";

const fetcher = (url: string) => axios.get(url).then((res) => res.data);

export const useSectors = () =>


useSWR(
"https://searchartback-production-dc78.up.railway.app/api/sectors/",
fetcher
);

export const useSubsectors = (sector: string) =>


useSWR(
sector
? `https://searchartback-production-dc78.up.railway.app/api/subsectors/?sector=${sector}`
: null,
fetcher
);

export const useIndicators = (subsector: string) =>


useSWR(
subsector
? `https://searchartback-production-dc78.up.railway.app/api/indicators/?subsector=$
{subsector}`
: null,
fetcher
);

export const useCountries = (indicator: string) =>


useSWR(
indicator
? `https://searchartback-production-dc78.up.railway.app/api/country/?indicator=${indicator}`
: null,
fetcher
);

export const useYears = (countries: string, indicator: string) =>


useSWR(
countries && indicator
? `https://searchartback-production-dc78.up.railway.app/api/years/?countries=$
{countries}&indicator=${indicator}`
: null,
fetcher
);

export const useRanks = (indicator: string, year: string) =>


useSWR(
indicator && year
? `https://searchartback-production-dc78.up.railway.app/api/ranks/?indicator=$
{indicator}&year=${year}`
: null,
fetcher
);

—-------------------
import {create} from 'zustand';
interface AppState {
sector: string;
subsector: string;
indicator: string;
country: string;
year: string;
rank: number;
setSector: (sector: string) => void;
setSubsector: (subsector: string) => void;
setIndicator: (indicator: string) => void;
setCountry: (country: string) => void;
setYear: (year: string) => void;
setRank: (rank: number) => void;
}

export const useStore = create<AppState>(set => ({


sector: 'Economy',
subsector: 'Productivity and Labor Market',
indicator: 'Gross Domestic Product billions of U.S. dollars',
country: 'AllCountries',
year: '2019',
rank: 1,
setSector: sector => set({ sector }),
setSubsector: subsector => set({ subsector }),
setIndicator: indicator => set({ indicator }),
setCountry: country => set({ country }),
setYear: year => set({ year }),
setRank: rank => set({ rank }),
}));

You might also like