react-icons/fa#FaStar JavaScript Examples

starRating = (props) => {
	return (
		<div>
			{[...Array(5)].map((star) => {
				return (
					<>
						<input type="radio" name="rating"></input>
						<FaStar className="star" size={50} />
					</>
				);
			})}
		</div>
	);
}

export default function Stars(props) {
	const [rating, setRating] = useState(null);
	const dispatch = useDispatch();
	const user = useSelector((state) => state.User);

	const handleStars = (name, value) => {
		setRating(value);
		dispatch(setFeedback(name, value));
	};
	return (
		<div>
			{[...Array(5)].map((_, i) => {
				const ratingValue = ++i;
				return (
					<label>
						<input type="radio" name="rating" onClick={() => handleStars(props.values, ratingValue)}></input>
						<FaStar className="star" color={ratingValue <= rating ? "yellow" : "grey"} size={30} value={ratingValue} />
					</label>
				);
			})}
		</div>
	);
}

getRating(rating) {
    if (rating === 1) {
      console.log(this.state);
      return <FaStar />;
    }
    if (rating === 2) {
      return <div><FaStar/> <FaStar/></div>;
    } if (rating === 3) {
      return <div><FaStar/> <FaStar/> <FaStar/></div>;
    } if (rating === 4) {
      return <div><FaStar/> <FaStar/> <FaStar/> <FaStar/></div>;
    }
    return <div><FaStar/> <FaStar/> <FaStar/> <FaStar/> <FaStar/></div>;
  }

export function FeedbackForm({ videoId, videoOwnerId, submitFeedback, isSubmitting, all }) {
	const [feedback, setFeedback] = useState({
		post: "",
	});
	const uid = useSelector((state) => state.User.userId);
	const [rating, setRating] = useState(null);

	const handleInput = (e) => {
		setFeedback({ ...feedback, [e.target.name]: e.target.value });
	};

	const handleSubmit = (e) => {
		e.preventDefault();
		if (feedback.post) {
			submitFeedback(videoId, feedback, uid);

			axiosWithAuth()
				.post(`/email`, {
					id: videoOwnerId,
					post: feedback.post,
				})
				.then((hello) => {
					console.log("submitted email");
				})
				.catch((err) => {
					console.log("error", err);
				});
			setFeedback({ post: "" });
		}
	};

	return (
		<Form layout="vertical" onSubmit={handleSubmit}>
			<Form.Item>
				{[...Array(5)].map((_, i) => {
					const ratingValue = ++i;
					return (
						<label>
							<input type="radio" name="rating" onClick={() => setRating(ratingValue)}></input>
							<FaStar
								className="star"
								color={ratingValue <= rating ? "yellow" : "grey"}
								size={30}
								value={ratingValue}
							/>
						</label>
					);
				})}
			</Form.Item>
			<Form.Item label="Feedback">
				<TextArea name="post" rows={4} value={feedback.post} onChange={handleInput}></TextArea>
			</Form.Item>
			<Form.Item>
				<Button
					loading={isSubmitting}
					type="primary"
					htmlType="submit"
					className="feedback-form-button"
					disabled={!feedback.post ? true : false}>
					Submit Feedback
				</Button>
			</Form.Item>
		</Form>
	);
}

AddShopToCartButton = ({ details }) => {
    const [globalState, globalActions] = useGlobal();
    const [showDialog, setShowDialog] = React.useState(false);
    const openDialog = () => {
        setShowDialog(true);
    }
    const closeDialog = () => setShowDialog(false);

    React.useEffect(() => {
        const allStores = globalState.cfSavedStoresList['stores'];
        if (globalState.authenticated && !allStores) {
            globalActions.getSavedStores();
        }
    }, [globalState.cfSavedStoresList['stores'], globalState.authenticated]);

    const saveShop = () => {
        if (globalActions.findInSavedStores(details)) return;
        const shopToSave = {
            emprezzoID: details.emprezzoID,
            shopName: details.storeName,
            photo: details.storeProfileImage,
            productURL: details.storeURL,
            description: details.description,
        }
        globalActions.addToSavedStores(shopToSave);
        openDialog();
    }

    return (
        <div style={{display: "inline", fontSize: "x-large"}}>
            <button onClick={globalState.authenticated ? saveShop : globalActions.openAuthDialog} style={{cursor: "pointer", backgroundColor: "white", color:"#C04CFD", border: "white", outline: "none"}}>
                {globalActions.findInSavedStores(details) && <FaStar />}
                {!globalActions.findInSavedStores(details) && <FaRegStar />}
            </button>
            <ShopifyAuthentication />
            <Dialog isOpen={showDialog} onDismiss={closeDialog}>
                <button className="close-button" onClick={closeDialog} style={{ float: "right", cursor: "pointer" }}>
                    <span aria-hidden>X</span>
                </button>
                <div>Store saved Successfully. <br /><a href="/savedstores">Click Here</a> to see the saved store list</div>
                <br />
                <div>
                    <button className="button" onClick={() => { closeDialog(); }}>Close</button>
                </div>
            </Dialog>
        </div>
    );
}

export default function Tool({ tool }) {
  const { githubStats } = tool.fields
  return (
    <div tw="my-3 flex border-b border-gray-200 pb-6">
      <div tw="flex-none w-12">
        <Vote sum={tool.children[0].sum} k={tool.children[0].key} />
      </div>

      <div tw="flex-auto pl-5">
        <Link to={tool.fields.slug} tw="pb-4 flex">
          <h4 tw="font-bold text-xl mb-3">{tool.name}</h4>
          <ul tw="list-none flex ml-2 mt-1">
            {tool.types.map(t => (
              <li tw="mb-2 mr-1 w-6" key={`${t}-types`}>
                <img src={`/icons/${t}.svg`} alt={`Type: ${t}`} />
              </li>
            ))}
          </ul>
          {githubStats.stargazers_count ? (
            <div tw="w-full text-right">
              <FaStar tw="mb-1  inline-block" />{" "}
              {githubStats.stargazers_count || ""}
            </div>
          ) : (
            ""
          )}
        </Link>
        <p tw="text-gray-600 mb-3">{tool.description}</p>
        <div>
          <ul tw="list-none max-w-sm inline-block align-top">
            {tool.tags.map(tag => (
              <li tw="mb-2 mr-1 inline-block" key={`${tool.fields.slug}${tag}`}>
                <a href={"/tag/" + tag}>
                  <span tw="bg-gray-300 hover:bg-gray-400 px-2 py-1 rounded">
                    {tag}
                  </span>
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  )
}

export default function Star({ selected = false }) {
  return (
    <>
      <h1>Great Star</h1>
      <FaStar id="star" color={selected ? "red" : "grey"} />
    </>
  );
}

export default function Star({ selected = false, onSelect = (f) => f }) {
  return <FaStar color={selected ? "red" : "grey"} onClick={onSelect} />;
}

ReviewsHeader = (props) => {
  const {
    reviewsForItem, reviewsForShop, reviewsTab, handleClick, handleSortClick,
    handleDropdown, dropdown, handleSortNewest, handleSortRecommended, sortName,
  } = props;
  if (sortName === 'Newest') {
    return (
      <ReviewsHeaderContainer reviewsTab={reviewsTab} dropdown={dropdown} className="ReviewsHeaderContainer">
        <div>
          <h3 className="reviews-total">
            {reviewsForShop.length} reviews <span id="reviews-title-stars"><FaStar/> <FaStar/> <FaStar/> <FaStar/> <FaStar/></span>
          </h3>
          <div className="reviews-tab-items">
            <div className="reviews-tab-list" id="reviews-tab-list">
              <button type="button" className="reviewsTabItem" tabIndex="0" role="tab" value="reviewsItem" onClick={handleClick}>Reviews for this item <span id="reviews-ratings">{reviewsForItem.length}</span></button>
              <button type="button" className="reviewsTabShop" tabIndex="0" role="tab" value="reviewsShop" onClick={handleClick}>Reviews for this shop <span id="reviews-ratings">{reviewsForShop.length}</span></button>
            </div>
          </div>
        </div>
        <div className="reviews-sort">
          <div className="reviews-sort-items">
            <button type="button" className="reviews-sort-title" onClick={handleDropdown}>
              Sort by: {sortName} <FaCaretDown />
            </button>
            <div className="reviews-dropdown-content">
              <div className="reviews-sort-dropdown-1" onClick={handleSortRecommended}>Recommended</div>
              <br></br>
              <div className="reviews-sort-dropdown-2"onClick={handleSortNewest}>Newest <span id="reviews-dropdown-check"><FaCheck/></span></div>
            </div>
          </div>
        </div>
      </ReviewsHeaderContainer>
    );
  }
  return (
    <ReviewsHeaderContainer reviewsTab={reviewsTab} dropdown={dropdown} className="ReviewsHeaderContainer">
      <div>
        <h3 className="reviews-total">
          {reviewsForShop.length} reviews <span id="reviews-title-stars"><FaStar/> <FaStar/> <FaStar/> <FaStar/> <FaStar/></span>
        </h3>
        <div className="reviews-tab-items">
          <div className="reviews-tab-list" id="reviews-tab-list">
            <button type="button" className="reviewsTabItem" tabIndex="0" role="tab" value="reviewsItem" onClick={handleClick}>Reviews for this item <span id="reviews-ratings">{reviewsForItem.length}</span></button>
            <button type="button" className="reviewsTabShop" tabIndex="0" role="tab" value="reviewsShop" onClick={handleClick}>Reviews for this shop <span id="reviews-ratings">{reviewsForShop.length}</span></button>
          </div>
        </div>
      </div>
      <div className="reviews-sort">
        <div className="reviews-sort-items">
          <button type="button" className="reviews-sort-title" onClick={handleDropdown}>
            Sort by: {sortName} <FaCaretDown />
          </button>
          <div className="reviews-dropdown-content">
            <a className="reviews-sort-dropdown-1" onClick={handleSortRecommended}>Recommended <span id="reviews-dropdown-check"><FaCheck/></span></a>
            <br></br>
            <a className="reviews-sort-dropdown-2"onClick={handleSortNewest}>Newest</a>
          </div>
        </div>
      </div>
    </ReviewsHeaderContainer>
  );
}

Contact = ({ contact, contactKey }) => {
  const { dispatch } = useContext(ContactContext)
  const history = useHistory();

  const deleteContact = () => {
    firebase
      .database()
      .ref(`/contacts/${contactKey}`)
      .remove()
      .then(() => {
        toast("Deleted Successfully.", { type: 'success' })
      })
      .catch(err => console.log(err))
  };

  const updateImpContact = () => {
    firebase
      .database()
      .ref(`/contacts/${contactKey}`)
      .update(
        {
          star: !contact.star
        },
        err => {
          console.log(err)
        }
      )
      .then(() => {
        toast("Contact Updated", { type: "info" })
      })
      .catch(err => console.log(err))
  };

  const updateContact = () => {
    dispatch({
      type: CONTACT_TO_UPDATE,
      payload: contact,
      key: contactKey
    })

    history.push("/contact/add");
  };

  const viewSingleContact = contact => {
    dispatch({
      type: SET_SINGLE_CONTACT,
      payload: contact
    })

    history.push("/contact/view");
  };

  return (
    <>
      <Row>
        <Col
          md="1"
          className="d-flex justify-content-center align-items-center"
        >
          <div className="icon" onClick={() => updateImpContact()}>
            {contact.star ? (
              <FaStar className=" text-primary" />
            ) : (
              <FaRegStar className=" text-info" />
            )}
          </div>
        </Col>
        <Col
          md="2"
          className="d-flex justify-content-center align-items-center"
        >
          <img src={contact.picture} alt="" className="img-circle profile" />
        </Col>
        <Col md="8" onClick={() => viewSingleContact(contact)}>
          <div className="text-primary">{contact.name}</div>

          <div className="text-secondary">{contact.phoneNumber}</div>
          <div className="text-secondary">{contact.email} </div>

          <div className="text-info">{contact.address}</div>
        </Col>
        <Col
          md="1"
          className="d-flex justify-content-center align-items-center"
        >
          <MdDelete
            onClick={() => deleteContact()}
            color="danger"
            className="text-danger icon"
          />
          <MdEdit
            className="icon text-info ml-2"
            onClick={() => updateContact()}
          />
        </Col>
      </Row>
    </>
  );
}

export default function Tool(d) {
  const tool = d.data.toolsYaml
  const introText = getIntroText(tool)
  const metaDescription = getMetaDescription(tool)
  const similarTools = getSimilarTools(tool, d.data.allToolsYaml.nodes, 5)
  const freeTools = getFreeTools(tool, d.data.allToolsYaml.nodes, 5)
  return (
    <Layout>
      <Helmet>
        <meta charSet="utf-8" />
        <meta name="description" content={metaDescription} />
        <title>
          {tool.name} - {introText}
        </title>
      </Helmet>
      <article tw="shadow w-full">
        <div tw="bg-white flex justify-start p-2 md:p-6 w-full">
          <div tw="md:w-12 flex-none">
            <Vote k={tool.children[0].key} sum={tool.children[0].sum} />
          </div>
          <div tw="pl-2">
            <a tw="hover:underline" href={tool.homepage}>
              <h1 tw="text-3xl font-semibold mb-5">{tool.name}</h1>
            </a>
            <p tw="pb-3">{tool.description}</p>
          </div>
        </div>
        <div tw="px-4 md:pl-20 md:pr-6">
          {tool.fields.githubStats.stargazers_count && (
            <div tw="flex">
              <a tw="hover:underline" href={tool.source}>
                Github:
              </a>
              <ul tw="ml-2 mb-2">
                <span tw="mr-3" href={tool.source}>
                  <FaStar tw="mb-1 mr-2 inline-block" />
                  {tool.fields.githubStats.stargazers_count}
                </span>
                <span tw="mr-3" href={tool.source}>
                  <FaEye tw="mb-1 mr-2 inline-block" />
                  {tool.fields.githubStats.watchers_count}
                </span>
                <span tw="mr-3" href={tool.source}>
                  <FaExclamationCircle tw="mb-1 mr-2 inline-block" />
                  {tool.fields.githubStats.open_issues_count}
                </span>
                <span tw="mr-3" href={tool.source}>
                  <FaCodeBranch tw="mb-1 mr-2 inline-block" />
                  {tool.fields.githubStats.forks_count}
                </span>
                <span tw="mr-3" href={tool.source}>
                  <FaCalendarAlt tw="mb-1 mr-2 inline-block" />
                  {tool.fields.githubStats.created_at}
                </span>
              </ul>
            </div>
          )}
          <div tw="flex mb-8">
            <span>Workflow integration:</span>
            <ul tw="flex">
              {tool.types.map(t => (
                <li tw="flex" key={t}>
                  <img
                    tw="self-start object-contain ml-2 w-6"
                    src={`/icons/${t}.svg`}
                    alt={`Type: ${t}`}
                  />
                  <div tw="flex-1">{t}</div>
                </li>
              ))}
            </ul>
          </div>
          <MainMedia tool={tool} />
          <p tw="mb-3">
            <FaHome tw="mb-1 mr-2 inline-block" />
            <a tw="underline" href={tool.homepage}>
              Official {tool.name} Homepage
            </a>
          </p>
          {tool.source && (
            <p tw="mb-3">
              <FaLink tw="mb-1 mr-2 inline-block" />
              <a tw="underline" href={tool.source}>
                {tool.source}
              </a>
            </p>
          )}
          {tool.license ? (
            <p tw="mb-3">
              <FaCopyright tw="mb-1 mr-2 inline-block" /> {tool.license}{" "}
            </p>
          ) : (
            <p tw="mb-3">
              <FaOsi tw="mb-1 mr-2 inline-block" />{" "}
              {tool.fields.githubStats.license
                ? tool.fields.githubStats.license.name
                : "Open Source"}
            </p>
          )}
          {tool.deprecated ? (
            <p tw="mb-3">
              <FaExclamationCircle tw="text-red-500 mb-1 mr-2 inline-block" />{" "}
              <span tw="text-red-800">Deprecated/Unmaintained </span>
            </p>
          ) : (
            <p tw="mb-3">
              <FaCheckCircle tw="mb-1 mr-2 inline-block" /> Maintained
            </p>
          )}
          <div>
            <FaTags tw="mb-1 mr-2 inline-block align-top" />
            <ul tw="list-none max-w-sm inline-block align-top">
              {tool.tags.map(tag => (
                <li tw="mb-2 mr-1 inline-block" key={tag}>
                  <a href={"/tag/" + tag}>
                    <span tw="bg-gray-300 hover:bg-gray-400 px-2 py-1 rounded">
                      {tag}
                    </span>
                  </a>
                </li>
              ))}
            </ul>
          </div>
          {tool.resources && (
            <div tw="mb-4">
              <h3 tw="mt-3 mb-2 font-bold">More Resources</h3>
              <ul tw="list-disc">
                {tool.resources.map(resource => (
                  <li tw="underline ml-4 py-1" key={resource.title}>
                    <a href={resource.url}>{resource.title}</a>
                  </li>
                ))}
              </ul>
            </div>
          )}
          {freeTools.length > 0 && (
            <div tw="mb-4">
              <h3 tw="mt-3 mb-2 text-3xl font-semibold">
                Free/OSS Alterantives
              </h3>
              <ul tw="list-disc">
                {freeTools.map(tool => (
                  <li key={`${tool.slug}-free`} tw="list-none">
                    <span tw="rounded-full px-4 mr-4 mb-3 bg-yellow-300 text-white p-2 rounded-full leading-none inline-block">
                      {tool.votes}
                    </span>
                    <Link to={tool.slug}>{tool.name}</Link>
                  </li>
                ))}
              </ul>
            </div>
          )}
          {similarTools.length > 0 && (
            <div tw="mb-4">
              <h3 tw="mt-3 mb-2 text-xl font-semibold">Alternative Tools</h3>
              <ul tw="list-disc">
                {similarTools.map(tool => (
                  <li key={`${tool.slug}-similar`} tw="list-none">
                    <span tw="rounded-full px-4 mr-4 mb-3 bg-yellow-300 text-white p-2 rounded-full leading-none inline-block">
                      {tool.votes}
                    </span>
                    <Link to={tool.slug}>{tool.name}</Link>
                  </li>
                ))}
              </ul>
            </div>
          )}
          <div>
            <Utterances
              repo="analysis-tools-dev/website-comments"
              issueTerm="pathname"
              label=""
              theme="github-light"
              crossorigin="anonymous"
              async={false}
              style={`
            & .utterances {
              max-width: 950px;
            }
          `}
            />
          </div>
        </div>
      </article>
    </Layout>
  )
}