@fortawesome/free-solid-svg-icons#faAngleRight JavaScript Examples

Filters = props => {
  const [page, setPage] = useState(props.meta.page)
  const [maxPage, setmaxPage] = useState(props.meta.maxPage)
  const isMounted = useRef(false);

  useEffect(() => {
    if(isMounted.current) {
      props.fetchJobs({...props.boardFilters, page})
    } else {
      isMounted.current = true;
    }
  }, [page])
  let keysList = [...Array(maxPage).keys()];
  let slicedKeysList = [];
  if (page < 4) {
    slicedKeysList = keysList.slice(0, 5);

  } else {
    slicedKeysList = keysList.slice(page - 2, page + 5);
  }
  const paginationHtml = slicedKeysList.map(p => {
    let className = [styles.paginationItem];
    if (page === p + 1 ) {
      className.push(styles.active)
    }
    return (<li key={p} onClick={() => setPage(p+1)} className={className.join(' ')}>{p+1}</li>)
  })
  let nextClass = page === maxPage ? [styles.paginationItem, styles.disabled].join(' ') : styles.paginationItem
  let prevClass = page === 1 ? [styles.paginationItem, styles.disabled].join(' ') : styles.paginationItem
  return (
    <div className={styles.pagination}>
      <span className={prevClass} onClick={() => setPage(1)}>
        <FontAwesomeIcon  icon={faAngleDoubleLeft} />
      </span>
      <span className={prevClass} onClick={() => setPage(prevPage => prevPage - 1)}>
        <FontAwesomeIcon  icon={faAngleLeft} />
      </span>
      <ul className={styles.pagination__list}>
        {paginationHtml}
      </ul>
      <span className={nextClass}>
        <FontAwesomeIcon  icon={faAngleRight} onClick={() => setPage(prevPage => prevPage + 1)} />
      </span>
      <span className={nextClass}>
        <FontAwesomeIcon  icon={faAngleDoubleRight} onClick={() => setPage(maxPage)}/>
      </span>
    </div>
  )
}

PreviewLayout = (props) => {
  const { changeScreenHandler } = props;
  return (
    <div className="preview-layout-form">
      {/* <div className="preview-layout-back">
        <Link
          className="back-link"
          onClick={() => changeScreenHandler("addactivity")}
        >
          <FontAwesomeIcon icon="chevron-left" className="icon-link" />
          Back
        </Link>
      </div> */}
      <div className="preview-layout-tabs">
        <Tabs text="1. Select an activity" tabActive={true} />
        <Tabs text="2. Add activities to Layout" className="ml-10 mt-10" tabActive={true} />
        <Tabs text="3. Preview Activity" className="ml-10" tabActive={true} />
      </div>
      <div className="preview-layout-title-select">
        <div className="preview-layout-title">
          <HeadingTwo text="Interactive Video" color="#084892" />
        </div>

        {/* <div className="preview-layout-change-layout">
          <select>
            <option>Change Layout</option>
            <option>Interactive video</option>
            <option>Column layout</option>
            <option>Interactive book</option>
            <option>Course presentation</option>
            <option>Quiz</option>
            <option>Single activity</option>
          </select>
        </div> */}
      </div>
      <div className="preview-layout-card-project">
        <div className="preview-layout-dialogcard">
          <div className="dialogcard-subtitle">
            <HeadingThree text="Activity title" color="#084892" />
          </div>
          <div>
            <HeadingText text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam." />
          </div>
          <div className="preview-layout-panel">
            <div className="layout-panel">
              <HeadingThree text="First panel " color="#084892" />
              <FontAwesomeIcon icon="chevron-down" color="#084892" />
            </div>
            <div className="layout-panel mt-8">
              <HeadingThree text="Second panel " color="#084892" />
              <FontAwesomeIcon icon="chevron-down" color="#084892" />
            </div>
          </div>
          <div className="preview-layout-footer">
            <div className="footer-dowload">
              <p>
                <FontAwesomeIcon icon={faArrowDown} /> Download
              </p>
            </div>
            <div>
              <p>
                <FontAwesomeIcon icon={faAngleLeft} /> <FontAwesomeIcon icon={faAngleRight} />
                Embed
              </p>
            </div>
            <div>
              <img src={ExplanatoryH5P} />
            </div>
          </div>
          {/* <div className="dialogcard-subtitle">
            <HeadingText
              text="Dialog Card"
              color="#084892"
              className="subtitle-text"
            />
          </div>
          <div className="dialogcard-title">
            <HeadingTwo
              text="Activity Title"
              color="#084892"
              className="title-heading"
            />
            <HeadingThree
              text="Heading"
              color="#084892"
              className="sub-heading"
            />
          </div>
          <div className="detail-dialogcard">
            <div className="card-actvity">
              <img src={CarDImage} alt="" />
              <div>
                <FontAwesomeIcon
                  icon="volume-up"
                  className="card-actvity-icon"
                />
              </div>
              <HeadingThree
                text="Activity Title"
                className="card-actvity-title"
              />
              <Buttons
                icon="sync-alt"
                text="Turn"
                primary={true}
                width="96px"
                height="35px"
                className="card-actvity-btn"
              />
            </div>
          </div>
          <div className="card-pagination">
            <div className="pagination-text">
              <HeadingText text="Card 1 of 5" />
            </div>
            <div className="pagination-icon">
              <FontAwesomeIcon icon="angle-right" className="icon-next" />
            </div>
          </div> */}
        </div>
        <div className="preview-layout-project">
          <div className="project-title-link">
            <div className="project-title">
              <HeadingTwo text="Project: " color="#084892" className="project-heading" />
              <HeadingText text="Project title here" color="#515151" />
              <HeadingTwo text="Playlist:" color="#084892" className="playlist-heading" />
              <HeadingText text="Playlist name here" color="#515151" />
            </div>
            <div className="project-link">
              <Link className="get-link">
                {/* <FontAwesomeIcon icon="link" className="icon-link" />*/}
                Get link
              </Link>
            </div>
          </div>
          <div className="dialog-card-box">
            <img src={DialogCardImage} alt="" />
            <HeadingText text="Dialog Cards" color="#084892" className="ml-15" />
          </div>
          {/* <div className="add-more-activity">
            <div className="more-activity-icon">
              <FontAwesomeIcon icon="link" className="icon-link" />
            </div>
            <Link className="more-activity-link" to="/">
              Add More Activity
            </Link>
          </div> */}
          <div className="project-link-button">
            <Buttons text="Back to Editor" primary={true} width="126px" height="43px" hover={true} onClick={() => changeScreenHandler('addactivity')} />
            <Buttons text="Finish Layout" secondary={true} width="126px" height="43px" hover={true} onClick={() => changeScreenHandler('')} />
          </div>
        </div>
      </div>
    </div>
  );
}

function LaddersQuestionPage(props) {
  // console.log(props);
  const [type1, setType1] = useState(
    props.type === 'list' ? 'practice' : 'ladder'
  )
  const [problems, setProblems] = useState(null)
  const [show, setShow] = useState(true)
  const creds = JSON.parse(localStorage.getItem('creds'))
  const [prevPage, setPrevPage] = useState('')
  const [firstPage, setFirstPage] = useState(
    '/' + props.wise + '/' + type1 + '/' + props.slug + '?page=1'
  )
  const [nextPage, setNextPage] = useState('')
  const [lastPage, setLastPage] = useState('')
  const [locked, setlocked] = useState(false)

  //for reload button after doing the question
  const updateReload = () => {
    window.location.reload()
  }

  useEffect(() => {
    if (problems != null) {
      //URLs for related pages
      setPrevPage(
        '/' +
          props.wise +
          '/' +
          type1 +
          '/' +
          props.slug +
          '?page=' +
          (problems.meta.current_page - 1)
      )
      setNextPage(
        '/' +
          props.wise +
          '/' +
          type1 +
          '/' +
          props.slug +
          '?page=' +
          (problems.meta.current_page + 1)
      )
      setLastPage(
        '/' +
          props.wise +
          '/' +
          type1 +
          '/' +
          props.slug +
          '?page=' +
          problems.meta.last_page
      )

      //if the last unsolved question is not at this page
      if (problems.meta.curr_unsolved_page != problems.meta.current_page) {
        setlocked(true)
      }
    }
  })

  useEffect(() => {
    if (creds) {
      async function fetchData() {
        const res = await fetch(
          `https://api.codedigger.tech/lists/${props.wise}/${props.type}/${props.slug}${props.pageNo}`,
          {
            method: 'GET',
            headers: {
              'Content-Type': 'application/json',
              Authorization: `Bearer ${creds.access}`,
            },
          }
        )
        res
          .json()
          .then((res) => setProblems(res))
          .then((show) => setShow(false))
      }
      fetchData()
    } else {
      async function fetchData() {
        const res = await fetch(
          `https://api.codedigger.tech/lists/${props.wise}/${props.type}/${props.slug}${props.pageNo}`,
          {
            method: 'GET',
            headers: {
              'Content-Type': 'application/json',
            },
          }
        )
        res
          .json()
          .then((res) => setProblems(res))
          .then((show) => setShow(false))
      }
      fetchData()
    }
  }, [])

  var count = 0
  var solvedBtn = -1
  var button = false

  return show == true ? (
    <Loading />
  ) : (
    <div>
      <Navbar />
      <h2 style={{ textAlign: 'center', marginTop: '120px', fontSize: '45px' }}>
        {problems.meta.name}
      </h2>

      {/* Button to reload the page whenever the user solves a question */}
      <Button variant="success" className="updateBtn" onClick={updateReload}>
        Update
      </Button>
      <div
        className="container-fluid"
        style={{
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          padding: '0rem 0rem',
        }}
      >
        {/* if it is first page dont display prev and first page pointers */}
        {problems.meta.current_page != 1 ? (
          <>
            <OverlayTrigger placement="top" overlay={renderTooltip1}>
              <a href={firstPage}>
                <FontAwesomeIcon
                  className="pageNavIcons"
                  icon={faAngleDoubleLeft}
                />
              </a>
            </OverlayTrigger>

            <OverlayTrigger placement="top" overlay={renderTooltip2}>
              <a href={prevPage}>
                <FontAwesomeIcon
                  className="pageNavIcons"
                  icon={faAngleLeft}
                  style={{ marginLeft: '13px' }}
                />
              </a>
            </OverlayTrigger>
          </>
        ) : (
          <></>
        )}

        {problems.meta.current_page === 1 ? (
          <div
            className="container-card marginLeftOfCards"
            style={{ marginTop: '75px' }}
          >
            {problems.result.map((ProblemData) => {
              count++
              if (ProblemData.solved === false && solvedBtn === -1) {
                solvedBtn = count
              }
              return (
                <>
                  {locked ? (
                    <MainCard
                      type={props.type}
                      count={20}
                      ProblemData={ProblemData}
                      solvedBtn={10}
                    />
                  ) : (
                    <MainCard
                      type={props.type}
                      count={count}
                      ProblemData={ProblemData}
                      solvedBtn={solvedBtn}
                    />
                  )}
                </>
              )
            })}
          </div>
        ) : problems.meta.current_page == problems.meta.last_page ? (
          <div className="container-card" style={{ marginTop: '75px' }}>
            {problems.result.map((ProblemData) => {
              count++
              if (ProblemData.solved === false && solvedBtn === -1) {
                solvedBtn = count
              }
              return (
                <>
                  {locked ? (
                    <MainCard
                      type={props.type}
                      count={20}
                      ProblemData={ProblemData}
                      solvedBtn={10}
                      last={'true'}
                    />
                  ) : (
                    <MainCard
                      type={props.type}
                      count={count}
                      ProblemData={ProblemData}
                      solvedBtn={solvedBtn}
                      last={'true'}
                    />
                  )}
                </>
              )
            })}
          </div>
        ) : (
          <div className="container-card" style={{ marginTop: '75px' }}>
            {problems.result.map((ProblemData) => {
              count++
              if (ProblemData.solved === false && solvedBtn === -1) {
                solvedBtn = count
              }
              return (
                <>
                  {locked ? (
                    <MainCard
                      type={props.type}
                      count={20}
                      ProblemData={ProblemData}
                      solvedBtn={10}
                    />
                  ) : (
                    <MainCard
                      type={props.type}
                      count={count}
                      ProblemData={ProblemData}
                      solvedBtn={solvedBtn}
                    />
                  )}
                </>
              )
            })}
          </div>
        )}

        {/* if it is last page, dont display last and next pointers */}
        {problems.meta.current_page != problems.meta.last_page ? (
          <>
            <OverlayTrigger placement="top" overlay={renderTooltip3}>
              <a href={nextPage} style={{ position: 'absolute', right: '7%' }}>
                <FontAwesomeIcon className="pageNavIcons" icon={faAngleRight} />
              </a>
            </OverlayTrigger>

            <OverlayTrigger placement="top" overlay={renderTooltip4}>
              <a href={lastPage} style={{ position: 'absolute', right: '2%' }}>
                <FontAwesomeIcon
                  className="pageNavIcons"
                  icon={faAngleDoubleRight}
                />
              </a>
            </OverlayTrigger>
          </>
        ) : (
          <></>
        )}
      </div>

      <FooterSmall />
    </div>
  )
}

export default function Downloads() {
  const [releases, setReleases] = useState([]);

  useEffect(() => {
    async function getReleases() {
      const response = await fetch(
        "https://api.github.com/repos/PGMDev/PGM/releases"
      );

      return setReleases(await response.json());
    }

    getReleases();
  }, []);

  return (
    <Layout title="Downloads">
      <div className={classnames("container", styles.downloads_container)}>
        <h1 className={styles.downloads_title}>Downloads</h1>
        {releases.length === 0 ? (
          <div className={classnames("hero", styles.spinner_hero)}>
            <div className={styles.lds_ripple}>
              <div></div>
              <div></div>
            </div>
          </div>
        ) : (
          <div
            className={classnames(
              "hero",
              styles.downloads_hero,
              styles.appearing
            )}
          >
            <div className="container row">
              <div className="col">
                <div className="row">
                  <img src="/img/shield.png" className={styles.pgm_logo} />
                  <div className={styles.pgm}>
                    <h1>PGM {releases[0].name}</h1>
                    <p>
                      <label>
                        {" "}
                        {format(
                          new Date(releases[0].published_at),
                          "LLLL do, yyyy"
                        )}{" "}
                      </label>
                    </p>
                    <a href={releases[0].html_url}>
                      Changelog <FontAwesomeIcon icon={faAngleRight} />
                    </a>
                  </div>
                </div>
                <div className={styles.description}>
                  <p>
                    Minecraft multiplayer game-server suite for managing PvP
                    matches across various gamemodes
                  </p>
                </div>
              </div>
              <div className={classnames("col col--4", styles.col_border)}>
                <h2>Download PGM</h2>
                <p>
                  PvP Game Manager (PGM) is a plugin that manages running and
                  instancing multiple PvP maps across various gamemodes for
                  Minecraft multiplayer.
                </p>
                <a
                  className={classnames(
                    "button button--primary",
                    styles.download_button
                  )}
                  href={releases[0].assets[0].browser_download_url}
                >
                  Download <FontAwesomeIcon icon={faArrowDown} />
                </a>
              </div>
              <div className={classnames("col col--4", styles.col_margin_left)}>
                <h2>Download SportPaper</h2>
                <p>
                  SportPaper is a Minecraft server jar based on Paper 1.8 tuned
                  for maximum performance and high intensity PvP. It is
                  mandatory and should run alongside PGM.
                </p>
                <a
                  className={classnames(
                    "button button--primary",
                    styles.download_button
                  )}
                  href={releases[0].assets[1].browser_download_url}
                >
                  Download <FontAwesomeIcon icon={faArrowDown} />
                </a>
              </div>
            </div>
          </div>
        )}
        <div className={styles.others}>
          <h2 style={{ marginBottom: "-15px" }}>Other Resources</h2>
          <div className="row">
            <div className={classnames("col col--6", styles.column)}>
              <div className={classnames("hero", styles.others_hero)}>
                <div className="col">
                  <div className="row">
                    <div className="col col--6">
                      <div className="row">
                        <h1 className={styles.others_icon}>
                          <FontAwesomeIcon icon={faCalendarAlt} />
                        </h1>
                        <div className={styles.others_header}>
                          <h2>Events</h2>
                          <a href="https://github.com/PGMDev/Events/">
                            <label>GitHub</label>
                          </a>
                        </div>
                      </div>
                    </div>
                    <div className="col col--6">
                      <a
                        className={classnames(
                          "button button--primary",
                          styles.others_button
                        )}
                        href="https://github.com/PGMDev/Events/releases/latest"
                      >
                        Download <FontAwesomeIcon icon={faArrowDown} />
                      </a>
                    </div>
                  </div>
                  <div className={styles.others_description}>
                    <p>
                      Events is the official PGM plugin for managing PvP matches
                      in a competitive setting. Upon joining or cycling, all
                      team members are forced onto their respective teams.
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div className={classnames("col col--6", styles.column)}>
              <div className={classnames("hero", styles.others_hero)}>
                <div className="col">
                  <div className="row">
                    <div className="col col--6">
                      <div className="row">
                        <h1 className={styles.others_icon}>
                          <FontAwesomeIcon icon={faUsers} />
                        </h1>
                        <div className={styles.others_header}>
                          <h2>Community</h2>
                          <a href="https://github.com/PGMDev/Community/">
                            <label>GitHub</label>
                          </a>
                        </div>
                      </div>
                    </div>
                    <div className="col col--6">
                      <button
                        className={classnames(
                          "button disabled button--primary",
                          styles.others_button
                        )}
                      >
                        Coming Soon <FontAwesomeIcon icon={faArrowDown} />
                      </button>
                    </div>
                  </div>
                  <div className={styles.others_description}>
                    <p>
                      Community is a standalone plugin for managing PGM servers.
                      It includes various PGM features, such as punishments,
                      moderation, freezing and other aspects.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <hr style={{ marginTop: "40px", marginBottom: "10px" }} />
          <div className="row">
            <div className={classnames("col col--6", styles.column)}>
              <div className={classnames("hero", styles.others_hero)}>
                <div className="col">
                  <div className="row">
                    <div className="col col--6">
                      <div className="row">
                        <h1 className={styles.others_icon}>
                          <FontAwesomeIcon icon={faFolderOpen} />
                        </h1>
                        <div className={styles.others_header}>
                          <h2>ResourcePile</h2>
                          <a href="https://github.com/MCResourcePile">
                            <label>GitHub</label>
                          </a>
                        </div>
                      </div>
                    </div>
                    <div className="col col--6">
                      <a
                        className={classnames(
                          "button button--primary",
                          styles.others_button
                        )}
                        href="https://mcresourcepile.github.io"
                      >
                        Visit <FontAwesomeIcon icon={faFolderOpen} />
                      </a>
                    </div>
                  </div>
                  <div className={styles.others_description}>
                    <p>
                      ResourcePile is a community project which aims to provide
                      various collections of resources, such as maps or
                      statistics, for users with backgrounds in Overcast and
                      similar networks.
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div className={classnames("col col--6", styles.column)}>
              <div className={classnames("hero", styles.others_hero)}>
                <div className="col">
                  <div className="row">
                    <div className="col col--6">
                      <div className="row">
                        <h1 className={styles.others_icon}>
                          <FontAwesomeIcon icon={faCompass} />
                        </h1>
                        <div className={styles.others_header}>
                          <h2>PGM Tracker</h2>
                          <a href="https://pgm.fyi">
                            <label>Website</label>
                          </a>
                        </div>
                      </div>
                    </div>
                    <div className="col col--6">
                      <a
                        className={classnames(
                          "button button--primary",
                          styles.others_button
                        )}
                        href="https://pgm.fyi"
                      >
                        Visit <FontAwesomeIcon icon={faCompass} />
                      </a>
                    </div>
                  </div>
                  <div className={styles.others_description}>
                    <p>
                      PGM Tracker is a community tool made by{" "}
                      <a href="https://github.com/applenick">applenick</a> that
                      tracks public PGM servers. Take a look at it, play a
                      variety of Minecraft PvP maps and get involved with
                      development!
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
}