react-icons/fa#FaAngleLeft TypeScript Examples

export function TopNavbar() {
  const [inEdit, setInEdit] = useState(false)
  const urlForm = useRef<any>()
  const [urlSplit, setUrlSplit] = useState([])

  const startEdit = () => {
    setInEdit(true)
  }

  useEffect(() => {
    if (inEdit) {
      urlForm.current?.focus()
    }
  }, [inEdit])

  const exitEdit = () => {
    setInEdit(false)
  }

  const finishEdit = (e) => {
    if (e.keyCode === 13) {
      if (location.hash !== `#${e.target.value}`) {
        location.replace(`#${e.target.value}`)
        location.reload()
      }
      setInEdit(false)
    } else if (e.keyCode === 27) {
      exitEdit()
    }
  }

  const updateUrlSplit = () => {
    const hash = window.location.hash
    const theUrlSplit = hash.split('/')
    theUrlSplit.splice(0, 1)

    if (theUrlSplit[0] === 'watch') {
      const pagePerm = theUrlSplit[1]
      const pagePermSpliced = pagePerm.split(':')
      pagePermSpliced.splice(0, 1)
      theUrlSplit.pop()
      pagePermSpliced.forEach((onePagePerm) => {
        theUrlSplit.push(onePagePerm)
      })

      setUrlSplit(theUrlSplit)
    } else {
      setUrlSplit(theUrlSplit)
    }
  }

  useEffect(() => {
    updateUrlSplit()
  }, [])

  useEffect(() => {
    window.addEventListener('hashchange', function (event) {
      updateUrlSplit()
    })
  }, [])

  const userProfileUrl = useMemo(() => {
    const windowLocationHash = window.location.hash
    const windowLocationSearch = windowLocationHash.search('#')
    const windowLocationHref = windowLocationHash.slice(windowLocationSearch)
    const hrefSegments = windowLocationHref.split('/')
    hrefSegments.splice(0, 1)

    let userProfileUrl = '#/user/'

    if (hrefSegments[0] === 'watch') {
      const userProfileUrlInit = hrefSegments[1]
      const userProfileUrlSpliced = userProfileUrlInit.split(':')
      userProfileUrlSpliced.pop()

      userProfileUrlSpliced.forEach((one) => {
        if (one === userProfileUrlSpliced[0]) {
          userProfileUrl = userProfileUrl + one + ':'
        } else {
          userProfileUrl = userProfileUrl + one
        }
      })
    }

    return userProfileUrl
  }, [])

  return (
    <div>
      <Navbar bg="light" expand="lg">
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            {!inEdit ? (
              <>
                <Breadcrumb>
                  <Breadcrumb.Item href="#/">Home</Breadcrumb.Item>
                  {urlSplit.map((el) =>
                    el === updateUrlSplit[1] && updateUrlSplit[0] === 'watch' ? (
                      <Breadcrumb.Item href={userProfileUrl} key={el} id={el}>
                        {el}
                      </Breadcrumb.Item>
                    ) : (
                      <Breadcrumb.Item href={'#'} key={el} id={el}>
                        {el}
                      </Breadcrumb.Item>
                    ),
                  )}
                </Breadcrumb>
                <Button
                  className="btn btn-light btn-sm"
                  style={{
                    marginLeft: '5px',
                    width: '40px',
                    height: '40px',
                    padding: '3.5%',
                    verticalAlign: 'baseline',
                  }}
                  onClick={startEdit}
                >
                  <FaEdit style={{ textAlign: 'center', verticalAlign: 'initial' }} />
                </Button>
              </>
            ) : (
              <FormControl
                ref={urlForm}
                defaultValue={(() => {
                  return location.hash.slice(1)
                })()}
                onKeyDown={finishEdit}
                onBlur={exitEdit}
              />
            )}
          </Nav>
          <Dropdown>
            <Dropdown.Toggle variant="secondary" size="lg">
              Options
            </Dropdown.Toggle>

            <Dropdown.Menu>
              <Dropdown.Item onClick={() => copyToClip(window.location.hash)}>
                Copy Current URL{' '}
                <FaCopy size={28} onClick={() => copyToClip(window.location.hash)} />
              </Dropdown.Item>
              <Dropdown.Item onClick={goToClip}>
                Go to Copied URL <FaArrowRight size={28} />
              </Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
          <Nav>
            <Nav.Link>
              <FaAngleLeft size={28} onClick={goBack} />
            </Nav.Link>
            <Nav.Link>
              <FaAngleRight size={28} onClick={goForth} />
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </div>
  )
}

Keyboard = memo(function Keyboard({
  muted,
  keyboardHandler,
  ...props
}: KeyboardProps) {
  const [audioContext, initAudioContext] = useContext(CrosshareAudioContext);
  const playKeystrokeSound = useRef<(() => void) | null>(null);

  useEffect(() => {
    if (!audioContext) {
      return initAudioContext();
    }
    if (!playKeystrokeSound.current && !muted && audioContext) {
      fetch('/keypress.mp3')
        .then((response) => response.arrayBuffer())
        .then((buffer) => {
          const gainNode = audioContext.createGain();
          gainNode.gain.value = 0.7;
          gainNode.connect(audioContext.destination);
          audioContext.decodeAudioData(buffer, (audioBuffer) => {
            playKeystrokeSound.current = () => {
              const source = audioContext.createBufferSource();
              source.buffer = audioBuffer;
              source.connect(gainNode);
              source.start();
            };
          });
        });
    }
  }, [muted, audioContext, initAudioContext]);

  const keypress = useCallback(
    (key: string) => {
      if (!muted && playKeystrokeSound.current) {
        playKeystrokeSound.current();
      }
      if (keyboardHandler) {
        keyboardHandler(key);
      }
    },
    [muted, keyboardHandler]
  );

  if (props.showExtraKeyLayout) {
    return (
      <KeyRows toggleKeyboard={props.toggleKeyboard}>
        <KeyRow>
          <Key keyStroke="1" onKeypress={keypress} />
          <Key keyStroke="2" onKeypress={keypress} />
          <Key keyStroke="3" onKeypress={keypress} />
          <Key keyStroke="4" onKeypress={keypress} />
          <Key keyStroke="5" onKeypress={keypress} />
          <Key keyStroke="Ñ" onKeypress={keypress} />
        </KeyRow>
        <KeyRow>
          <Key keyStroke="6" onKeypress={keypress} />
          <Key keyStroke="7" onKeypress={keypress} />
          <Key keyStroke="8" onKeypress={keypress} />
          <Key keyStroke="9" onKeypress={keypress} />
          <Key keyStroke="0" onKeypress={keypress} />
          <Key keyStroke="&" onKeypress={keypress} />
        </KeyRow>
        <KeyRow>
          <Key keyStroke="{abc}" display="ABC" onKeypress={keypress} />
          <Key keyStroke="{rebus}" display="Rebus" onKeypress={keypress} />
          <Key
            keyStroke="{bksp}"
            display={<FaBackspace />}
            onKeypress={keypress}
          />
        </KeyRow>
      </KeyRows>
    );
  }
  return (
    <KeyRows toggleKeyboard={props.toggleKeyboard}>
      <KeyRow>
        <Key keyStroke="Q" onKeypress={keypress} />
        <Key keyStroke="W" onKeypress={keypress} />
        <Key keyStroke="E" onKeypress={keypress} />
        <Key keyStroke="R" onKeypress={keypress} />
        <Key keyStroke="T" onKeypress={keypress} />
        <Key keyStroke="Y" onKeypress={keypress} />
        <Key keyStroke="U" onKeypress={keypress} />
        <Key keyStroke="I" onKeypress={keypress} />
        <Key keyStroke="O" onKeypress={keypress} />
        <Key keyStroke="P" onKeypress={keypress} />
        <Key
          onlyOnTablet
          keyStroke="{bksp}"
          display={<FaBackspace />}
          onKeypress={keypress}
        />
      </KeyRow>
      <KeyRow>
        <Key
          onlyOnTablet={props.includeBlockKey}
          keyStroke="{prev}"
          smallSize={true}
          display={<FaAngleLeft />}
          onKeypress={keypress}
        />
        <Key keyStroke="A" onKeypress={keypress} />
        <Key keyStroke="S" onKeypress={keypress} />
        <Key keyStroke="D" onKeypress={keypress} />
        <Key keyStroke="F" onKeypress={keypress} />
        <Key keyStroke="G" onKeypress={keypress} />
        <Key keyStroke="H" onKeypress={keypress} />
        <Key keyStroke="J" onKeypress={keypress} />
        <Key keyStroke="K" onKeypress={keypress} />
        <Key keyStroke="L" onKeypress={keypress} />
        {props.includeBlockKey ? (
          <Key
            css={{ border: '1px solid var(--cell-wall)' }}
            keyStroke="{block}"
            backgroundColor="repeating-linear-gradient(-45deg,var(--cell-wall),var(--cell-wall) 10px,var(--primary) 10px,var(--primary) 20px);"
            display=" "
            onKeypress={keypress}
          />
        ) : (
          ''
        )}
        <Key
          onlyOnTablet
          keyStroke="{dir}"
          smallSize={props.includeBlockKey}
          display={<AiOutlineEnter />}
          onKeypress={keypress}
        />
        <Key
          onlyOnTablet={props.includeBlockKey}
          keyStroke="{next}"
          smallSize={true}
          display={<FaAngleRight />}
          onKeypress={keypress}
        />
      </KeyRow>
      <KeyRow>
        <Key
          onlyOnTablet
          keyStroke="{prevEntry}"
          display={<FaAngleDoubleLeft />}
          onKeypress={keypress}
        />
        <Key
          notOnTablet
          keyStroke="{num}"
          smallFont={true}
          largeSize={true}
          display="More"
          onKeypress={keypress}
        />
        <Key keyStroke="Z" onKeypress={keypress} />
        <Key keyStroke="X" onKeypress={keypress} />
        <Key keyStroke="C" onKeypress={keypress} />
        <Key keyStroke="V" onKeypress={keypress} />
        <Key keyStroke="B" onKeypress={keypress} />
        <Key keyStroke="N" onKeypress={keypress} />
        <Key keyStroke="M" onKeypress={keypress} />
        <Key
          onlyOnTablet
          keyStroke="{num}"
          display="More"
          onKeypress={keypress}
        />
        <Key
          onlyOnTablet
          keyStroke="{rebus}"
          display="Rebus"
          onKeypress={keypress}
        />
        <Key
          onlyOnTablet
          keyStroke="{nextEntry}"
          display={<FaAngleDoubleRight />}
          onKeypress={keypress}
        />
        <Key
          notOnTablet
          keyStroke="{bksp}"
          largeSize={true}
          display={<FaBackspace />}
          onKeypress={keypress}
        />
      </KeyRow>
    </KeyRows>
  );
})