strudel/website/src/components/Udels/Udels.jsx

import { code2hash } from '@strudel/core';

import { UdelFrame } from './UdelFrame';
import { useState } from 'react';
import UdelsHeader from './UdelsHeader';

const defaultHash = 'c3RhY2soCiAgCik%3D';

const getHashesFromUrl = () => {
  return window.location.hash?.slice(1).split(',');
};
const updateURLHashes = (hashes) => {
  const newHash = '#' + hashes.join(',');
  window.location.hash = newHash;
};
export function Udels() {
  const hashes = getHashesFromUrl();

  const [numWindows, setNumWindows] = useState(hashes?.length ?? 1);
  const numWindowsOnChange = (num) => {
    setNumWindows(num);
    const hashes = getHashesFromUrl();
    const newHashes = [];
    for (let i = 0; i < num; i++) {
      newHashes[i] = hashes[i] ?? defaultHash;
    }
    updateURLHashes(newHashes);
  };

  const onEvaluate = (key, code) => {
    const hashes = getHashesFromUrl();
    hashes[key] = code2hash(code);

    updateURLHashes(hashes);
  };

  return (
    <div
      style={{
        margin: 0,
        display: 'flex',
        flex: 1,
        height: '100vh',
        width: '100%',
        flexDirection: 'column',
      }}
    >
      <UdelsHeader numWindows={numWindows} setNumWindows={numWindowsOnChange} />
      <div
        style={{
          display: 'flex',
          flex: 1,
          flexDirection: 'row',
          flexWrap: 'wrap',
        }}
      >
        {hashes.map((hash, key) => {
          return (
            <UdelFrame
              instance={key}
              onEvaluate={(code) => {
                onEvaluate(key, code);
              }}
              hash={hash}
              key={key}
            />
          );
        })}
      </div>
    </div>
  );
}