Tech Interview React

gistfile1.txt

Counter component using react and typescript

1. Should display count.
2. Should have 3 buttons: "+", "-" and "reset" (reset should change counter to initial one).
3. Should be able to create different counter, with different initial count.

4. Should automaticaly reset counter after provided timeout. auto reset should happen if counter value didn't change for certain amount of time.

import { useState, useEffect } from 'react';

type counterType = 'subtraction' | 'addition' | 'reset';

interface ICounterProps {
	initialCounter: number;
  timeout: number;
}

const Counter = ({ initialCounter, timeout }: ICounterProps) => {
	const [counter, setCounter] = useState(initialCounter); 
  
  useEffect(() => {
    const st = setTimeout(() => {
      setCounter(initialCounter);
    }, timeout);
    clearTimeout(st);
    return () => {
    	clearTimeout(st);
    };
  }, [counter]);

  const handleCounter = (type: counterType): void => {
    let result: number;
    switch (type) {
      case 'subtraction':
        result = counter + 1
        break;
      case 'addition':
        result = counter - 1
        break;
      case 'reset':
        result = initialCounter
        break;
      default:
        const exhaustiveCheck: never = type;
        throw new Error(`Unhandled counter type case: ${exhaustiveCheck}`);
    }
    setCounter(result);
  };

  return (
    <>
      <button type="button" onClick={() => handleCounter('addition')}>
        +
      </button>
      <button type="button" onClick={() => handleCounter('subtraction')>
        -
      </button>
      <button type="button" onClick={() => handleCounter('reset')}>
        Reset
      </button>
      <p>{counter}</p>
    <>
  )
};

<Counter initialCounter={0} timeout={5000} />
<Counter initialCounter={12} />
<Counter initialCounter={20} />

gistfile2.txt

import { useState, useEffect } from 'react';
type status = 'idle' | 'loading' | 'error' | 'success';

/* Find the the restaurants in a given city, with the highest average_rating value. If there is more than 1 restaurant with the same highest rating - return all of them in the order they were processed. Return a list of the top-rated food outlets in a city.   const url = "https://jsonmock.hackerrank.com/api/food_outlets?city=Seattle&page=1"   1. Create a custom hook to fetch data from the following url, using “Seattle” as the city and “1” as the page number 1. It should handle all the logic for error, loading, data states. 2. Check how reusable is the logic that the candidate implements. 2. Render a list with the items -> Show the name and the rating */

interface ICities {
  city: string;
  name: string;
  estimated_cost: number;
  user_rating: {
    average_rating: number;
    votes: number;
  };
  id: number;
}

const useDataFetch = () => {
  const url =
    'https://jsonmock.hackerrank.com/api/food_outlets?city=Seattle&page=1';
  const [state, setState] = useState<status>('idle');
  const [data, setData] = useState([]);

  useEffect(() => {
    setState('loading');
    fetch(url)
      .then((response) => response.json())
      .then((cities) => {
        setState('success');
        setData(cities.data);
      })
      .catch((error) => {
        setState('error');
        return error;
      });
  }, []);

  return { state, data };
};

export default useDataFetch;


import { FC } from 'react';
import useDataFetch from './useDataFetch';

import './style.css';

export const App: FC<{ name: string }> = ({ name }) => {
  const { data, state } = useDataFetch();

  if (state === 'error') {
    return <p>We could not retrieve Cities</p>;
  }

  if (state === 'loading') {
    return <p>Loading...</p>;
  }

  return (
    <div>
      {data && data.length > 0 && data.map((city) => <ul>{city.name}</ul>)}
    </div>
  );
};