eyespace-sim

Import:

import Simulation from 'eyespace-sim';

Load data:

  useEffect(() => {
    (async function() {
      try {
        let fb = await firebase();
        let doc = await fb
          .firestore()
          .collection('lenses')
          .doc(props.engraving)
          .get();
        let data = doc.data();
        console.log(data);
        setData(data);
        let bucket = fb
          .remoteConfig()
          .getValue('ABC_BUCKET')
          .asString();
        var storage = fb.app().storage(bucket);
        let gsReference = storage.ref(
          `${data.region}/${data.practice_id}/${props.engraving}.json`,
        );
        let url = await gsReference.getDownloadURL();
        let res = await fetch(url);
        if (res.ok) {
          let json = await res.json();
          setAbcData(json);
          setError(null);
          setLoading(false);
        } else {
          console.log(res);
          setAbcData(null);
          setError(await res.text());
          setLoading(false);
        }
      } catch (err) {
        console.log(err);
        setAbcData(null);
        setError(err.toString());
        setLoading(false);
      }
    })();
  }, []);

Then use:

        {abcData ? (
          <Simulation abcData={abcData}></Simulation>
        ) : (
          <ErrorDiv errorMsg={error} />
        )}