alexeyraspopov

Представим компонент, написанный какое-то время назад, используется в приложении, работает без проблем

function MyComponent({ input }) {
  let [something, setSomething] = useState();
  let data = useSomeFetchLibrary(input);
  return (
    <section>
      <ContentA input={something} />
 

alexeyraspopov

let proxy = require('http-proxy-middleware');

module.exports = app => {
  let backend = proxy({
    target: process.env.DATAROBOT_ENDPOINT,
    changeOrigin: true,
  });
  let socket = proxy('/socket.io-queue', {
    target: process.env.DATAROBOT_ENDPOINT,
    changeOrigin: true,

alexeyraspopov

/* source: https://css-tricks.com/aspect-ratio-boxes/ */
.aspect-ratio-box {
  position: relative;
}
.aspect-ratio-box::before {
  content: '';
  float: left;
  padding-top: calc(100% / (var(--aspect-ratio))); /* --aspect-ratio: 16 / 9 */
}
.aspect-ratio-box::after {

alexeyraspopov

let DataContext = React.createContext();

function DataTable({ children }) {
  return <section className="data-table">{children}</section>;
}

function DataTableHead({ children }) {
  return (
    <header className="data-table-head">
      <div className="data-table-row">{children}</div>

alexeyraspopov

function useTransitionState(ref) {
  let [pending, setPending] = useState(false);
  useLayoutEffect(() => {
    let target = ref.current;
    let handler = {
      handleEvent(event) {
        setPending(event.type === 'transitionstart');
      }
    }
    target.addEventListener('transitionstart', handler);

alexeyraspopov

/**
 * @example
 *   let refetch = debounce((params) => makeRequest('/api', params));
 *   let prA = refetch(paramsA);
 *   let prB = refetch(paramsB);
 *   let prC = refetch(paramsC);
 *   let prD = refetch(paramsD);
 *   (prA === prB === prC === prD)
 *   awaits the last promise
 */

alexeyraspopov

export function useResource(fn, input) {
  return useMemo(() => {
    let resource = { type: 'Pending', value: null };
    resource.value = Promise.resolve(fn(...input))
      .then(result => Object.assign(resource, { type: 'Resolved', value: result }))
      .catch(error => Object.assign(resource, { type: 'Rejected', value: error }));
    return resource;
  }, input);
}

alexeyraspopov

// MyContext.js
let MyContext = createContext();

export function MyDataProvider({ children }) {
  let state = useState(null);
  return <MyContext.Provider value={state} children={children} />
}

export function useData() {
  let [data] = useContext(MyContext);

alexeyraspopov

:root {
  --gap: 0.5em;
}
.horizontal-stack {
  display: flex;
  flex-direction: row;
}
.vertical-stack {
  display: flex;
  flex-direction: column;

alexeyraspopov

let childProcess = require('child_process');

function createHandler(commands) {
  return new Proxy(function() {}, {
    get(target, property) {
      return createHandler(commands.concat(property));
    },
    apply(target, context, args) {
      return new Promise((resolve, reject) => {
        let command = commands.concat(args).join(' ');