@fortawesome/free-solid-svg-icons#faCircleNotch JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faCircleNotch.
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: index.jsx From loopring-swap with GNU General Public License v3.0 | 5 votes |
|
Spinner = ({ size, variant }) => {
return <SpinningIcon size={size} variant={variant} icon={faCircleNotch} />;
}
Example #2
| Source File: ImportDeck.jsx From ashteki with GNU Affero General Public License v3.0 | 4 votes |
|
ImportDeck = () => {
const { t } = useTranslation();
const dispatch = useDispatch();
const apiState = useSelector((state) => {
const retState = state.api[Decks.ImportDeck];
if (retState && retState.success) {
retState.message = t('Deck added successfully');
setTimeout(() => {
dispatch(clearApiStatus(Decks.ImportDeck));
dispatch(navigate('/decks'));
}, 1000);
}
return retState;
});
const schema = yup.object({
deckLink: yup
.string()
.required(t('You must specify the deck link'))
.notOneOf(
['https://ashes.live/decks/share/00000000-0000-0000-0000-000000000000'],
'The URL you entered is invalid. Please check it and try again.'
)
.matches(
/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/,
'The URL you entered is invalid. Please check it and try again.'
)
});
const initialValues = {
deckLink: ''
};
const onSubmit = (values) => {
const regex = /[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/;
let uuid = values.deckLink.match(regex);
dispatch(importDeck({ uuid: uuid[0] }));
};
return (
<div>
<Col md={{ span: 8, offset: 2 }} className='profile full-height'>
<ApiStatus
state={apiState}
onClose={() => dispatch(clearApiStatus(Decks.ImportDeck))}
/>
<Panel title={t('Import Deck')}>
<p>
Enter the deck share link from the
<a href='https://ashes.live' target='_blank' rel='noopener noreferrer'>
ashes.live website.
</a>
</p>
<p>
Locate and view a deck on ashes.live, then click the 'Share...'
button. You can copy the url displayed in the 'Share and export'
overlay.
</p>
<p>The URL looks like this: </p>
<p>
<code>
https://ashes.live/decks/share/00000000-0000-0000-0000-000000000000
</code>
</p>
<Formik
validationSchema={schema}
onSubmit={onSubmit}
initialValues={initialValues}
>
{(formProps) => (
<Form
onSubmit={(event) => {
event.preventDefault();
formProps.handleSubmit(event);
}}
>
<Form.Row>
<Form.Group as={Col} xs='9' controlId='formGridDeckLink'>
<Form.Label>{t('Deck Link')}</Form.Label>
<Form.Control
name='deckLink'
type='text'
placeholder={t('Enter the deck link')}
value={formProps.values.deckLink}
onChange={formProps.handleChange}
onBlur={formProps.handleBlur}
isInvalid={
formProps.touched.deckLink &&
!!formProps.errors.deckLink
}
/>
<Form.Control.Feedback type='invalid'>
{formProps.errors.deckLink}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Col className='text-center'>
<Button variant='secondary' type='submit'>
{t('Import')}
{apiState && apiState.loading && (
<FontAwesomeIcon icon={faCircleNotch} spin />
)}
</Button>
</Col>
</Form>
)}
</Formik>
</Panel>
</Col>
</div>
);
}
Example #3
| Source File: BlockList.jsx From ashteki with GNU Affero General Public License v3.0 | 4 votes |
|
BlockList = () => {
const { user, token } = useSelector((state) => ({
user: state.account.user,
token: state.account.token
}));
const dispatch = useDispatch();
const { t } = useTranslation();
// const blockList = useSelector((state) => state.user.blockList);
const addState = useSelector((state) => {
const retState = state.api[UserAction.AddBlocklist];
if (retState && retState.success) {
retState.message = t('Blocklist entry added successfully');
setTimeout(() => {
dispatch(clearApiStatus(UserAction.AddBlocklist));
}, 5000);
}
return retState;
});
const deleteState = useSelector((state) => {
const retState = state.api[UserAction.DeleteBlockList];
if (retState && retState.success) {
retState.message = t('Blocklist entry deleted successfully');
setTimeout(() => {
dispatch(clearApiStatus(UserAction.DeleteBlockList));
dispatch(sendSocketMessage('authenticate', token));
}, 5000);
}
return retState;
});
const apiState = useSelector((state) => state.api[UserAction.RequestBlocklist]);
const initialValues = {
blockee: ''
};
if (!user || !user.blockList) {
return null;
}
let blockListToRender = user.blockList.map((username) => {
return (
<tr key={username}>
<td>{username}</td>
<td>
<a
href='#'
className='text-danger'
onClick={() => dispatch(removeBlockListEntry(user, username))}
>
<FontAwesomeIcon icon={faTimes} />
</a>
</td>
</tr>
);
});
let table =
!user.blockList || user.blockList.length === 0 ? (
<div>
<Trans>No users currently blocked</Trans>
</div>
) : (
<Table striped className='blocklist'>
<thead>
<tr>
<th>
<Trans>Username</Trans>
</th>
<th>
<Trans>Remove</Trans>
</th>
</tr>
</thead>
<tbody>{blockListToRender}</tbody>
</Table>
);
const schema = yup.object({
blockee: yup.string().required(t('You must specify a username to block'))
});
return (
<Col sm={{ offset: 2, span: 8 }}>
<Panel title={t('Block list')}>
{/* {apiState?.loading && (
<div>
Please wait while the blocklist is loaded...
<FontAwesomeIcon icon={faCircleNotch} spin />
</div>
)}
{!apiState ||
(!apiState.loading && (
<>
<ApiStatus
state={addState}
onClose={() => dispatch(clearApiStatus(UserAction.AddBlocklist))}
/>
<ApiStatus
state={deleteState}
onClose={() => dispatch(clearApiStatus(UserAction.DeleteBlockList))}
/> */}
<div className='about-container'>
<Formik
validationSchema={schema}
onSubmit={(values) => {
dispatch(addBlockListEntry(user, values.blockee));
}}
initialValues={initialValues}
>
{(formProps) => (
<Form
onSubmit={(event) => {
event.preventDefault();
formProps.handleSubmit(event);
}}
>
<p>
<Trans i18nKey='blocklist.explain'>
It can sometimes become necessary to prevent
someone joining your games, or stop seeing their
messages, or both. Users on this list will not
be able to join your games, and you will not see
their chat messages or their games.
</Trans>
</p>
<Form.Row>
<Form.Group
as={Col}
xs='9'
controlId='formGridblockee'
>
<Form.Label>{t('Username')}</Form.Label>
<Form.Control
name='blockee'
type='text'
placeholder={t('Enter username to block')}
value={formProps.values.blockee}
onChange={formProps.handleChange}
onBlur={formProps.handleBlur}
isInvalid={
formProps.touched.blockee &&
!!formProps.errors.blockee
}
/>
<Form.Control.Feedback type='invalid'>
{formProps.errors.blockee}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Button variant='primary' type='submit'>
<Trans>Add</Trans>
{addState && addState.loading && (
<FontAwesomeIcon icon={faCircleNotch} spin />
)}
</Button>
<div className='mt-3'>
<h3 className='font-weight-bold'>
<Trans>Users Blocked</Trans>
</h3>
{table}
</div>
</Form>
)}
</Formik>
</div>
{/* </>
))} */}
</Panel>
</Col>
);
}
Example #4
| Source File: NewsAdmin.jsx From ashteki with GNU Affero General Public License v3.0 | 4 votes |
|
NewsAdmin = () => {
const news = useSelector((state) => state.news.news);
const [newsText, setNewsText] = useState('');
const [editText, setEditText] = useState('');
const [editId, setEditId] = useState();
const dispatch = useDispatch();
const apiState = useSelector((state) => {
const retState = state.api[News.RequestNews];
return retState;
});
const addApiState = useSelector((state) => {
const retState = state.api[News.AddNews];
if (retState && retState.success) {
retState.message = 'News item added successfully';
setTimeout(() => {
dispatch(clearApiStatus(News.AddNews));
}, 5000);
}
return retState;
});
const saveApiState = useSelector((state) => {
const retState = state.api[News.SaveNews];
if (retState && retState.success) {
retState.message = 'News item saved successfully';
setTimeout(() => {
dispatch(clearApiStatus(News.SaveNews));
}, 5000);
}
return retState;
});
const deleteApiState = useSelector((state) => {
const retState = state.api[News.DeleteNews];
if (retState && retState.success) {
retState.message = 'News item deleted successfully';
setTimeout(() => {
dispatch(clearApiStatus(News.DeleteNews));
}, 5000);
}
return retState;
});
useEffect(() => {
dispatch(loadNews({ limit: 5, forceLoad: true }));
}, [dispatch]);
const renderedNews = news.map((newsItem) => {
return (
<tr key={newsItem._id} className='d-flex'>
<td className='col-2'>{moment(newsItem.datePublished).format('YYYY-MM-DD')}</td>
<td className='col-2'>{newsItem.poster}</td>
<td className='col'>
{editId === newsItem._id ? (
<Form.Control
as='textarea'
rows={4}
name='editText'
value={editText}
onChange={(event) => setEditText(event.target.value)}
/>
) : (
newsItem.text
)}
</td>
<td className='col-3'>
<div className='btn-group'>
{editId === newsItem._id ? (
<Button
variant='primary'
type='button'
onClick={() => {
dispatch(saveNews(editId, editText));
setEditId(undefined);
setEditText(undefined);
}}
>
Save
</Button>
) : (
<Button
variant='primary'
type='button'
onClick={() => {
setEditId(newsItem._id);
setEditText(newsItem.text);
}}
>
Edit
</Button>
)}
<Button
variant='danger'
type='button'
onClick={() => dispatch(deleteNews(newsItem._id))}
>
Delete
</Button>
</div>
</td>
</tr>
);
});
return (
<div>
<Panel title='News Admin'>
{apiState?.loading && (
<div>
Please wait while the news is loaded...
<FontAwesomeIcon icon={faCircleNotch} spin />
</div>
)}
{!apiState?.loading && (
<>
{!apiState?.success && (
<ApiStatus
state={apiState}
onClose={() => dispatch(clearApiStatus(News.RequestNews))}
/>
)}
<ApiStatus
state={addApiState}
onClose={() => dispatch(clearApiStatus(News.AddNews))}
/>
<ApiStatus
state={saveApiState}
onClose={() => dispatch(clearApiStatus(News.SaveNews))}
/>
<ApiStatus
state={deleteApiState}
onClose={() => dispatch(clearApiStatus(News.DeleteNews))}
/>
<Table striped>
<thead>
<tr className='d-flex'>
<th className='col-2'>Date</th>
<th className='col-2'>Poster</th>
<th className='col'>Text</th>
<th className='col-3'>Action</th>
</tr>
</thead>
<tbody>{renderedNews}</tbody>
</Table>
<Form>
<Form.Group controlId='newsText' as={Col} xs={12}>
<Form.Label>Add news item</Form.Label>
<Form.Control
as='textarea'
rows={4}
name='newsText'
value={newsText}
onChange={(event) => setNewsText(event.target.value)}
/>
</Form.Group>
<Button
variant='primary'
type='button'
onClick={() => {
dispatch(addNews(newsText));
setNewsText('');
}}
>
Add
</Button>
</Form>
</>
)}
</Panel>
</div>
);
}
