recoil#useSetRecoilState JavaScript Examples

function useUserActions () {
    const baseUrl = `${process.env.REACT_APP_API_URL}/users`;
    const fetchWrapper = useFetchWrapper();
    const setAuth = useSetRecoilState(authAtom);
    const setUsers = useSetRecoilState(usersAtom);

    return {
        login,
        logout,
        getAll
    }

    function login(username, password) {
        return fetchWrapper.post(`${baseUrl}/authenticate`, { username, password })
            .then(user => {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('user', JSON.stringify(user));
                setAuth(user);

                // get return url from location state or default to home page
                const { from } = history.location.state || { from: { pathname: '/' } };
                history.push(from);
            });
    }

    function logout() {
        // remove user from local storage, set auth state to null and redirect to login page
        localStorage.removeItem('user');
        setAuth(null);
        history.push('/login');
    }

    function getAll() {
        return fetchWrapper.get(baseUrl).then(setUsers);
    }    
}

SkipLoginButton = () => {
  const setAuthentication = useSetRecoilState(authenticationState);

  if (showSkipLogin) {
    return (
      <Button
        title="Skip Login"
        onPress={() => setAuthentication(MOCK_AUTH)}
      />
    );
  }
  return null;
}

export function LocationPage() {
  const locationsLoadable = useRecoilValueLoadable(locationResults);

  const setQuery = useSetRecoilState(locationQuery);
  const { year, month, day } = useParams();

  useEffect(() => {
    // every time mounted, this make new object
    setQuery({
      year: Number(year),
      month: Number(month),
      day: Number(day),
    });
  }, [year, month, day]);

  return (
    <>
      <LocationFilter year={year} month={month} day={day} />
      {locationsLoadable.state === 'loading' ? (
        <h1>Loading...</h1>
      ) : (
        <Suspense fallback={<h1>loading</h1>}>
          <Item.Group>
            {locationsLoadable.contents.map(item => (
              <LocationItem item={item} key={`location_item_${item.__id}`} />
            ))}
          </Item.Group>
        </Suspense>
      )}
    </>
  );
}

function PersoniumCellURL() {
  const setAuthInfo = useSetRecoilState($authInfo);
  const [cellUrlInput, setCellUrlInput] = useState('https://');

  const handleInput = useCallback(
    e => {
      setCellUrlInput(e.target.value);
    },
    [setCellUrlInput]
  );

  const handleSubmit = e => {
    e.preventDefault();
    // ToDo: validation
    setAuthInfo({ cellUrl: cellUrlInput });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="https://user.appdev.personium.io/"
          onChange={handleInput}
        />
        <button onSubmit={handleSubmit}>Submit</button>
      </form>
    </div>
  );
}

export default function Canvas() {
  const ref = useRef();
  const itemIds = useRecoilValue(itemIdsState);
  const setLayoutState = useSetRecoilState(canvasLayoutState);

  const onLayout = ({
    nativeEvent: {
      layout: { x, y, width, height }
    }
  }) => setLayoutState({ x, y, width, height });

  return (
    <View style={styles.root} ref={ref} onLayout={onLayout}>
      <View style={styles.container}>
        <CanvasBackground />
        {itemIds.map(id => <CanvasItem key={`item-${id}`} id={id} />)}
        <Selection />
      </View>
    </View>
  );
}

export default function AddRectsButton() {
  const [itemIds, setItemIds] = useRecoilState(itemIdsState);
  const setSelectedIds = useSetRecoilState(selectedIdsState);

  const handleClick = () => {
    let space = 16;
    let width = 100;
    let height = 100;
    let ids = [];
    let start = itemIds.length;
    for (let i=0; i<100; i++) {
      let count = start + i;
      let row = Math.floor(count / 5);
      let col = count % 5;
      let x = space * (col + 1) + width * col;
      let y = space * (row + 1) + height * row;
      let id = createNewShape({ x, y, width, height });
      ids.push(id);
    }

    setItemIds([...itemIds, ...ids]);
    setSelectedIds([]);
  }


  return (
    <Button style={styles.root} onClick={handleClick}>
      <Text style={styles.text}>Add 100 Rects</Text>
    </Button>
  );
}

export default function CanvasItem({ id }) {
  const [itemSnapshot, setItemSnapshot] = useState(null);
  const itemState = useRecoilValue(itemWithId(id));
  const setSelectedIds = useSetRecoilState(selectedIdsState);
  const updatePosition = useUpdateItem();

  const { onMouseDown } = useMove(({ status, origin, offset }) => {
    if (status === 'start') {
      setItemSnapshot(itemState);
    }

    if (status === 'moving' && itemSnapshot) {
      updatePosition({
        ...itemSnapshot,
        x: itemSnapshot.x + offset.x,
        y: itemSnapshot.y + offset.y,
      })
    }

    if (status === 'end') {
      setItemSnapshot(null);
      setSelectedIds(ids => {
        if (origin.metaKey || origin.shiftKey) {
          return [...ids, id];
        }
        return [id];
      });
    }
  });

  const Shape = createShape(itemState);
  if (!Shape) {
    return null;
  }

  return <Shape {...itemState} onMouseDown={onMouseDown} />;
}

export default function CanvasBackground(props) {
  const setSelectedIds = useSetRecoilState(selectedIdsState);
  const backgroundColor = useRecoilValue(backgroundColorState);

  const handleClick = useCallback(() => {
    setSelectedIds([]);
  }, [setSelectedIds]);

  return (
    <View style={[StyleSheet.absoluteFill, { backgroundColor }]} onClick={handleClick} />
  );
}

export default function NewItemButton({ newShapeProps = {}, ...others }) {
  const [newItem, setNewItem] = useState(null);
  const setItemIds = useSetRecoilState(itemIdsState);
  const setSelectedIds = useSetRecoilState(selectedIdsState);
  const canvasLayout = useRecoilValue(canvasLayoutState);
  const createNewItem = useNewItem();
  const updatePosition = useUpdateItem();

  const { onMouseDown } = useMove(({ status, origin, offset }) => {
    if (status === 'start') {
      setNewItem(null);
      createNewItem({
        ...newShapeProps,
        x: origin.clientX - canvasLayout.x,
        y: origin.clientY - canvasLayout.y
      })
        .then(item => {
          setNewItem(item);
          setItemIds(items => [...items, item.id]);
          setSelectedIds([]);
        });
    }

    if (status === 'moving') {
      if (newItem) {
        updatePosition({
          ...newItem,
          x: origin.clientX + offset.x - canvasLayout.x,
          y: origin.clientY + offset.y - canvasLayout.y
        })
      }
    }

    if (status === 'end') {
      if (newItem) {
        setNewItem(null);
        setSelectedIds([newItem.id]);
      }
    }
  })



  return <Button {...others} onMouseDown={onMouseDown} />;
}

function PlaygroundSettings() {
  const theme = useTheme();
  const [screens, setScreens] = useRecoilState(screensState);
  const setComponentPreviewCounter = useSetRecoilState(
    componentPreviewCounterState
  );

  return (
    <Container bg="grey.t03" height="100%">
      <div
        css={{
          display: "flex",
          flexDirection: "column",
          height: "100%",
          overflowY: "auto",
        }}
      >
        <Text textStyle="subtitle2" margin="4 6 0">
          Screens
        </Text>
        <div css={{ flexGrow: 1, minHeight: 0 }}>
          <List
            lockVertically
            values={screens}
            onChange={({ oldIndex, newIndex }) => {
              setComponentPreviewCounter(
                (componentPreviewCounter) => componentPreviewCounter + 1
              );
              setScreens(arrayMove(screens, oldIndex, newIndex));
            }}
            renderList={({ children, props }) => (
              <ul
                css={{
                  boxSizing: "border-box",
                  margin: 0,
                  padding: `${theme.space[1]} ${theme.space[6]} 0`,
                  overflowY: "auto",
                }}
                {...props}
              >
                {children}
              </ul>
            )}
            renderItem={({ isDragged, value, props }) => (
              <PlaygroundScreenSettings
                isDragged={isDragged}
                id={value.id}
                name={value.name}
                width={value.width}
                {...props}
              />
            )}
          />
          <PlaygroundNewScreenSettings />
        </div>
      </div>
    </Container>
  );
}

export default function Statistics({ id, series, status, ...others }) {
  const setItemState = useSetRecoilState(itemWithId(id));
  const statisticsLoadable = useRecoilValueLoadable(statisticsQuery(id));

  useEffect(() => {
    if (statisticsLoadable.state === 'hasValue') {
      setItemState(item => ({
        ...item,
        ...statisticsLoadable.contents,
        status: 'loaded'
      }));
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [statisticsLoadable.state]);

  let content;

  if (status === 'loading') {
    content = <ActivityIndicator size="large" />
  } else {
    content = (
      <View style={styles.container}>
        {series.map((serie, i) => (
          <View
            key={`serie-${i}`}
            style={[
              styles.bar,
              {
                height: serie * 100,
              }
            ]}
          />
        ))}
      </View>
    )
  }

  return (
    <Element
      {...others}
      style={styles.root}
    >
      {content}
    </Element>
  );
}

export default function Selection() {
  const selectedIds = useRecoilValue(selectedIdsState);
  const selection = useRecoilValue(selectionBoundingBox);
  const setMovingItemIds = useSetRecoilState(movingItemIdsState);

  const { onMouseDown } = useMoveItems(({ status }) => {
    if (!selection) {
      return null;
    }

    if (status === 'start') {
      setMovingItemIds(selectedIds)
    }

    if (status === 'end') {
      setMovingItemIds([])
    }
  })

  if (!selection) {
    return null;
  }

  const { x, y, width, height } = selection;

  return (
    <>
      <View
        style={[styles.selection, {
          left: x,
          top: y,
          width,
          height
        }]}
        onMouseDown={onMouseDown}
      />
      <ResizeHandler />
    </>
  )
}

export function useLocationACLSubscribe(__id, filepath) {
  const setAclStatus = useSetRecoilState(locationACLStatusState(__id));

  useEffect(() => {
    function handleStatChange(stat) {
      if ('acl' in stat && stat.acl.has('DAV::all')) {
        setAclStatus(
          stat.acl.get('DAV::all').has('DAV::read') ? 'public' : 'private'
        );
      } else {
        setAclStatus('private');
      }
    }

    statListener.subscribe(filepath, handleStatChange);
    return function cleanup() {
      statListener.unsubscribe(filepath, handleStatChange);
    };
  }, []);

  const setLocationACLPrivate = useCallback(() => {
    setAclStatus('loading');
    setACL(filepath, authState.accessToken.access_token, []).then(() => {
      statListener.fire(filepath, { acl: new Map([]) }); // Todo: use PROPFIND to get current stat.
    });
  }, [__id, filepath]);

  const setLocationACLPublic = useCallback(() => {
    setAclStatus('loading');
    setACL(filepath, authState.accessToken.access_token, [
      { principal: 'DAV::all', privileges: ['DAV::read'] },
    ]).then(() => {
      statListener.fire(filepath, {
        acl: new Map([['DAV::all', new Set(['DAV::read'])]]), // Todo: use PROPFIND to get current stat.
      });
    });
  }, [__id, filepath]);

  const updateLocationACL = useCallback(() => {
    statDirectory(filepath, authState.accessToken.access_token).then(res => {
      if (!res.has(filepath)) {
        console.log(`${filepath} is not found(PROPPATCH)`);
        return;
      }
      statListener.fire(filepath, res.get(filepath));
    });
  });

  return { updateLocationACL, setLocationACLPrivate, setLocationACLPublic };
}

useSetCube = () => {
  const setCubes = useSetRecoilState($cubes);
  return (x, y, z) =>
    setCubes(cubes => [...cubes, <Cube key={nanoid()} position={[x, y, z]} />]);
}

function PlaygroundScreen({ id, name, width, document, componentsLocation }) {
  const componentPreviewCounter = useRecoilValue(componentPreviewCounterState);
  const setScreens = useSetRecoilState(screensState);
  const isInspectMode = useRecoilValue(isInspectModeState);
  const [componentsAtMouse, setComponentsAtMouse] = useState({});
  const setScreenWidth = (width) => {
    setScreens((screens) => updateItemWithId(screens, id, { width }));
  };
  const setScreenDocument = (document) => {
    setScreens((screens) => updateItemWithId(screens, id, { document }));
  };
  const [mousePosition, mouseMoveRef] = useMousePosition(
    0, // enterDelay
    0, // leaveDelay
    10 // fps
  );
  const lastMousePosition = useRef();
  const widthOnResizeStart = useRef();

  useEffect(() => {
    const { x, y } = mousePosition;

    if (
      x !== null &&
      y !== null &&
      (!lastMousePosition.current ||
        lastMousePosition.current.x !== x ||
        lastMousePosition.current.y !== y)
    ) {
      const { scrollX, scrollY } = document.defaultView;
      const componentsAtMouse = getComponentsAtPoint(
        {
          x: x - scrollX,
          y: y - scrollY,
        },
        componentsLocation
      );

      setComponentsAtMouse(componentsAtMouse);
    }

    lastMousePosition.current = mousePosition;
  }, [mousePosition, document, componentsLocation]);

  useEffect(() => {
    setComponentsAtMouse({});
  }, [isInspectMode]);

  return (
    <Resizable
      size={{ width }}
      onResizeStart={() => {
        widthOnResizeStart.current = width;
      }}
      onResize={(e, direction, ref, d) => {
        setScreenWidth(widthOnResizeStart.current + d.width);
      }}
      minWidth={MIN_SCREEN_WIDTH}
      maxWidth={MAX_SCREEN_WIDTH}
      enable={{
        top: false,
        right: true,
        bottom: false,
        left: false,
        topRight: false,
        bottomRight: false,
        bottomLeft: false,
        topLeft: false,
      }}
    >
      <div
        css={{
          display: "flex",
          flexDirection: "column-reverse",
          width,
          height: "100%",
          overflowY: "hidden",
        }}
      >
        <Text color="grey.t75" margin="1 1 0">
          <strong>{name}</strong> – {width}px
        </Text>
        <ComponentPreview
          iframeTitle={`${name} screen preview`}
          iframeStyle={{
            flexGrow: 1,
            backgroundColor: "white",
            boxShadow:
              "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
          }}
          hasBodyMargin={false}
          setDocument={setScreenDocument}
          containerRef={isInspectMode ? mouseMoveRef : undefined}
          highlightedComponents={componentsAtMouse}
          onMouseLeave={() => {
            setComponentsAtMouse({});
          }}
          key={
            componentPreviewCounter /* See: https://github.com/ryanseddon/react-frame-component/issues/170 */
          }
        />
      </div>
    </Resizable>
  );
}

function PersoniumAuthentication() {
  const isLocalMode = useRecoilValue($localMode);
  const authInfo = useRecoilValue($authInfo);
  const setLogin = useSetRecoilState(isLogin);
  const setToken = useSetRecoilState(tokens);
  const setBarInstalled = useSetRecoilState($barInstalled);
  const [error, setError] = useState(null);

  useEffect(() => {
    let unmounted = false;
    let autoRefreshID = -1;

    const appUrlSplit = `${location.origin}${location.pathname}`.split('/');
    const appCellUrl = isLocalMode
      ? 'https://app-personium-trails.appdev.personium.io/'
      : `${appUrlSplit.slice(0, 3).join('/')}/`;
    // const appCellUrl = 'https://app-personium-trails.appdev.personium.io/';
    const targetCell = authInfo.cellUrl;

    const handler = isLocalMode
      ? new PersoniumLoginROPC(
          targetCell,
          localStorage.getItem('USERNAME_FOR_DEVELOPMENT'),
          localStorage.getItem('PASSWORD_FOR_DEVELOPMENT'),
          'https://app-personium-trails.appdev.personium.io/'
        )
      : new PersoniumLoginHandler(targetCell);

    // subscribe authentication state
    localStorage.setItem(LS_LAST_LOGIN_CELL, targetCell);
    console.log(appCellUrl, authInfo);
    handler
      .loginAsync(appCellUrl, authInfo)
      .catch(res => {
        // ToDo: change handling depending on situation.
        console.log(JSON.stringify(res));
        localStorage.removeItem(LS_LAST_LOGIN_CELL);
        if (res.status === 404) {
          setError({
            message: 'Authentication failed',
            body: `Cell not found: ${targetCell}`,
            // ToDo: refactoring
            bodyUrl: 'javascript: location.reload();',
          });
        } else {
          setError({
            message: 'Authentication failed',
            body: 'Please login from your Home App',
            bodyUrl: targetCell,
          });
        }
        return Promise.reject(res);
      })
      .then(authState => {
        // sined in successfully
        console.log('logged in');
        if (!unmounted) {
          setToken(authState.accessToken);
        }
        // start refreshing access_token (per 3000 sec)
        autoRefreshID = setInterval(() => handler.refreshAsync(), 3000 * 1000);

        // check bar installed;
        return authState
          .updateBoxUrl() // ToDo: refactoring Promise chain
          .then(() => {
            setBarInstalled(true);
          })
          .catch(res => {
            if (res.status === 403) {
              console.log('bar not installed');
              setBarInstalled(false);
            }
          });
      })
      .then(res => {
        if (!unmounted) {
          setLogin(true);
        }
      })
      .catch(reason => {
        console.log('error happened', reason);
      });

    return () => {
      // unsubscribe
      unmounted = true;
      if (autoRefreshID != -1) {
        clearInterval(autoRefreshID);
      }
    };
  }, [authInfo, isLocalMode, setToken, setLogin, setError, setBarInstalled]);

  return error ? (
    <>
      <h1>{error.message || 'Oops, you cannot sign in'}</h1>
      <p>
        <a href={error.bodyUrl}>{error.body || 'click'}</a>
      </p>
    </>
  ) : null;
}

export function PersoniumAppWrapper(props) {
  const login = useRecoilValue(isLogin);
  const barInstalled = useRecoilValue($barInstalled);
  const [authInfo, setAuthInfo] = useRecoilState($authInfo);
  const setLocalMode = useSetRecoilState($localMode);
  const history = useHistory();

  useEffect(() => {
    console.log('mounted PersoniumAppWrapper');

    // ToDo: Set initialState in RecoilRoot
    const isLocalMode =
      //  false;
      location.hostname === 'localhost' || location.hostname === '127.0.0.1';

    setLocalMode(isLocalMode);

    // Boot Script
    const currentHash = location.hash.replace(/^#\/?/g, '#');
    console.log({ currentHash });

    let targetCell = null;

    if (currentHash.startsWith('#cell')) {
      // boot from Home App
      const [target] = currentHash
        .replace(/^#\/?/g, '')
        .split('&')
        .map(kv => kv.split('='))
        .filter(([k]) => k === 'cell');

      if (target) {
        targetCell = target[1];
        history.push('/');
      } else {
        throw `Something is wrong. Is hash wrong? ${currentHash}`;
      }
    } else {
      // boot directly
      // nextPath = currentHash;
      const lastLoginCell = localStorage.getItem(LS_LAST_LOGIN_CELL);
      targetCell = lastLoginCell ? lastLoginCell : null;
    }

    // oauth redirected
    const url = new URL(location.href);
    if (
      url.searchParams.has('cellUrl') &&
      url.searchParams.has('code') &&
      url.searchParams.has('state')
    ) {
      setAuthInfo({
        cellUrl: url.searchParams.get('cellUrl'),
        code: url.searchParams.get('code'),
        state: url.searchParams.get('state'),
      });
      url.searchParams.delete('cellUrl');
      url.searchParams.delete('code');
      url.searchParams.delete('state');
      window.history.replaceState({}, document.title, url.toString());
    } else {
      setAuthInfo(targetCell !== null ? { cellUrl: targetCell } : null);
    }

    // if (!targetCell) {
    //   // targetCell unknown
    //   setError({ message: 'Launch this app from your Home App again.' });
    //   return () => {};
    // }
  }, []);

  if (login && barInstalled === true) return props.children;

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        height: '100vh',
        flexDirection: 'column',
      }}
    >
      <div style={{ flexGrow: 1 }} />
      {(() => {
        if (authInfo === null) return <PersoniumCellURL />;

        // attempt to login
        return (
          <>
            <PersoniumLoading />
            {(() => {
              if (!login) return <PersoniumAuthentication />;
              if (!barInstalled) return <PersoniumBarInstaller />;
            })()}
          </>
        );
      })()}
      <div style={{ flexGrow: 1 }} />
    </div>
  );
}

export function PersoniumBarInstaller() {
  const [installStatus, setInstallStatus] = useRecoilState($installStatus);
  const [installing, setInstalling] = useRecoilState($installing);
  const setBarInstalled = useSetRecoilState($barInstalled);

  const handleClick = useCallback(async () => {
    let pollingStatusID = -1;

    function updateInstallStatus(text) {
      setInstallStatus(c => [...c, { time: Date.now(), text }]);
    }

    if (authState.accessToken.access_token === undefined) {
      setInstalling(true);
      return () => {
        setInstalling(false);
      };
    }
    if (installing) return;

    setInstalling(true);

    const { access_token } = authState.accessToken;

    const res = await fetch(
      'https://app-personium-trails.appdev.personium.io/__/app-personium-trails.bar'
    );
    if (res.status !== 200) {
      throw new Error('Downloading Barfile is failed');
    }

    // download to memory
    const buff = await res.arrayBuffer();
    console.log(`Downloaded ${buff.byteLength} bytes`);

    const boxURL = `${authState._targetCell}app-personium-trails`;

    const sendRes = await fetch(boxURL, {
      method: 'MKCOL',
      body: buff,
      headers: {
        Authorization: `Bearer ${access_token}`,
        'Content-Type': 'application/zip',
      },
      redirect: 'manual',
    });
    if (sendRes.status === 202) {
      // Accepted
      // const boxStatusURL = sendRes.headers.get('location');
      pollingStatusID = setInterval(async () => {
        const boxStatus = await fetch(boxURL, {
          headers: {
            Authorization: `Bearer ${access_token}`,
          },
        }).then(res => res.json());

        const statusText =
          boxStatus.box.status === 'ready'
            ? boxStatus.box.status
            : `${boxStatus.box.status} ${boxStatus.box.progress}`;

        updateInstallStatus(statusText);
        if (boxStatus.box.status === 'ready') {
          clearInterval(pollingStatusID);

          // update boxURL
          authState
            .updateBoxUrl()
            .then(() => {
              console.log('bar installation is done');
              setBarInstalled(true);
            })
            .catch(res => {
              console.log('bar installation is failed', res);
              setBarInstalled(false);
            });
        }
      }, 500);
    } else {
      const err = await sendRes.json();
      updateInstallStatus(err.message.value);
    }
  }, [installing, setInstallStatus, setInstalling, setBarInstalled]);

  if (authState.accessToken === null) {
    return <h1>Login First</h1>;
  }
  return (
    <>
      <h1>Install Application</h1>
      <div>
        <button onClick={handleClick} disabled={installing}>
          Start Install
        </button>
      </div>
      <div>
        {installStatus.map(item => {
          return <p key={`installation-status-${item.time}`}>{item.text}</p>;
        })}
      </div>
    </>
  );
}