Airbnb Frontend Engineer Interview Preparation Guide - Mid Level (2-5 Years)

import { useEffect, useReducer, useCallback } from "react";

const init = (initial, key, maxSize) => {
  try {
    const raw = key && localStorage.getItem(key);
    if (raw) return JSON.parse(raw);
  } catch {}
  return { past: [], present: initial, future: [], maxSize };
};

function reducer(state, action) {
  const { past, present, future, maxSize } = state;
  switch (action.type) {
    case "SET": {
      const next = action.payload;
      if (Object.is(next, present)) return state;
      const newPast = [...past, present].slice(-maxSize);
      return { past: newPast, present: next, future: [] , maxSize};
    }
    case "UNDO": {
      if (!past.length) return state;
      const previous = past[past.length - 1];
      return {
        past: past.slice(0, -1),
        present: previous,
        future: [present, ...future],
        maxSize
      };
    }
    case "REDO": {
      if (!future.length) return state;
      const next = future[0];
      return {
        past: [...past, present].slice(-maxSize),
        present: next,
        future: future.slice(1),
        maxSize
      };
    }
    case "CLEAR":
      return { past: [], present: action.payload, future: [], maxSize };
    default:
      return state;
  }
}

export default function useUndoRedo(initialState, { key = null, maxSize = 50 } = {}) {
  const [state, dispatch] = useReducer(reducer, undefined, () => init(initialState, key, maxSize));

  // persist
  useEffect(() => {
    if (!key) return;
    try { localStorage.setItem(key, JSON.stringify(state)); } catch {}
  }, [state, key]);

  const set = useCallback(s => dispatch({ type: "SET", payload: s }), []);
  const undo = useCallback(() => dispatch({ type: "UNDO" }), []);
  const redo = useCallback(() => dispatch({ type: "REDO" }), []);
  const clear = useCallback(s => dispatch({ type: "CLEAR", payload: s }), []);

  return { state: state.present, setState: set, undo, redo, canUndo: state.past.length>0, canRedo: state.future.length>0, clear };
}

// computeRate: returns { value: number|null, text: string }
// options: { decimals: 1, multiplyBy: 100, sentinelValues: [...], fallbackText: '—' }
function computeRate(numerator, denominator, options = {}) {
  const {
    decimals = 1,
    multiplyBy = 100,
    sentinelValues = [null, undefined, '', -1, 'N/A'],
    fallbackText = '—'
  } = options;

  const isSentinel = v => sentinelValues.includes(v);
  if (isSentinel(numerator) || isSentinel(denominator)) {
    return { value: null, text: fallbackText };
  }
  if (typeof denominator !== 'number' || denominator === 0) {
    return { value: null, text: fallbackText };
  }
  const raw = (Number(numerator) / Number(denominator)) * multiplyBy;
  const factor = Math.pow(10, decimals);
  const rounded = Math.round(raw * factor) / factor;
  return { value: rounded, text: `${rounded.toFixed(decimals)}%` };
}

import React, { useReducer, useCallback } from 'react';

const initialState = {
  values: { profile: { name: '', email: '' }, address: { city: '' } },
  errors: {},
  touched: {},
  validating: {},
  submitting: false,
  submitError: null
};

function formReducer(state, action) {
  switch(action.type) {
    case 'FIELD_CHANGE':
      return {
        ...state,
        values: setIn(state.values, action.path, action.value),
        errors: unsetIn(state.errors, action.path),
      };
    case 'FIELD_BLUR':
      return { ...state, touched: setIn(state.touched, action.path, true) };
    case 'SYNC_VALIDATE':
      return { ...state, errors: { ...state.errors, ...action.errors } };
    case 'ASYNC_VALIDATE_START':
      return { ...state, validating: setIn(state.validating, action.path, true) };
    case 'ASYNC_VALIDATE_END':
      return {
        ...state,
        validating: setIn(state.validating, action.path, false),
        errors: setIn(state.errors, action.path, action.error || null)
      };
    case 'SUBMIT_START':
      return { ...state, submitting: true, submitError: null };
    case 'SUBMIT_END':
      return { ...state, submitting: false, submitError: action.error || null };
    default: return state;
  }
}

// Helper utilities setIn/unsetIn omitted for brevity

export function useForm() {
  const [state, dispatch] = useReducer(formReducer, initialState);

  const change = useCallback((path, value) => {
    dispatch({ type: 'FIELD_CHANGE', path, value });
    // run sync validation
    const syncErr = runSyncValidators(path, value, state.values);
    dispatch({ type: 'SYNC_VALIDATE', errors: syncErr });
  }, [state.values]);

  const blur = useCallback((path) => dispatch({ type: 'FIELD_BLUR', path }), []);

  const asyncValidate = useCallback(async (path, validator) => {
    dispatch({ type: 'ASYNC_VALIDATE_START', path });
    const error = await validator(getIn(state.values, path));
    dispatch({ type: 'ASYNC_VALIDATE_END', path, error });
  }, [state.values]);

  const submit = useCallback(async (onSubmit) => {
    dispatch({ type: 'SUBMIT_START' });
    try {
      await onSubmit(state.values);
      dispatch({ type: 'SUBMIT_END' });
    } catch (e) {
      dispatch({ type: 'SUBMIT_END', error: e.message || 'Submit failed' });
    }
  }, [state.values]);

  return { state, change, blur, asyncValidate, submit, dispatch };
}

// comparator factory: rows have { value, _idx } where _idx is original position
function createDateComparator(cache = new Map(), nullsFirst = false) {
  const parseOnce = (raw) => {
    if (raw == null) return null;
    if (typeof raw === 'number') return Number.isFinite(raw) ? raw : NaN;
    if (cache.has(raw)) return cache.get(raw);
    let ts = Number.NaN;
    // fast path: ISO-like numeric parse
    const isoLike = /^\d{4}-\d{2}-\d{2}/;
    if (isoLike.test(raw)) ts = Date.parse(raw);
    else {
      // try Date.parse then fallback to locale-aware creation
      ts = Date.parse(raw);
      if (Number.isNaN(ts)) {
        const d = new Date(raw); // some browsers parse localized formats
        ts = Number.isNaN(d.getTime()) ? Number.NaN : d.getTime();
      }
    }
    cache.set(raw, Number.isNaN(ts) ? NaN : ts);
    return cache.get(raw);
  };

  return (a, b) => {
    const ta = parseOnce(a.value);
    const tb = parseOnce(b.value);
    const aNull = ta === null || Number.isNaN(ta);
    const bNull = tb === null || Number.isNaN(tb);

    if (aNull && bNull) return a._idx - b._idx; // stable
    if (aNull !== bNull) return (aNull ? (nullsFirst ? -1 : 1) : (nullsFirst ? 1 : -1));
    if (ta === tb) return a._idx - b._idx; // stable tie-breaker
    return ta - tb;
  };
}

type ButtonProps = {
  children: ReactNode;
  as?: 'button'|'a';
  href?: string;
  ariaLabel?: string;
  disabled?: boolean;
  onClick?: (e)=>void;
  focusRef?: Ref<HTMLButtonElement>;
}