@fortawesome/react-fontawesome#FontAwesomeIcon JavaScript Examples
The following examples show how to use
@fortawesome/react-fontawesome#FontAwesomeIcon.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ActivityPreviewCardDropdown.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 6 votes |
|
ActivityPreviewCardDropdown = (props) => {
const {
showLti,
shared,
activity,
projectId,
playlistId,
} = props;
return (
<Dropdown.Item
as={Link}
style={{ borderBottom: '1px solid #eee', padding: '10px' }}
to={
shared
? `/playlist/${playlistId}/activity/${activity.id}/preview`
: (
showLti
? `/playlist/${playlistId}/activity/${activity.id}/preview/lti`
: `/project/${projectId}/playlist/${playlistId}/activity/${activity.id}/preview`
)
}
>
<div className="d-flex align-items-center">
<FontAwesomeIcon icon="play-circle" />
<div className="ml-2 title" style={{ whiteSpace: 'normal' }}>{activity.title}</div>
</div>
</Dropdown.Item>
);
}
Example #2
| Source File: author.js From blog with Apache License 2.0 | 6 votes |
|
GitHubLink = (props) => {
if (!props.name) {
return null;
}
return (
<a className="no-underline" href={`https://github.com/${props.name}`}><FontAwesomeIcon icon={["fab", "github"]} /></a>
);
}
Example #3
| Source File: ResetPassword.js From Next.js-e-commerce-online-store with MIT License | 6 votes |
|
export default function ResetPassword({ hideResetPassword }) {
return (
<DivResetPassword className="border-left border-bottom border-right">
<button className="btn btn-light" onClick={hideResetPassword}>
<FontAwesomeIcon icon={faArrowLeft} width="1em" /> Go back
</button>
<form onSubmit={() => alert('We\'ve sent your new password to you.')}>
<label>
Email:
<input type="email" required />
</label>
<button type="submit">
{" "}Reset Password{" "}
</button>
</form>
</DivResetPassword>
)
}
Example #4
| Source File: Footer.js From viade_en1b with MIT License | 6 votes |
|
Footer = () => {
return (
<div data-testid="footer" id="footer">
<div className="footerElement">
<b data-testid="footer-dev"><FormattedMessage id="DevTeam"/> </b> Viade_en1b{" "}
</div>
<div className="footerElement">
<a
data-testid="footer-github"
href="https://github.com/Arquisoft/viade_en1b"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon id="githubIcon" icon={faGithub} />
</a>
</div>
<div className="footerElement">
<a
data-testid="footer-react"
href="https://lamasumas.github.io/Solid/"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon id="githubIcon" icon={faBook} />
</a>
</div>
<div className="footerElement">
<a
data-testid="footer-react"
href="https://reactjs.org/"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon id="githubIcon" icon={faReact} />
</a>
</div>
</div>
);
}
Example #5
| Source File: index.js From viade_es2a with BSD 2-Clause "Simplified" License | 6 votes |
|
AutoSaveSpinner = memo(({ inProgress, result, setResult, setSavingProcess }) => {
const [timer, setTimer] = useState(null);
useEffect(
() => () => {
clearTimeout(timer);
},
[]
);
useEffect(() => {
if (result) {
if (timer) clearTimeout(timer);
if (result.toLowerCase() === 'success') {
setTimer(
setTimeout(() => {
setResult(null);
setSavingProcess(false);
}, 2000)
);
}
}
}, [result]);
return (
<AutoSaveSpinnerWrapper>
{inProgress && (
<div>
<FontAwesomeIcon icon="spinner" spin />
</div>
)}
{result && !inProgress && (
<div>
{result.toLowerCase() === 'success' && <FontAwesomeIcon icon="check-circle" />}
{result.toLowerCase() === 'error' && <FontAwesomeIcon icon="exclamation-triangle" />}
</div>
)}
</AutoSaveSpinnerWrapper>
);
})
Example #6
| Source File: DeckStatusSummary.jsx From ashteki with GNU Affero General Public License v3.0 | 6 votes |
|
DeckStatusSummary = ({ status }) => {
let { basicRules, hasConjurations, tenDice, uniques } = status;
let items = [
{ title: 'Basic rules (deck size)', value: basicRules },
{ title: 'Conjurations included', value: hasConjurations },
{ title: 'Ten dice', value: tenDice },
{ title: 'Phoenixborn unique cards', value: uniques }
];
return (
<ul className='deck-status-summary'>
{items.map((item, index) => (
<li className={item.value ? 'valid' : 'invalid'} key={index}>
<FontAwesomeIcon icon={item.value ? faCheck : faTimes} />
<Trans>{item.title}</Trans>
</li>
))}
</ul>
);
}
Example #7
| Source File: AddCupBtn.js From ponce-tournois-mario-kart with MIT License | 6 votes |
|
function AddCupBtn({ setCreating }) {
return (
<Col xs={6} md={4} lg={2} onClick={() => setCreating(true)}>
<div className="cupsList__cup">
<FontAwesomeIcon
icon={faPlus}
className="cupsList__addCupIcon"
/>
Ajouter
</div>
</Col>
);
}
Example #8
| Source File: AmcatAssess.js From GB-GCGC with MIT License | 6 votes |
|
render(){
return(
<tr>
<td>{this.props.obj.sno}</td>
<td align="left">{this.props.obj.assessment}</td>
<td>{this.props.obj.YOP}</td>
<td>{this.props.obj.Date}</td>
<td>{this.props.obj.attended}</td>
<td>{this.props.obj.absent}</td>
<td>{this.props.obj.max}</td>
<td>{this.props.obj.avg}</td>
<td>{this.props.obj.min}</td>
<td>
<Tooltip title="Students" placement="right">
<Link to={"/user/"+this.props.obj.id} ><FontAwesomeIcon icon={faUser} className="ml-2 p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/></Link>
</Tooltip>
</td>
</tr>
);
}
Example #9
| Source File: Icon.js From beautiful-react-ui with MIT License | 6 votes |
|
Icon = ({ name, color, size, className, ...rest }) => {
const classList = classNames('bi bi-icon', `${color ? `icon-${color}` : ''}`, className);
let faSize;
if (size === 'small') {
faSize = 'sm';
}
if (size === 'large') {
faSize = 'lg';
}
return (<FontAwesomeIcon icon={name} size={faSize} className={classList} fixedWidth {...rest} />);
}
Example #10
| Source File: MetaOptions.js From Designer-Client with GNU General Public License v3.0 | 6 votes |
|
export function MetaOptions(props) {
const classes = useStyles();
return (
<div>
<MetaSchemaTitle img={logoImg} title='API 설정' />
<div className={classes.root}>
<FontAwesomeIcon icon={faLaptopCode} className={classes.fontIcon} />
API 상세 설명
<Paper>
feij
</Paper>
</div>
</div>
)
}
Example #11
| Source File: index.js From dnp-website with MIT License | 6 votes |
|
render() {
return (
<nav className={styles.navbar}>
<ul className={styles.dropdown}>
{dropdowns.map(dropdown => {
return (
<a
href={`#${dropdown}-title`}
onClick={() => {
this.boldButton(dropdown)
}}
className={classNames(styles.listSet, {
[styles.listSetBold]: this.state.bold === dropdown,
})}
>
<div>
{this.state.selectedLink && this.state.bold === dropdown ? (
<FontAwesomeIcon
icon={faArrowRight}
className={styles.dropdownArrow}
/>
) : (
""
)}
{dropdown}
</div>
</a>
)
})}
</ul>
</nav>
)
}
Example #12
| Source File: index.jsx From defizap-frontend with GNU General Public License v2.0 | 6 votes |
|
Confirmed = props => (
<div className="container loading">
<div className="row">
<div className="col-md-12 text-center pt-4">
<FontAwesomeIcon size="2x" color="green" icon={faCheckCircle} />
{props.txId ? (
<>
<Row className="justify-content-center">
<a
href={`https://etherscan.io/tx/${props.txId}`}
rel="noopener noreferrer"
target="_blank"
>
View Transaction on Etherscan
</a>
</Row>
<Row className="justify-content-center">
<a
href="https://twitter.com/intent/tweet?text=I%20just%20got%20instant%20access%20to&hashtags=defi&via=DeFi_Zap"
target="_blank"
rel="noopener noreferrer"
>
Tweet it out{' '}
<FontAwesomeIcon size="lg" color="#1DA1F2" icon={faTwitter} />
</a>
</Row>
</>
) : null}
</div>
</div>
</div>
)
Example #13
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
function CompleteProfileAlert() {
const _MS_PER_DAY = 1000 * 60 * 60 * 24;
// a and b are javascript Date objects
function dateDiffInDays(dateStored) {
const previousDate = new Date(dateStored);
const todaysDate = new Date();
const diffTime = Math.abs(todaysDate - previousDate);
const diffDays = Math.ceil(diffTime / (_MS_PER_DAY));
return diffDays;
}
const time = localStorage.getItem('alertclosetime');
let flag;
if (!time) {
flag = true;
} else if (dateDiffInDays(time) > 7) {
flag = true;
localStorage.removeItem('alertclosetime');
} else {
flag = false;
}
const [display, setDisplay] = useState(flag);
const hideAlert = () => {
setDisplay(false);
const date = new Date();
// const day = date.getDate();
// const month = date.getMonth();
// const year = date.getFullYear();
// localStorage.setItem('alertclosetime', `${day}/${month + 1}/${year}`);
localStorage.setItem('alertclosetime', date);
};
return (
<div>
<Alert className="alert" variant="warning" style={{ display: display ? 'block' : 'none' }}>
<FontAwesomeIcon className="close" icon="window-close" onClick={hideAlert} />
Your organization name is missing in the profile, Kindly go to My Account to update your
<Link className="goto-button" to="/account">profile info.</Link>
</Alert>
</div>
);
}
Example #14
| Source File: socialbar.js From blog with Apache License 2.0 | 5 votes |
|
SocialBar = () => {
return (
<>
<div id="header-social-bar" style={socialIconStyle}>
<div className="social-icon align-center inline-block" style={{ margin: "0 0.35rem" }}>
<Link to={"/rss.xml"} className="light-link no-underline">
<span className={`${faLayerStyleHover} fa-layers`}>
<FontAwesomeIcon className="fa-social-icon" size="1x" icon={["fas", "rss"]} style={faSocialIconStyle} />
</span>
</Link>
</div>
<div className="social-icon align-center inline-block" style={{ margin: "0 0.35rem" }}>
<a
href="https://twitter.com/adoptium"
target="_blank"
rel="noopener noreferrer"
className="light-link no-underline"
>
<span className={`${faLayerStyleHover} fa-layers`}>
<FontAwesomeIcon className="fa-social-icon" size="1x" icon={["fab", "twitter"]} style={faSocialIconStyle} />
</span>
</a>
</div>
<div className="social-icon align-center inline-block" style={{ margin: "0 0.35rem" }}>
<a
href="https://www.facebook.com/adoptopenjdk"
target="_blank"
rel="noopener noreferrer"
className="light-link no-underline"
>
<span className={`${faLayerStyleHover} fa-layers`}>
<FontAwesomeIcon className="fa-social-icon" size="1x" icon={["fab", "facebook"]} style={faSocialIconStyle} />
</span>
</a>
</div>
<div className="social-icon align-center inline-block" style={{ margin: "0 0.35rem" }}>
<a
href="https://www.youtube.com/c/EclipseAdoptium"
target="_blank"
rel="noopener noreferrer"
className="light-link no-underline"
>
<span className={`${faLayerStyleHover} fa-layers`}>
<FontAwesomeIcon className="fa-social-icon" size="1x" icon={["fab", "youtube"]} style={faSocialIconStyle}/>
</span>
</a>
</div>
<div className="social-icon align-center inline-block" style={{ margin: "0 0.35rem" }}>
<a
href="https://www.twitch.tv/adoptopenjdk"
target="_blank"
rel="noopener noreferrer"
className="light-link no-underline"
>
<span className={`${faLayerStyleHover} fa-layers`}>
<FontAwesomeIcon className="fa-social-icon" size="1x" icon={["fab", "twitch"]} style={faSocialIconStyle} />
</span>
</a>
</div>
</div>
</>
);
}
Example #15
| Source File: image-profile.component.js From viade_es2a with BSD 2-Clause "Simplified" License | 5 votes |
|
ImageProfile = (props: Props) => {
const {
uploadedFiles,
photo: img,
overrideEventDefaults,
onDragLeave,
onDragEnter,
onDrop,
onClickFile,
text,
inProgress,
uploadingText
} = props;
const photo =
uploadedFiles && uploadedFiles.length > 0 ? uploadedFiles[uploadedFiles.length - 1].uri : img;
return (
<ImageProfileWrapper
{...{
onDragStart: overrideEventDefaults,
onDragOver: overrideEventDefaults,
onDragEnd: overrideEventDefaults,
onDrag: overrideEventDefaults,
onDragLeave,
onDragEnter,
onDrop,
style: photo && photo !== '' && { backgroundImage: `url(${photo})` }
}}
>
<ButtonStyled onClick={onClickFile} className="button-upload">
<FontAwesomeIcon icon="upload" className="upload-icon" />
{text}
</ButtonStyled>
{inProgress && (
<ImageProfileLoader className="image-profile-loader">
<FontAwesomeIcon icon="spinner" spin size="2x" />
<LoaderText>{uploadingText}</LoaderText>
</ImageProfileLoader>
)}
</ImageProfileWrapper>
);
}
Example #16
| Source File: ServerStatus.jsx From ashteki with GNU Affero General Public License v3.0 | 5 votes |
|
ServerStatus = (props) => {
const { connecting, connected, responseTime, serverType } = props;
const { t } = useTranslation();
let className = '';
let toolTip = `${serverType} is`;
let pingText;
let icon = faCheckCircle;
let splash = null;
if (connected) {
className += ' text-success';
toolTip += ' connected';
let pingClass;
if (responseTime === undefined) {
pingText = <span>{t('Waiting for ping')}</span>;
} else {
if (responseTime < 150) {
pingClass = 'text-success';
} else if (responseTime < 300) {
pingClass = 'text-warning';
} else {
pingClass = 'text-danger';
}
pingText = (
<React.Fragment>
<span>{serverType}: </span>
<span className={pingClass}>{responseTime}ms</span>
</React.Fragment>
);
}
} else if (connecting) {
className += ' text-warning';
icon = faTimesCircle;
toolTip += ' connecting';
pingText = (
<React.Fragment>
<span>{serverType}: </span>
<span className='text-warning'>{t('Connecting')}</span>
</React.Fragment>
);
} else {
className += ' text-danger';
icon = faBan;
toolTip += ' disconnected';
pingText = (
<React.Fragment>
<span>{serverType}: </span>
<span className='text-danger'>{t('Disconnected')}</span>
</React.Fragment>
);
splash = <div className='disconnect-splash panel'><span className='text-danger'>Disconnected!</span></div>
}
return (
<li className='server-status'>
{pingText}
<span className={className}>
<FontAwesomeIcon icon={icon} title={t(toolTip)} />
</span>
{splash}
</li>
);
}
Example #17
| Source File: ClientInfo.js From schematic-capture-fe with MIT License | 5 votes |
|
ClientInfo = (props) => {
const [details, setDetails] = useState(false);
const toggle = () => setDetails(!details);
const clientInfo = props.info
const formatToPhone = phone => {
const zip = phone.substring(0, 3)
const middle = phone.substring(3, 6)
const last = phone.substring(6, 10)
if (phone.length !== 10) {
return phone;
}
return `(${zip}) ${middle}-${last}`
}
let phone = formatToPhone(clientInfo.phone)
if (details === true) {
return (
<>
<DetailsBtn2 onClick={toggle}>View Details</DetailsBtn2>
<Container>
<Mod isOpen={details} toggle={toggle}>
<MH1 data-cy="assign-tech-header">{clientInfo.companyName}</MH1>
<hr></hr>
<MBody>
<SpaceBetween>
<div>
<BorderedDiv>
<FontAwesomeIcon icon={faPhone} />
<MDiv>
<p>{phone}</p>
</MDiv>
</BorderedDiv>
<BorderedDiv>
<FontAwesomeIcon icon={faMapMarkerAlt} />
<MDiv>
<p>{clientInfo.street}</p>
<p>{clientInfo.city}</p>
<p>{clientInfo.state}</p>
<p>{clientInfo.zip}</p>
</MDiv>
</BorderedDiv>
<BorderedDiv>
<FontAwesomeIcon icon={faUser} />
<MDiv>
{/* @TODO: Pull this info from props */}
<p>{clientInfo.contactName}</p>
<p>{clientInfo.contactEmail}</p>
</MDiv>
</BorderedDiv>
</div>
</SpaceBetween>
<MButton onClick={toggle}>Done</MButton>
</MBody>
</Mod>
</Container>
</>
)
} else {
return (
<DetailsBtn onClick={toggle}>View Details</DetailsBtn>
)
}
}
Example #18
| Source File: LayerPanel.js From Easy-Annotator with GNU General Public License v3.0 | 5 votes |
|
render() {
const { listrois, selected } = this.props;
return (
<div style={styles.layersWrapper}>
{listrois &&
listrois.map((rois, index) => {
//Fix coloring of layer panel
return (
<div
style={{
...styles.layer,
borderColor: selected == index ? highlightColor : borderColor
}}
key={index}
onClick={() => {}}
>
<div
style={{
...styles.eyeWrapper,
borderColor:
selected == index ? highlightColor : borderColor
}}
onClick={() => {
this.props.onEyeClick(index);
}}
>
{rois.visible ? (
<FontAwesomeIcon
onClick={() => {
this.props.onEyeClick;
}}
icon={faEye}
style={styles.eye}
/>
) : (
<FontAwesomeIcon
onClick={() => {
this.props.onEyeClick;
}}
icon={faEyeSlash}
style={styles.eye}
/>
)}
</div>
<div
style={styles.textWrapper}
onClick={() => {
this.props.setSelected(index);
}}
>
<span>{rois.label.title}</span>
<span>{rois.label.type}</span>
</div>
<div
style={styles.timeWrapper}
onClick={() => {
this.props.setSelected(index);
}}
>
{rois.numSeconds}
<FontAwesomeIcon
onClick={() => {
this.props.onDeleteClick(index);
}}
icon={faTrash}
style={styles.eye}
/>
</div>
</div>
);
})}
</div>
);
}
Example #19
| Source File: AddRaceBtn.js From ponce-tournois-mario-kart with MIT License | 5 votes |
|
function AddRaceBtn({ participationId }) {
const [showForm, setShowForm] = useState(false);
const openForm = () => {
if (!showForm) setShowForm(true);
};
const closeForm = () => {
setShowForm(false);
};
return (
<Row className="participation__raceWrapper">
<Col xs={12} onClick={openForm}>
<div
className={`participation__race ${
!showForm ? 'participation__addRace' : ''
}`}
>
<Row justify="center" align="center">
{showForm ? (
<AddRaceForm
closeForm={closeForm}
participationId={participationId}
/>
) : (
<Col xs={12}>
<FontAwesomeIcon
icon={faPlus}
className="participation__addRaceBtn"
/>
Ajouter une course
</Col>
)}
</Row>
</div>
</Col>
</Row>
);
}
Example #20
| Source File: PlacementEditBoard.js From GB-GCGC with MIT License | 5 votes |
|
render() {
const {redirect} = this.state;
if(redirect){
return <Redirect to={"/home"}/>
}
return (
<div className="container">
<Card>
<Card.Body>
<div className="inline">
<Card.Title>
<h5 align="center">
Notice Board-Placements
<Tooltip title="Add">
<Link onClick={this.toggleModal}>
<FontAwesomeIcon icon={faPlus} size="xs" className="p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
</Link>
</Tooltip>
</h5>
</Card.Title>
</div>
<div>
<Table size="sm" responsive striped>
<thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>S.No</th>
<th>Name of the Company</th>
<th>Date</th>
<th>CTC</th>
<th colspan="2">Operations</th>
</tr>
</thead>
<tbody>
{this.userList()}
</tbody>
</Table>
</div>
</Card.Body>
</Card>
<Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add Placement Event
</ModalHeader>
<ModalBody>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="company">Name Of The Company</Label>
<Input type="text" id="company" name="company" value={this.state.company} onChange={this.onChangeCompany} />
</FormGroup>
<FormGroup>
<Label htmlFor="date"> From </Label>
<Input type="date" id="date" name="date" value={this.state.date} onChange={this.onChangeDate} />
</FormGroup>
<FormGroup>
<Label htmlFor="CTC"> CTC </Label>
<Input type="text" id="ctc" name="ctc" value={this.state.CTC} onChange={this.onChangeCTC}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</ModalBody>
</Modal>
</div>
);
}
Example #21
| Source File: FooterSmall.js From Frontend with Apache License 2.0 | 5 votes |
|
function FooterSmall() {
const [showFooter, setShowFooter] = useState(false)
window.addEventListener('scroll', (e) => {
myFunction()
})
function myFunction() {
// console.log(window.pageYOffset);
if (window.pageYOffset < 100) {
setShowFooter(false)
} else {
setShowFooter(true)
}
}
return (
<div
id="myfooter"
className={`footerSmall m-0 ${
showFooter || window.pageYOffset === 0 ? '' : 'hide'
}`}
>
<div className="container-fluid p-4 m-0">
<div className="row justify-content-center">
<div className="col-6 col-sm-6">
<p
style={{
fontSize: '18px',
padding: '0px',
margin: '0px',
}}
>
© Copyright Codedigger 2021
</p>
</div>
<div className="col-6 col-sm-6 m-0">
<div className="float-right m-0">
<a
className="social_media"
target="_blank"
href="https://www.facebook.com/practicewithcodedigger"
>
<FontAwesomeIcon icon={faFacebook} size="2x" />
</a>
<a
className="social_media"
target="_blank"
href="https://www.linkedin.com/company/codedigger"
>
<FontAwesomeIcon icon={faLinkedin} size="2x" />
</a>
<a
className="social_media"
target="_blank"
href="https://github.com/Code-dig-ger"
>
<FontAwesomeIcon icon={faGithub} size="2x" />
</a>
<a
className="social_media"
target="_blank"
href="https://www.youtube.com/channel/UCY5XRYpEGKT9cpzZmfWvh6A"
>
<FontAwesomeIcon icon={faYoutube} size="2x" />
</a>
</div>
</div>
</div>
</div>
</div>
)
}
Example #22
| Source File: Footer.js From Oud with MIT License | 4 votes |
|
/**
* the footer function
* @function
* @returns {JSX}
*/
function Footer() {
return (
<div>
<footer className="main-footer">
<div className="footer-middle Ffooter-middle">
<div className="container">
<div className="row">
{/* Column 1 */}
<div className="col-md-3 col-sm-6">
<Link to="/welcomeUser">
<img
data-testid="logoImage"
className="img-responsive img-resp "
src={logo}
alt="Oud logo"
/>
</Link>
</div>
{/* Column 2 */}
<div className="col-md-3 col-sm-6">
<h5
data-testid="Company"
className="font-weight-bold text-uppercase mt-3 mb-4"
>
Company
</h5>
<ul className="list-unstyled ListMain hovergold ">
<li className="ListItem">
<Link data-testid="About" to="/about">
About
</Link>
</li>
<li className="ListItem">
<Link data-testid="Features" to="/features">
Features
</Link>
</li>
<li className="ListItem">
<Link data-testid="Help" to="/help">
Help
</Link>
</li>
</ul>
</div>
{/* Column 3 */}
<div className="col-md-3 col-sm-6">
<h5
data-testid="Others"
className="font-weight-bold text-uppercase mt-3 mb-4"
>
Others
</h5>
<ul className="list-unstyled ListMain hovergold">
<li className="ListItem">
<Link data-testid="Artists" to="/forartists">
For Artists
</Link>
</li>
<li className="ListItem">
<Link data-testid="contact_us" to="/contactus">
contact us
</Link>
</li>
</ul>
</div>
{/* Column 4 */}
<div className="col-md-3 col-sm-6">
<h5
data-testid="Links"
className="font-weight-bold text-uppercase mt-3 mb-4"
>
Links
</h5>
<ul className="list-unstyled ListMain hovergold">
<li className="ListItem">
<Link data-testid="WePlayer" to="/">
Web Player
</Link>
</li>
<li className="ListItem">
<Link data-testid="MobileApp" to="/android">
Free Mobile App
</Link>
</li>
</ul>
</div>
{/* Column 5 */}
<div className="col-md-3 col-sm-6 ml-auto">
<ul className="list-unstyled ListMain list-inline text-center">
<li
data-testid="faFacebook"
className="list-inline-item fa-2x "
>
<FontAwesomeIcon icon={faFacebook} />
</li>
<li
data-testid="faTwitter"
className="list-inline-item fa-2x"
>
<FontAwesomeIcon icon={faTwitter} />
</li>
<li
data-testid="faInstagram"
className="list-inline-item fa-2x"
>
<FontAwesomeIcon icon={faInstagram} />
</li>
<li
data-testid="faYoutube"
className="list-inline-item fa-2x"
>
<FontAwesomeIcon icon={faYoutube} />
</li>
</ul>
</div>
</div>
{/* Footer Bottom */}
<div className="footer-bottom Ffooter-bottom">
<p className="text-xs-center">
©{new Date().getFullYear()} Oud - All Rights Reserved
</p>
</div>
</div>
</div>
</footer>
<div></div>
</div>
);
}
Example #23
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function ExistingActivitySearch(props) {
const { fromTeam, addActivity, libraries } = props;
const [toggleStates, setToggleStates] = useState({
searchLibrary: true,
subject: true,
education: false,
type: false,
});
const allState = useSelector((state) => state.search);
const activityTypesState = useSelector((state) => state.resource.types);
const { currentOrganization, permission } = useSelector((state) => state.organization);
const dispatch = useDispatch();
const [activityTypes, setActivityTypes] = useState([]);
const [search, setSearch] = useState([]);
const [searchQueries, SetSearchQuery] = useState('');
const [searchInput, setSearchInput] = useState('');
const [meta, setMeta] = useState({});
const [activePage, setActivePage] = useState(1);
const [totalCount, setTotalCount] = useState(0);
const [activeModel, setActiveModel] = useState('activities');
const [activeType, setActiveType] = useState([]);
const [activeSubject, setActiveSubject] = useState([]);
const [activeEducation, setActiveEducation] = useState([]);
const [searchType, setSearchType] = useState(null);
const [authorName, SetAuthor] = useState('');
const [activetab, setActiveTab] = useState('activities');
const [todate, Settodate] = useState(undefined);
const [fromdate, Setfromdate] = useState(undefined);
useEffect(() => {
if (localStorage.getItem('refreshPage') === 'true' && currentOrganization && searchType) {
let dataSend;
if (searchType === 'orgSearch') {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
author: authorName || undefined,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
} else {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
author: authorName || undefined,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
}
let result;
(async () => {
result = await dispatch(simpleSearchAction(dataSend));
})();
setTotalCount(result?.meta?.total);
const tempEducation = [];
const tempSubject = [];
if (activeEducation) {
activeEducation.forEach((edu) => {
if (String(edu).includes('&')) {
const temp = String(edu).replace('&', 'and');
tempEducation.push(temp);
} else {
tempEducation.push(edu);
}
});
setActiveEducation(tempEducation);
}
if (activeSubject) {
activeSubject.forEach((sub) => {
if (String(sub).includes('&')) {
const temp = String(sub).replace('&', 'and');
tempSubject.push(temp);
} else {
tempSubject.push(sub);
}
});
setActiveSubject(tempSubject);
}
}
}, [currentOrganization]);
useEffect(() => {
if (allState.searchResult) {
if (allState.searchResult.length > 0) {
setSearch(allState.searchResult);
SetSearchQuery(allState.searchQuery);
setSearchInput(allState.searchQuery);
setMeta(allState.searchMeta);
localStorage.setItem('loading', 'false');
Swal.close();
} else if (allState.searchMeta.total === 0) {
setSearch([]);
SetSearchQuery(allState.searchQuery);
setSearchInput(allState.searchQuery);
setMeta({});
localStorage.setItem('loading', 'false');
Swal.close();
}
}
}, [allState.searchMeta, allState.searchQuery, allState.searchResult]);
useEffect(() => {
if (allState.searchResult) {
if (allState.searchResult.length > 0 && paginationStarter) {
paginationStarter = false;
setTotalCount(allState.searchMeta.total);
}
}
}, [allState.searchMeta, allState.searchResult, totalCount]);
useEffect(() => {
if (localStorage.getItem('loading') === 'true') {
Swal.fire({
html: 'Searching...', // add html attribute if you want or remove
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
}
});
useEffect(() => {
if (activityTypesState.length === 0) {
dispatch(loadResourceTypesAction());
}
}, []);
const compare = (a, b) => {
// Use toUpperCase() to ignore character casing
const bandA = a.title.toUpperCase();
const bandB = b.title.toUpperCase();
let comparison = 0;
if (bandA > bandB) {
comparison = 1;
} else if (bandA < bandB) {
comparison = -1;
}
return comparison;
};
useEffect(() => {
const allItems = [];
activityTypesState?.data?.map((data) => data.activityItems.map((itm) => allItems.push(itm)));
setActivityTypes(allItems.sort(compare));
}, [activityTypesState]);
return (
<>
<div>
<div className={!fromTeam && 'search-wrapper'}>
<div className="content-search">
{true ? (
<div className="search-result-main">
{!fromTeam && <div className="current-org-search">{currentOrganization?.name}</div>}
{!fromTeam && <div className="exp-lib-cnt">Explore library content</div>}
<div
className="total-count"
style={{
display: totalCount > 1000 || !!searchQueries ? 'block' : 'none',
}}
>
{totalCount > 10000 ? (
<div>
Your search returned more than <span>10,000</span> results. Please refine your search criteria.
</div>
) : null}
{!!searchQueries && (
<div>
Showing {search ? meta.total : '0'} results For <span>{searchQueries}</span>
</div>
)}
</div>
<div className="main-content-search">
<div className="left-search">
<div className="search-library">
<Accordion defaultActiveKey="0">
<Card>
<Accordion.Toggle
as={Card.Header}
eventKey="0"
onClick={() =>
setToggleStates({
...toggleStates,
searchLibrary: !toggleStates.searchLibrary,
})
}
>
Search Library
<FontAwesomeIcon className="ml-2" icon={toggleStates.searchLibrary ? 'chevron-up' : 'chevron-down'} />
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Body>
<div className="body-search">
<input
// style={{ display: searchType === 'orgSearch' ? 'none' : 'block' }}
value={searchInput}
onChange={(e) => {
setSearchInput(e.target.value);
}}
onKeyPress={async (e) => {
if (e.key === 'Enter') {
if (!searchInput.trim() && searchType !== 'orgSearch') {
Swal.fire('Search field is required.');
} else if (searchInput.length > 255) {
Swal.fire('Character limit should be less than 255.');
} else {
Swal.fire({
title: 'Searching...', // add html attribute if you want or remove
html: 'We are fetching results for you!',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
let dataSend;
if (searchType === 'orgSearch') {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
authors: authorName || undefined,
standardArray: activeType,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
} else {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
authors: authorName || undefined,
standardArray: activeType,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
}
const result = await dispatch(simpleSearchAction(dataSend));
setTotalCount(result.meta?.total);
const tempEducation = [];
const tempSubject = [];
if (activeEducation) {
activeEducation.forEach((edu) => {
if (String(edu).includes('&')) {
const temp = String(edu).replace('&', 'and');
tempEducation.push(temp);
} else {
tempEducation.push(edu);
}
});
setActiveEducation(tempEducation);
}
if (activeSubject) {
activeSubject.forEach((sub) => {
if (String(sub).includes('&')) {
const temp = String(sub).replace('&', 'and');
tempSubject.push(temp);
} else {
tempSubject.push(sub);
}
});
setActiveSubject(tempSubject);
}
}
}
}}
type="search"
placeholder="Search"
/>
<div className="form-group">
<div className="radio-btns">
{true && (
<label>
<input
name="type"
onChange={(e) => {
setSearchType(e.target.value);
}}
value="private"
checked={searchType === 'private'}
type="radio"
/>
<span>My Projects</span>
</label>
)}
{true && (
<label>
<input
name="type"
onChange={(e) => {
setSearchType(e.target.value);
}}
value="public"
checked={searchType === 'public'}
type="radio"
/>
<span>All Shared Projects</span>
</label>
)}
{true && (
<label>
<input
name="type"
onChange={(e) => {
setSearchType(e.target.value);
}}
value="orgSearch"
checked={searchType === 'orgSearch'}
type="radio"
/>
<span>All Shared Projects In My Org</span>
</label>
)}
</div>
</div>
{permission?.Organization?.includes('organization:view-user') && searchType !== 'private' && <div className="author-label">Author</div>}
<div
className="form-group"
style={{
display: permission?.Organization?.includes('organization:view-user') && searchType !== 'private' ? 'block' : 'none',
}}
>
<input
placeholder="Enter author name"
className="authorName"
value={authorName}
onChange={({ target }) => {
if (target.value) {
SetAuthor(target.value);
} else {
SetAuthor('');
}
}}
/>
</div>
<div
className="src-btn"
onClick={async () => {
Setfromdate(undefined);
Settodate(undefined);
setActiveTab('activities');
if (!searchInput.trim() && searchType !== 'orgSearch') {
Swal.fire('Search field is required.');
} else if (searchInput.length > 255) {
Swal.fire('Character limit should be less than 255.');
} else if (!searchType) {
Swal.fire('Search type is required. Click one of the radio buttons.');
} else {
Swal.fire({
title: 'Searching...', // add html attribute if you want or remove
html: 'We are fetching results for you!',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
let dataSend;
if (searchType === 'orgSearch') {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
} else {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
gradeArray: activeEducation,
standardArray: activeType,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
}
const result = await dispatch(simpleSearchAction(dataSend));
setTotalCount(result.meta?.total);
const tempEducation = [];
const tempSubject = [];
if (activeEducation) {
activeEducation.forEach((edu) => {
if (String(edu).includes('&')) {
const temp = String(edu).replace('&', 'and');
tempEducation.push(temp);
} else {
tempEducation.push(edu);
}
});
setActiveEducation(tempEducation);
}
if (activeSubject) {
activeSubject.forEach((sub) => {
if (String(sub).includes('&')) {
const temp = String(sub).replace('&', 'and');
tempSubject.push(temp);
} else {
tempSubject.push(sub);
}
});
setActiveSubject(tempSubject);
}
}
}}
>
<FontAwesomeIcon icon="search" />
Search
</div>
</div>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
<div className="refine-search">
<div className="headline">Refine your search</div>
<Accordion defaultActiveKey="0">
<Card>
<Accordion.Toggle
as={Card.Header}
eventKey="0"
onClick={() =>
setToggleStates({
...toggleStates,
type: false,
education: false,
subject: !toggleStates.subject,
})
}
>
Subject
<FontAwesomeIcon className="ml-2" icon={toggleStates.subject ? 'chevron-up' : 'chevron-down'} />
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Body>
{subjects.map((data) => (
<div
className="list-item-keys"
key={data.value}
value={data.subject}
onClick={() => {
if (activeSubject.includes(data.subject)) {
if (data.subject === 'Career & Technical Education') {
setActiveSubject(
activeSubject.filter((index) => {
if (index === 'Career & Technical Education' || index === 'Career and Technical Education') {
return false;
}
return true;
})
);
} else {
setActiveSubject(activeSubject.filter((index) => index !== data.subject));
}
} else {
setActiveSubject([...activeSubject, data.subject]);
}
}}
>
{data.subject === 'Career & Technical Education' ? (
activeSubject.includes('Career & Technical Education') || activeSubject.includes('Career and Technical Education') ? (
<FontAwesomeIcon icon="check-square" />
) : (
<FontAwesomeIcon icon="square" />
)
) : activeSubject.includes(data.subject) ? (
<FontAwesomeIcon icon="check-square" />
) : (
<FontAwesomeIcon icon="square" />
)}
<span>{data.subject}</span>
</div>
))}
</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Accordion.Toggle
as={Card.Header}
eventKey="1"
onClick={() =>
setToggleStates({
...toggleStates,
type: false,
subject: false,
education: !toggleStates.education,
})
}
>
Education Level
<FontAwesomeIcon className="ml-2" icon={toggleStates.education ? 'chevron-up' : 'chevron-down'} />
</Accordion.Toggle>
<Accordion.Collapse eventKey="1">
<Card.Body>
{educationLevels.map((data) => (
<div
className="list-item-keys"
key={data.value}
value={data.name}
onClick={() => {
if (activeEducation.includes(data.name)) {
if (data.name === 'College & Beyond') {
setActiveEducation(
activeEducation.filter((index) => {
if (index === 'College & Beyond' || index === 'College and Beyond') {
return false;
}
return true;
})
);
} else {
setActiveEducation(activeEducation.filter((index) => index !== data.name));
}
} else {
setActiveEducation([...activeEducation, data.name]);
}
}}
>
{data.name === 'College & Beyond' ? (
activeEducation.includes('College & Beyond') || activeEducation.includes('College and Beyond') ? (
<FontAwesomeIcon icon="check-square" />
) : (
<FontAwesomeIcon icon="square" />
)
) : activeEducation.includes(data.name) ? (
<FontAwesomeIcon icon="check-square" />
) : (
<FontAwesomeIcon icon="square" />
)}
<span>{data.name}</span>
</div>
))}
</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Accordion.Toggle
as={Card.Header}
eventKey="3"
onClick={() =>
setToggleStates({
...toggleStates,
subject: false,
education: false,
type: !toggleStates.type,
})
}
>
Type of Activity
<FontAwesomeIcon className="ml-2" icon={toggleStates.type ? 'chevron-up' : 'chevron-down'} />
</Accordion.Toggle>
<Accordion.Collapse eventKey="3">
<Card.Body
style={{
'max-height': '300px',
'overflow-y': 'auto',
}}
>
{activityTypes.map((data) => (
<div
className="list-item-keys"
key={data.id}
value={data.h5pLib}
onClick={() => {
if (activeType.includes(data.h5pLib)) {
// eslint-disable-next-line eqeqeq
setActiveType(activeType.filter((index) => index != data.h5pLib));
} else {
setActiveType([...activeType, data.h5pLib]);
}
}}
>
{activeType.includes(data.h5pLib) ? <FontAwesomeIcon icon="check-square" /> : <FontAwesomeIcon icon="square" />}
<span>{data.title}</span>
</div>
))}
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
</div>
<div className="right-search" id="right-search-branding-style">
<Tabs
activeKey={activetab}
id="uncontrolled-tab-example"
onSelect={async (e) => {
if (!searchInput && searchType !== 'orgSearch') {
Swal.fire('Search field is required.');
} else {
setActiveTab(e);
if (e === 'total') {
let searchData;
if (searchType === 'orgSearch') {
searchData = {
phrase: searchQueries.trim() || searchInput,
from: 0,
size: 20,
type: searchType,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
};
} else {
searchData = {
phrase: searchQueries.trim() || searchInput,
from: 0,
size: 20,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
type: searchType,
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
};
}
Swal.fire({
title: 'Loading...', // add html attribute if you want or remove
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
const resultModel = await dispatch(simpleSearchAction(searchData));
Swal.close();
setTotalCount(resultModel.meta[e]);
setActiveModel(e);
setActivePage(1);
} else {
let searchData;
if (searchType === 'orgSearch') {
searchData = {
phrase: searchQueries.trim() || searchInput,
from: 0,
size: 20,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
model: e,
type: searchType,
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
standardArray: libraries,
};
} else {
searchData = {
phrase: searchQueries.trim() || searchInput,
from: 0,
size: 20,
model: e,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
type: searchType,
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
standardArray: libraries,
};
}
Swal.fire({
title: 'Loading...', // add html attribute if you want or remove
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
const resultModel = await dispatch(simpleSearchAction(searchData));
Swal.close();
setTotalCount(resultModel.meta[e]);
setActiveModel(e);
setActivePage(1);
}
}
}}
>
{!fromTeam && (
<Tab eventKey="activities" title={!!search && !!meta.activities ? `activity (${meta.activities})` : 'activity (0)'}>
<div className="content">
<div className="results_search">
{!!search && search.length > 0 ? (
search.map((res) => (
<>
{res.model === 'Activity' && (
<div className="box">
<div className="imgbox">
{res.thumb_url ? (
<div
style={{
backgroundImage: res.thumb_url.includes('pexels.com')
? `url(${res.thumb_url})`
: `url(${global.config.resourceUrl}${res.thumb_url})`,
}}
/>
) : (
<div
style={{
// eslint-disable-next-line max-len
backgroundImage:
'https://images.pexels.com/photos/593158/pexels-photo-593158.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280',
}}
/>
)}
</div>
<div className="contentbox">
<div className="search-content">
<a
href={
res.model === 'Activity'
? `/activity/${res.id}/preview`
: res.model === 'Playlist'
? `/playlist/${res.id}/preview/lti`
: `/project/${res.id}/preview`
}
target="_blank"
rel="noreferrer"
>
<h2>{res.title || res.name}</h2>
</a>
<ul>
{res.user && (
<li>
by <span>{res.user.first_name}</span>
</li>
)}
<li>
Type <span className="type">{res.model}</span>
</li>
</ul>
<p>{res.description}</p>
</div>
<Buttons text="Add" secondary={true} width="153px" height="36px" onClick={() => addActivity(res)} hover={true} />
</div>
</div>
)}
</>
))
) : (
<div className="box">No result found !</div>
)}
</div>
</div>
</Tab>
)}
</Tabs>
{totalCount > 20 && (
<Pagination
activePage={activePage}
itemsCountPerPage={20}
totalItemsCount={totalCount > 10000 ? 10000 : totalCount}
pageRangeDisplayed={8}
onChange={async (e) => {
setActivePage(e);
if (activeModel === 'total') {
const searchData = {
phrase: searchQueries.trim(),
from: e * 20 - 20,
size: 20,
type: searchType,
subjectArray: activeSubject || undefined,
gradeArray: activeEducation || undefined,
standardArray: activeType || undefined,
author: authorName || undefined,
};
Swal.fire({
title: 'Loading...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
await dispatch(simpleSearchAction(searchData));
Swal.close();
} else {
const searchData = {
phrase: searchQueries.trim(),
from: e * 20 - 20,
size: 20,
type: searchType,
model: activeModel,
subjectArray: activeSubject || undefined,
gradeArray: activeEducation || undefined,
standardArray: activeType || undefined,
author: authorName || undefined,
standardArray: libraries,
};
Swal.fire({
title: 'Loading...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
await dispatch(simpleSearchAction(searchData));
Swal.close();
}
}}
itemClass="page-item"
linkClass="page-link"
/>
)}
</div>
</div>
</div>
) : (
<Alert variant="danger">You are not authorized to view this page!</Alert>
)}
</div>
</div>
</div>
</>
);
}
