react-icons/fa#FaUser TypeScript Examples
The following examples show how to use
react-icons/fa#FaUser.
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: Stats.tsx From hub with Apache License 2.0 | 6 votes |
|
Stats = (props: Props) => {
if (isUndefined(props.packageStats) && isUndefined(props.productionOrganizationsCount)) return null;
return (
<div className="d-flex flex-row flex-wrap align-items-baseline">
{!isUndefined(props.packageStats) && (
<>
{props.packageStats.subscriptions > 0 && (
<div data-testid="subscriptions" className="d-flex flex-row align-items-baseline me-3 mt-2">
<FaUser className={styles.icon} />
<small className="text-muted text-uppercase mx-1">Subscriptions:</small>
<span className="fw-bold">{prettifyNumber(props.packageStats.subscriptions)}</span>
</div>
)}
{props.packageStats.webhooks > 0 && (
<div data-testid="webhooks" className="d-flex flex-row align-items-baseline me-3 mt-2">
<GrConnect className={styles.icon} />
<small className="text-muted text-uppercase mx-1">Webhooks:</small>
<span className="fw-bold">{prettifyNumber(props.packageStats.webhooks)}</span>
</div>
)}
</>
)}
{!isUndefined(props.productionOrganizationsCount) && props.productionOrganizationsCount > 0 && (
<div data-testid="productionUsers" className="d-none d-md-flex flex-row align-items-baseline mt-2">
<MdBusiness className={styles.icon} />
<small className="text-muted text-uppercase mx-1">Production users:</small>
<span className="fw-bold">{prettifyNumber(props.productionOrganizationsCount)}</span>
</div>
)}
</div>
);
}
Example #2
| Source File: TopBar.tsx From crosshare with GNU Affero General Public License v3.0 | 6 votes |
|
DefaultTopBar = ({
dashboardSelected,
accountSelected,
children,
}: {
dashboardSelected?: boolean;
accountSelected?: boolean;
children?: ReactNode;
}) => {
const ctxt = useContext(AuthContext);
return (
<TopBar>
{children}
{ctxt.isAdmin ? (
<TopBarLinkA href="/admin" icon={<FaUserLock />} text="Admin" />
) : (
''
)}
{ctxt.user && ctxt.user.email ? (
<TopBarLinkA
disabled={dashboardSelected}
href="/dashboard"
icon={<FaHammer />}
text={t`Constructor Dashboard`}
/>
) : (
''
)}
<TopBarLinkA
disabled={accountSelected}
href="/account"
icon={<FaUser />}
text={t`Account`}
/>
</TopBar>
);
}
Example #3
| Source File: VideoWidget.tsx From 3Speak-app with GNU General Public License v3.0 | 4 votes |
|
export function VideoWidget(props: any) {
const video_info = useMemo(() => {
return props
}, [])
const reflink = useMemo(() => {
return Reflink.parse(props.reflink)
}, [props.reflink])
const [thumbnailUrl, setThumbnailUrl] = useState('')
useEffect(() => {
const load = async () => {
let thumbnail: string
if (props.isNsfw === true) {
thumbnail = nsfwWarning
} else {
const [, author, permlink] = props.reflink.split(':')
thumbnail = await VideoService.getNewThumbnailURL(author, permlink)
}
setThumbnailUrl(thumbnail)
}
void load()
}, [])
return (
<HashRouter>
<div className=" col-lg-3 col-md-4 col-xl-2 col-xxl-2 col-6 p-2 mb-3 marg_bot1 videowidget-padding">
<div className="teaser_holder text-center">
<div className="card-label card-label-views">
<img className="play_i" src={PlaySVG} height="11px" />
<span>{props.views}</span>
</div>
<div className="card-label">
{(() => {
const pattern = DateTime.compile('mm:ss')
return DateTime.format(new Date(video_info.duration * 1000), pattern)
})()}
</div>
<a href={`#/watch/${props.reflink}`}>
<img
style={{
width: '100% !important',
padding: '5px',
maxHeight: '13em',
}}
className="img-fluid bg-dark"
src={thumbnailUrl}
/>
</a>
</div>
<a href={`#/watch/${props.reflink}`}>
<b
data-toggle="tooltip"
data-placement="bottom"
title={video_info.title}
className="max-lines word-break"
data-original-title={video_info.title}
>
{video_info.title}
</b>
</a>
<div className="mt-2">
<span className="black_col">
<b>
<a href={`#/user/${props.reflink}`}>
{' '}
<FaUser /> {reflink.root}
</a>
</b>
</span>
<br />
<span>
{(() => {
const dateBest = convert(
new Date().getTime() - (new Date(video_info.created) as any) / 1,
)
.from('ms')
.toBest()
if (Math.round(dateBest.val) >= 2) {
return `${Math.round(dateBest.val)} ${dateBest.plural} ago`
} else {
return `${Math.round(dateBest.val)} ${dateBest.singular} ago`
}
})()}
</span>
{props.isIpfs ? (
<div className="card-label" style={{ right: '10px', bottom: '25px' }}>
<OverlayTrigger
overlay={<Tooltip id="video-available">Video available on IPFS</Tooltip>}
>
<img className="play_i" src={IpfsLogo} height="17px" />
</OverlayTrigger>
</div>
) : null}
</div>
</div>
</HashRouter>
)
}
Example #4
| Source File: SearchRepositories.tsx From hub with Apache License 2.0 | 4 votes |
|
SearchRepositories = (props: Props) => {
const inputEl = useRef<HTMLInputElement>(null);
const dropdownRef = useRef(null);
const itemsWrapper = useRef<HTMLDivElement | null>(null);
const [isSearching, setIsSearching] = useState(false);
const [repositories, setRepositories] = useState<Repository[] | null>(null);
const [searchName, setSearchName] = useState<string>('');
const [dropdownTimeout, setDropdownTimeout] = useState<NodeJS.Timeout | null>(null);
const [highlightedItem, setHighlightedItem] = useState<number | null>(null);
useOutsideClick([dropdownRef], !isNull(repositories), () => cleanSearch());
async function searchRepositories() {
try {
setIsSearching(true);
let query: SearchQuery = {
name: searchName,
limit: DEFAULT_LIMIT,
offset: 0,
};
if (props.extraQueryParams) {
query = { ...query, filters: props.extraQueryParams };
}
const data = await API.searchRepositories(query);
setRepositories(data.items);
setIsSearching(false);
} catch (err: any) {
if (err.kind !== ErrorKind.Unauthorized) {
alertDispatcher.postAlert({
type: 'danger',
message: 'An error occurred searching repositories, please try again later.',
});
} else {
props.onAuthError();
}
setRepositories(null);
setIsSearching(false);
}
}
const saveSelectedRepository = (item: Repository): void => {
setRepositories(null);
setSearchName('');
inputEl.current!.value = '';
props.onSelection(item);
setHighlightedItem(null);
};
const onChange = (e: ChangeEvent<HTMLInputElement>) => {
setSearchName(e.target.value);
setHighlightedItem(null);
};
const checkIfRepoIsDisabled = (item: Repository): boolean => {
let isDisabled = false;
if (!isUndefined(props.disabledRepositories)) {
isDisabled =
(!isUndefined(props.disabledRepositories.ids) && props.disabledRepositories.ids.includes(item.repositoryId!)) ||
(!isUndefined(props.disabledRepositories.users) &&
!isNull(item.userAlias) &&
!isUndefined(item.userAlias) &&
props.disabledRepositories.users.includes(item.userAlias)) ||
(!isUndefined(props.disabledRepositories.organizations) &&
!isNull(item.organizationName) &&
!isUndefined(item.organizationName) &&
props.disabledRepositories.organizations.includes(item.organizationName));
}
return isDisabled;
};
const onKeyDown = (e: KeyboardEvent<HTMLInputElement>): void => {
switch (e.key) {
case 'Escape':
cleanSearch();
return;
case 'ArrowDown':
updateHighlightedItem('down');
return;
case 'ArrowUp':
updateHighlightedItem('up');
return;
case 'Enter':
e.preventDefault();
if (!isNull(repositories) && !isNull(highlightedItem)) {
const selectedRepo = repositories[highlightedItem];
if (selectedRepo && !checkIfRepoIsDisabled(selectedRepo)) {
saveSelectedRepository(selectedRepo);
}
}
return;
default:
return;
}
};
const updateHighlightedItem = (arrow: 'up' | 'down') => {
if (!isNull(repositories) && repositories.length > 0) {
if (!isNull(highlightedItem)) {
let newIndex: number = arrow === 'up' ? highlightedItem - 1 : highlightedItem + 1;
if (newIndex > repositories.length - 1) {
newIndex = 0;
}
if (newIndex < 0) {
newIndex = repositories.length - 1;
}
scrollDropdown(newIndex);
setHighlightedItem(newIndex);
} else {
const newIndex = arrow === 'up' ? repositories.length - 1 : 0;
scrollDropdown(newIndex);
setHighlightedItem(newIndex);
}
}
};
const forceFocus = (): void => {
if (!isNull(inputEl) && !isNull(inputEl.current)) {
inputEl.current.focus();
}
};
const cleanTimeout = () => {
if (!isNull(dropdownTimeout)) {
clearTimeout(dropdownTimeout);
setDropdownTimeout(null);
}
};
const cleanSearch = () => {
setRepositories(null);
setSearchName('');
setHighlightedItem(null);
};
const scrollDropdown = (index: number) => {
if (itemsWrapper && itemsWrapper.current) {
const itemsOnScreen = Math.floor(itemsWrapper.current.clientHeight / ITEM_HEIGHT) - 1;
if (index + 1 > itemsOnScreen) {
itemsWrapper.current.scroll(0, (index - itemsOnScreen) * ITEM_HEIGHT);
} else {
itemsWrapper.current.scroll(0, 0);
}
}
};
useEffect(() => {
const isInputFocused = inputEl.current === document.activeElement;
if (searchName.length >= MIN_CHARACTERS_SEARCH && isInputFocused) {
cleanTimeout();
setDropdownTimeout(
setTimeout(() => {
searchRepositories();
}, SEARCH_DELAY)
);
} else {
cleanSearch();
}
return () => {
if (!isNull(dropdownTimeout)) {
clearTimeout(dropdownTimeout);
}
};
}, [searchName]); /* eslint-disable-line react-hooks/exhaustive-deps */
return (
<div className="position-relative">
<div className="d-flex flex-row">
<div
className={`flex-grow-1 d-flex align-items-stretch overflow-hidden position-relative searchBar lh-base bg-white ${styles.inputWrapper}`}
>
<div
data-testid="searchBarIcon"
className={`d-flex align-items-center ${styles.iconWrapper}`}
onClick={forceFocus}
>
<FiSearch />
</div>
<input
ref={inputEl}
type="text"
className={`flex-grow-1 pe-4 ps-2 ps-md-0 border-0 shadow-none bg-transparent ${styles.input}`}
name="searchRepositoriesInput"
aria-label="Search repositories"
autoComplete="new-input"
onChange={onChange}
onKeyDown={onKeyDown}
spellCheck="false"
/>
{isSearching && (
<div className={`position-absolute text-secondary ${styles.loading}`}>
<span data-testid="searchBarSpinning" className="spinner-border spinner-border-sm" />
</div>
)}
</div>
</div>
{!isNull(repositories) && (
<div ref={dropdownRef} className={`dropdown-menu w-100 p-0 shadow-sm show overflow-hidden ${styles.dropdown}`}>
{repositories.length === 0 ? (
<p className="m-3 text-center">
We can't seem to find any repositories that match your search for{' '}
<span className="fw-bold">{searchName}</span>
</p>
) : (
<div className={`overflow-scroll ${styles.tableWrapper}`} ref={itemsWrapper}>
<table
className={`table table-hover table-sm mb-0 text-break ${styles.table}`}
role="grid"
aria-labelledby={props.label}
>
<thead>
<tr>
<th scope="col" className={`${styles.fitCell} d-none d-sm-table-cell`}></th>
<th scope="col" className={styles.repoCell}>
Repository
</th>
{props.visibleUrl && (
<th scope="col" className="d-none d-md-table-cell">
Url
</th>
)}
<th scope="col">Publisher</th>
</tr>
</thead>
<tbody>
{repositories.map((item: Repository, index: number) => {
const isDisabled = checkIfRepoIsDisabled(item);
return (
<tr
data-testid="repoItem"
role="button"
className={classnames(
{ [styles.clickableCell]: !isDisabled },
{ [styles.disabledCell]: isDisabled },
{ [styles.activeCell]: index === highlightedItem }
)}
onClick={() => {
if (!isDisabled) {
saveSelectedRepository(item);
}
}}
key={`repo_${item.name!}`}
onMouseOver={() => setHighlightedItem(index)}
onMouseOut={() => setHighlightedItem(null)}
>
<td className="align-middle text-center d-none d-sm-table-cell">
<div className="mx-2">
<RepositoryIcon kind={item.kind} className={`w-auto ${styles.icon}`} />
</div>
</td>
<td className="align-middle">
<div className={styles.truncateWrapper}>
<div className="text-truncate">
{searchName === '' ? (
<>{item.name}</>
) : (
<>
{regexifyString({
pattern: new RegExp(escapeRegExp(searchName), 'gi'),
decorator: (match: string, index: number) => {
return (
<span key={`match_${item.name}_${index}`} className="fw-bold highlighted">
{match}
</span>
);
},
input: item.name,
})}
</>
)}
</div>
</div>
</td>
{props.visibleUrl && (
<td className="align-middle d-none d-md-table-cell">
<div className={styles.truncateWrapper}>
<div className="text-truncate">
<small>{item.url}</small>
</div>
</div>
</td>
)}
<td className="align-middle">
<div className="text-dark d-flex flex-row align-items-center">
<span className={`me-1 ${styles.tinyIcon}`}>
{item.userAlias ? <FaUser /> : <MdBusiness />}
</span>
{item.userAlias || item.organizationDisplayName || item.organizationName}
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
)}
</div>
)}
</div>
);
}
Example #5
| Source File: UserContext.tsx From hub with Apache License 2.0 | 4 votes |
|
UserContext = () => {
const { ctx, dispatch } = useContext(AppCtx);
const [organizations, setOrganizations] = useState<Organization[] | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(false);
const alias = ctx.user!.alias;
const [openStatus, setOpenStatus] = useState(false);
const ref = useRef(null);
useOutsideClick([ref], openStatus, () => setOpenStatus(false));
const handleChange = (value: string | Organization): void => {
if (isString(value)) {
authorizer.updateCtx();
dispatch(unselectOrg());
} else {
authorizer.updateCtx(value.name);
dispatch(updateOrg(value.name));
}
setOpenStatus(false);
};
async function fetchOrganizations() {
try {
setIsLoading(true);
const allOrganizations = await API.getAllUserOrganizations();
const confirmedOrganizations = allOrganizations.filter((org: Organization) => org.confirmed);
if (ctx.prefs.controlPanel.selectedOrg) {
const selectedOrg = confirmedOrganizations.find(
(org: Organization) => org.name === ctx.prefs.controlPanel.selectedOrg
);
if (isUndefined(selectedOrg)) {
dispatch(unselectOrg());
} else {
authorizer.updateCtx(ctx.prefs.controlPanel.selectedOrg);
}
}
setOrganizations(confirmedOrganizations);
setIsLoading(false);
} catch (err: any) {
setIsLoading(false);
if (err.kind !== ErrorKind.Unauthorized) {
setOrganizations([]);
}
}
}
useEffect(() => {
fetchOrganizations();
authorizer.init(ctx.prefs.controlPanel.selectedOrg);
}, []); /* eslint-disable-line react-hooks/exhaustive-deps */
return (
<div className={`position-relative ${styles.ctxWrapper}`}>
<div className="d-flex flex-column">
<small className={`text-uppercase text-muted ${styles.legendCtx}`}>Control panel context</small>
<div className="d-flex flex-row align-items-center">
<button
className={`btn btn-primary rounded-pill btn-sm pe-3 position-relative lh-1 ${styles.ctxBtn}`}
type="button"
onClick={() => {
fetchOrganizations();
setOpenStatus(true);
}}
aria-label="Open context"
aria-expanded={openStatus}
>
<div className="d-flex flex-row align-items-center">
{!isUndefined(ctx.prefs.controlPanel.selectedOrg) ? (
<>
<div className={`badge bg-light text-dark rounded-pill me-2 p-0 ${styles.badgeIcon}`}>
<MdBusiness />
</div>
<div className={`flex-grow-1 text-start me-1 text-truncate ${styles.badgeContent}`}>
{ctx.prefs.controlPanel.selectedOrg}
</div>
</>
) : (
<>
<div className={`badge bg-light text-dark rounded-pill me-2 p-0 ${styles.badgeIcon}`}>
<FaUser />
</div>
<div className={`flex-grow-1 text-start me-1 text-truncate ${styles.badgeContent}`}>{alias}</div>
</>
)}
</div>
<div className={`position-absolute textLight ${styles.caret}`}>
<FaCaretDown />
</div>
</button>
</div>
{isLoading && (
<div className={`position-absolute text-secondary ${styles.loading}`} role="status">
<span className="spinner-border spinner-border-sm" />
</div>
)}
</div>
<div
ref={ref}
role="menu"
className={classnames('dropdown-menu dropdown-menu-end', styles.dropdown, { show: openStatus })}
>
<div className={`dropdown-arrow ${styles.arrow}`} />
<button className="dropdown-item mw-100" onClick={() => handleChange(alias)} aria-label="Activate user context">
<div className="d-flex flex-row align-items-center text-truncate">
<FaUser className={`me-2 ${styles.icon}`} />
<div className="flex-grow-1 text-truncate">{alias}</div>
{isUndefined(ctx.prefs.controlPanel.selectedOrg) && (
<GoCheck className={`ms-2 text-success ${styles.icon}`} />
)}
</div>
</button>
{organizations && (
<>
{organizations.map((org: Organization) => (
<button
key={`opt_${org.name}`}
className="dropdown-item"
onClick={() => handleChange(org)}
aria-label={`Activate org ${org.name} context`}
>
<div className="d-flex flex-row align-items-center text-truncate">
<MdBusiness className={`me-2 ${styles.icon}`} />
<div className="flex-grow-1 text-truncate">{org.name}</div>
{!isUndefined(ctx.prefs.controlPanel.selectedOrg) &&
org.name === ctx.prefs.controlPanel.selectedOrg && (
<GoCheck className={`ms-2 text-success ${styles.icon}`} />
)}
</div>
</button>
))}
</>
)}
</div>
</div>
);
}
Example #6
| Source File: Card.tsx From hub with Apache License 2.0 | 4 votes |
|
MemberCard = (props: Props) => {
const { ctx, dispatch } = useContext(AppCtx);
const [isDeletingMember, setIsDeletingMember] = useState(false);
const dropdownMenu = useRef(null);
const [dropdownMenuStatus, setDropdownMenuStatus] = useState<boolean>(false);
const [modalStatus, setModalStatus] = useState<boolean>(false);
const closeDropdown = () => {
setDropdownMenuStatus(false);
};
useOutsideClick([dropdownMenu], dropdownMenuStatus, closeDropdown);
async function deleteMember() {
try {
setIsDeletingMember(true);
await API.deleteOrganizationMember(ctx.prefs.controlPanel.selectedOrg!, props.member.alias);
setIsDeletingMember(false);
if (props.member.alias === ctx.user!.alias) {
dispatch(unselectOrg());
} else {
props.onSuccess();
}
} catch (err: any) {
setIsDeletingMember(false);
if (err.kind !== ErrorKind.Unauthorized) {
let errorMessage = 'An error occurred removing member from the organization, please try again later.';
if (err.kind === ErrorKind.Forbidden) {
errorMessage = 'You do not have permissions to remove members from the organization.';
}
alertDispatcher.postAlert({
type: 'danger',
message: errorMessage,
});
} else {
props.onAuthError();
}
}
}
const isUser = props.member.alias === ctx.user!.alias;
const getFullName = (): string => {
let fullName = '';
if (props.member.firstName) {
fullName += `${props.member.firstName} `;
}
if (props.member.lastName) {
fullName += props.member.lastName;
}
return fullName;
};
return (
<div className="col-12 col-xxl-6 py-sm-3 py-2 px-0 px-xxl-3" data-testid="memberCard">
<div className="card h-100">
<div className="card-body d-flex flex-column h-100">
<div className="d-flex flex-row w-100 justify-content-between align-items-start">
<div
className={`d-flex align-items-center justify-content-center p-1 overflow-hidden me-2 border border-2 rounded-circle bg-white ${styles.imageWrapper} imageWrapper`}
>
<FaUser className={`fs-4 ${styles.image}`} />
</div>
<div className="flex-grow-1">
<div className="d-flex flex-row align-items-start">
<div className="h5 mb-1">
{props.member.firstName || props.member.lastName ? getFullName() : props.member.alias}
</div>
{!isUndefined(props.member.confirmed) && !props.member.confirmed && (
<div className={classnames('ms-3', { 'me-3': props.membersNumber > 1 })}>
<span className="badge bg-warning">Invitation not accepted yet</span>
</div>
)}
</div>
<div className="h6 text-muted me-1 fst-italic">{props.member.alias}</div>
</div>
{props.membersNumber > 1 && (
<>
{modalStatus && (
<Modal
className="d-inline-block"
closeButton={
<>
<button
className="btn btn-sm btn-outline-secondary"
onClick={() => setModalStatus(false)}
aria-label="Cancel"
>
<div className="d-flex flex-row align-items-center">
<IoMdCloseCircle className="me-2" />
<span>Cancel</span>
</div>
</button>
<button
className="btn btn-sm btn-danger ms-3"
onClick={(e) => {
e.preventDefault();
deleteMember();
}}
disabled={isDeletingMember}
aria-label={isUser ? 'Leave organization' : 'Remove member'}
>
<div className="d-flex flex-row align-items-center text-uppercase">
{isDeletingMember ? (
<>
<span className="spinner-grow spinner-grow-sm" role="status" aria-hidden="true" />
<span className="ms-2">{isUser ? 'Leaving...' : 'Removing...'}</span>
</>
) : (
<>
{isUser ? (
<FaSignOutAlt className={`me-2 ${styles.btnIcon}`} />
) : (
<FaUserMinus className={`me-2 ${styles.btnIcon}`} />
)}
<span>{isUser ? 'Leave' : 'Remove'}</span>
</>
)}
</div>
</button>
</>
}
header={
<div className={`h3 flex-grow-1 m-2 ${styles.title}`}>
{isUser ? 'Leave ' : 'Remove from '} organization
</div>
}
onClose={() => setModalStatus(false)}
open
>
<div className="mt-3 mw-100 text-center">
<p>
{isUser
? 'Are you sure you want to leave this organization?'
: 'Are you sure you want to remove this member from this organization?'}
</p>
</div>
</Modal>
)}
<div className="ms-auto">
<div
ref={dropdownMenu}
className={classnames('dropdown-menu dropdown-menu-end p-0', styles.dropdownMenu, {
show: dropdownMenuStatus,
})}
>
<div className="dropdown-arrow" />
{isUser ? (
<button
className="dropdown-item btn btn-sm rounded-0 text-dark"
onClick={(e: ReactMouseEvent<HTMLButtonElement>) => {
e.preventDefault();
closeDropdown();
setModalStatus(true);
}}
aria-label="Open leave organization modal"
>
<div className="d-flex flex-row align-items-center">
<FaSignOutAlt className={`me-2 ${styles.btnIcon}`} />
<span>Leave</span>
</div>
</button>
) : (
<ActionBtn
className="dropdown-item btn btn-sm rounded-0 text-dark"
onClick={(e: ReactMouseEvent<HTMLButtonElement>) => {
e.preventDefault();
closeDropdown();
setModalStatus(true);
}}
action={AuthorizerAction.DeleteOrganizationMember}
label="Open leave organization modal"
>
<>
<FaUserMinus className={`me-2 ${styles.btnIcon}`} />
<span>Remove</span>
</>
</ActionBtn>
)}
</div>
<button
className={`btn btn-outline-secondary rounded-circle p-0 text-center ${styles.btnDropdown}`}
onClick={() => setDropdownMenuStatus(true)}
aria-label="Open menu"
aria-expanded={dropdownMenuStatus}
>
<BsThreeDotsVertical />
</button>
</div>
</>
)}
</div>
</div>
</div>
</div>
);
}
Example #7
| Source File: ClaimOwnershipModal.tsx From hub with Apache License 2.0 | 4 votes |
|
ClaimRepositoryOwnerShipModal = (props: Props) => {
const { ctx } = useContext(AppCtx);
const siteName = getMetaTag('siteName');
const form = useRef<HTMLFormElement>(null);
const [isFetchingOrgs, setIsFetchingOrgs] = useState(false);
const [isSending, setIsSending] = useState(false);
const [isValidated, setIsValidated] = useState(false);
const [apiError, setApiError] = useState<string | null>(null);
const [apiOrgsError, setApiOrgsError] = useState<string | null>(null);
const [apiReposError, setApiReposError] = useState<string | null>(null);
const organizationName = ctx.prefs.controlPanel.selectedOrg;
const [selectedClaimOption, setSelectedClaimOption] = useState<'org' | 'user'>(
!isUndefined(organizationName) ? 'org' : 'user'
);
const [claimingOrg, setClaimingOrg] = useState<string>(organizationName || '');
const [organizations, setOrganizations] = useState<Organization[] | undefined>(undefined);
const [repoItem, setRepoItem] = useState<Repository | null>(null);
const handleOrgChange = (event: ChangeEvent<HTMLSelectElement>) => {
setClaimingOrg(event.target.value);
setSelectedClaimOption(event.target.value === '' ? 'user' : 'org');
};
const handleClaimingFromOpt = (type: 'user' | 'org') => {
if (type === 'user') {
setClaimingOrg('');
}
setSelectedClaimOption(type);
};
// Clean API error when form is focused after validation
const cleanApiError = () => {
if (!isNull(apiError)) {
setApiError(null);
setApiReposError(null);
setApiOrgsError(null);
}
};
const onCloseModal = () => {
props.onClose();
};
const onRepoSelect = (repo: Repository): void => {
setRepoItem(repo);
};
async function claimRepository() {
try {
await API.claimRepositoryOwnership(repoItem!, claimingOrg || undefined);
if (!isUndefined(props.onSuccess)) {
props.onSuccess();
}
setIsSending(false);
onCloseModal();
} catch (err: any) {
setIsSending(false);
if (err.kind !== ErrorKind.Unauthorized) {
let error = compoundErrorMessage(err, 'An error occurred claiming the repository');
if (err.kind === ErrorKind.Forbidden) {
error =
'You do not have permissions to claim this repository ownership. Please make sure your metadata file has been setup correctly.';
}
setApiError(error);
} else {
props.onAuthError();
}
}
}
const submitForm = () => {
cleanApiError();
setIsSending(true);
if (form.current && validateForm(form.current)) {
claimRepository();
} else {
setIsSending(false);
}
};
const validateForm = (form: HTMLFormElement): boolean => {
setIsValidated(true);
return form.checkValidity();
};
const getOrgsNames = (): string[] => {
if (organizations) {
return organizations.map((org: Organization) => org.name);
}
return [];
};
useEffect(() => {
async function fetchOrganizations() {
try {
setIsFetchingOrgs(true);
const orgs = await API.getAllUserOrganizations();
const confirmedOrganizations = orgs.filter((org: Organization) => org.confirmed);
setOrganizations(confirmedOrganizations);
setApiOrgsError(null);
setIsFetchingOrgs(false);
} catch (err: any) {
setIsFetchingOrgs(false);
if (err.kind !== ErrorKind.Unauthorized) {
setOrganizations([]);
setApiOrgsError('An error occurred getting your organizations, please try again later.');
} else {
props.onAuthError();
}
}
}
fetchOrganizations();
}, [organizationName, props]);
const getPublisher = (repo: Repository) => (
<small className="ms-0 ms-sm-2">
<span className="d-none d-sm-inline">(</span>
<small className={`d-none d-md-inline text-muted me-1 text-uppercase ${styles.legend}`}>Publisher: </small>
<div className={`d-inline me-1 ${styles.tinyIcon}`}>{repo.userAlias ? <FaUser /> : <MdBusiness />}</div>
<span>{repo.userAlias || repo.organizationDisplayName || repo.organizationName}</span>
<span className="d-none d-sm-inline">)</span>
</small>
);
return (
<Modal
header={<div className={`h3 m-2 flex-grow-1 ${styles.title}`}>Claim repository ownership</div>}
open={props.open}
modalClassName={styles.modal}
size="xl"
closeButton={
<button
className="btn btn-sm btn-outline-secondary"
type="button"
disabled={isSending || isNull(repoItem)}
onClick={submitForm}
aria-label="Claim ownership"
>
{isSending ? (
<>
<span className="spinner-grow spinner-grow-sm" role="status" aria-hidden="true" />
<span className="ms-2">Claiming ownership...</span>
</>
) : (
<div className="text-uppercase d-flex flex-row align-items-center">
<RiArrowLeftRightLine className="me-2" />
<div>Claim ownership</div>
</div>
)}
</button>
}
onClose={onCloseModal}
error={apiOrgsError || apiReposError || apiError}
cleanError={cleanApiError}
noScrollable
>
<div className="w-100">
<div className="mt-4">
<p>
Before claiming a repository ownership, we need to verify that you actually own it. To prove that, you need
to add a{' '}
<ExternalLink
href="https://github.com/artifacthub/hub/blob/master/docs/metadata/artifacthub-repo.yml"
className="text-primary fw-bold"
label="Open documentation"
>
metadata file
</ExternalLink>{' '}
to your repository and include yourself (or the person who will do the request) as an owner. This will be
checked during the ownership claim process. Please make sure the email used in the metadata file matches
with the one you use in {siteName}.
</p>
</div>
<form
data-testid="claimRepoForm"
ref={form}
className={classnames('w-100', { 'needs-validation': !isValidated }, { 'was-validated': isValidated })}
onFocus={cleanApiError}
autoComplete="on"
noValidate
>
<div>
<div className="d-flex flex-column my-3">
<label className={`form-label fw-bold ${styles.label}`} htmlFor="description">
Repository:
</label>
{!isNull(repoItem) ? (
<div
data-testid="activeRepoItem"
className={`border border-secondary w-100 rounded mt-1 ${styles.repoWrapper}`}
>
<div className="d-flex flex-row flex-nowrap align-items-stretch justify-content-between">
<div className="flex-grow-1 text-truncate py-2">
<div className="d-flex flex-row align-items-center h-100 text-truncate">
<div className="d-none d-md-inline">
<RepositoryIcon kind={repoItem.kind} className={`mx-3 w-auto ${styles.icon}`} />
</div>
<div className="ms-2 fw-bold mb-0 text-truncate text-muted">
<span className="text-dark">{repoItem.name}</span>{' '}
<small className="text-muted">({repoItem.url})</small>
<span className={`d-inline d-sm-none ${styles.legend}`}>
<span className="mx-2">/</span>
{getPublisher(repoItem)}
</span>
</div>
<div className="px-2 ms-auto w-50 text-dark text-truncate d-none d-sm-inline">
{getPublisher(repoItem)}
</div>
</div>
</div>
<div>
<button
className={`btn btn-close btn-sm h-100 rounded-0 border-start px-3 py-0 ${styles.closeButton}`}
onClick={() => setRepoItem(null)}
aria-label="Close"
></button>
</div>
</div>
</div>
) : (
<div className={`mt-2 ${styles.searchWrapper}`}>
<SearchRepositories
label="claim-repo-ownership"
disabledRepositories={{
users: ctx.user ? [ctx.user.alias] : [],
organizations: getOrgsNames(),
}}
onSelection={onRepoSelect}
onAuthError={props.onAuthError}
visibleUrl
/>
</div>
)}
</div>
<label id="claiming" className={`form-label fw-bold ${styles.label}`}>
Transfer to:
</label>
<div className="form-check mb-2">
<input
aria-labelledby="claiming user"
className="form-check-input"
type="radio"
name="claim"
id="user"
value="user"
checked={selectedClaimOption === 'user'}
onChange={() => handleClaimingFromOpt('user')}
required
/>
<label id="user" className={`form-check-label ${styles.label}`} htmlFor="user">
My user
</label>
</div>
<div className="form-check mb-3">
<input
aria-labelledby="claiming org"
className="form-check-input"
type="radio"
name="claim"
id="org"
value="org"
checked={selectedClaimOption === 'org'}
onChange={() => handleClaimingFromOpt('org')}
required
/>
<label id="org" className={`form-check-label ${styles.label}`} htmlFor="org">
Organization
</label>
</div>
</div>
<div className="d-flex flex-row align-items-center position-relative mb-3">
<div className=" w-75 mb-2">
<select
className="form-select"
aria-label="org-select"
value={claimingOrg}
onChange={handleOrgChange}
required={selectedClaimOption === 'org'}
>
{!isUndefined(organizations) && (
<>
<option value="">Select organization</option>
{organizations.map((org: Organization) => (
<option key={`opt_${org.name}`} value={org.name}>
{org.name}
</option>
))}
</>
)}
</select>
<div className={`invalid-feedback ${styles.fieldFeedback}`}>This field is required</div>
</div>
{isFetchingOrgs && (
<div className="d-inline ms-3">
<span className="spinner-border spinner-border-sm text-primary" />
</div>
)}
</div>
<small className="text-muted text-break mt-3">
<p>It may take a few minutes for this change to be visible across the Hub.</p>
</small>
</form>
</div>
</Modal>
);
}
Example #8
| Source File: Modal.tsx From hub with Apache License 2.0 | 4 votes |
|
OptOutModal = (props: Props) => {
const { ctx } = useContext(AppCtx);
const [apiError, setApiError] = useState<string | null>(null);
const [repoItem, setRepoItem] = useState<Repository | null>(null);
const [eventKind, setEventKind] = useState<EventKind>(EventKind.RepositoryTrackingErrors);
const [isSending, setIsSending] = useState<boolean>(false);
const [userOrganizations, setUserOrganizations] = useState<string[] | undefined>(undefined);
const onCloseModal = () => {
setRepoItem(null);
props.onClose();
};
const submitForm = () => {
if (!isNull(repoItem)) {
addOptOut();
}
};
const onRepoSelect = (repo: Repository): void => {
setRepoItem(repo);
};
async function getAllUserOrganizations() {
try {
const orgs = await API.getAllUserOrganizations();
const orgsList = orgs.map((org: Organization) => org.name);
setUserOrganizations(orgsList);
} catch (err: any) {
setUserOrganizations([]);
}
}
useEffect(() => {
getAllUserOrganizations();
}, []); /* eslint-disable-line react-hooks/exhaustive-deps */
async function addOptOut() {
try {
setIsSending(true);
await API.addOptOut(repoItem!.repositoryId!, eventKind);
setRepoItem(null);
setIsSending(false);
props.onSuccess();
props.onClose();
} catch (err: any) {
setIsSending(false);
if (err.kind !== ErrorKind.Unauthorized) {
alertDispatcher.postAlert({
type: 'danger',
message: `An error occurred adding the opt-out entry for ${props.getNotificationTitle(
eventKind
)} notifications for repository ${repoItem!.displayName || repoItem!.name}, please try again later.`,
});
}
}
}
const getPublisher = (repo: Repository) => (
<small className="ms-0 ms-sm-2">
<span className="d-none d-sm-inline">(</span>
<small className="d-none d-md-inline text-muted me-1 text-uppercase">Publisher: </small>
<div className={`d-inline me-1 ${styles.tinyIcon}`}>{repo.userAlias ? <FaUser /> : <MdBusiness />}</div>
<span>{repo.userAlias || repo.organizationDisplayName || repo.organizationName}</span>
<span className="d-none d-sm-inline">)</span>
</small>
);
return (
<Modal
header={<div className={`h3 m-2 flex-grow-1 ${styles.title}`}>Add opt-out entry</div>}
open={props.open}
modalDialogClassName={styles.modal}
closeButton={
<button
className="btn btn-sm btn-outline-secondary"
type="button"
disabled={isNull(repoItem) || isSending}
onClick={submitForm}
aria-label="Add opt-out entry"
>
{isSending ? (
<>
<span className="spinner-grow spinner-grow-sm" role="status" aria-hidden="true" />
<span className="ms-2">Opting out</span>
</>
) : (
<div className="d-flex flex-row align-items-center text-uppercase">
<IoMdLogOut className="me-2" />
<div>Opt-out</div>
</div>
)}
</button>
}
onClose={onCloseModal}
error={apiError}
cleanError={() => setApiError(null)}
noScrollable
>
<div className="w-100 position-relative">
<label className={`form-label fw-bold ${styles.label}`} htmlFor="kind">
Events
</label>
<div className="d-flex flex-column flex-wrap pb-2">
{REPOSITORY_SUBSCRIPTIONS_LIST.map((subs: SubscriptionItem) => {
return (
<div className="mb-2" key={`radio_${subs.name}`}>
<div className="form-check text-nowrap my-1 my-md-0">
<input
className="form-check-input"
type="radio"
name="kind"
id={subs.name}
value={subs.kind}
disabled={!subs.enabled}
checked={subs.kind === eventKind}
onChange={() => setEventKind(subs.kind)}
required
/>
<label className="form-check-label" htmlFor={subs.name}>
<div className="d-flex flex-row align-items-center ms-2">
{subs.icon}
<div className="ms-1">{subs.title}</div>
</div>
</label>
</div>
</div>
);
})}
</div>
<div className="d-flex flex-column mb-3">
<label className={`form-label fw-bold ${styles.label}`} htmlFor="description">
Repository
</label>
<small className="mb-2">Select repository:</small>
{!isNull(repoItem) ? (
<div
data-testid="activeRepoItem"
className={`border border-secondary w-100 rounded mt-1 ${styles.repoWrapper}`}
>
<div className="d-flex flex-row flex-nowrap align-items-stretch justify-content-between">
<div className="flex-grow-1 text-truncate py-2">
<div className="d-flex flex-row align-items-center h-100 text-truncate">
<div className="d-none d-md-inline">
<RepositoryIcon kind={repoItem.kind} className={`mx-3 ${styles.icon}`} />
</div>
<div className="ms-2 me-2 me-sm-0 fw-bold mb-0 text-truncate">
{repoItem.name}
<span className="d-inline d-sm-none">
<span className="mx-2">/</span>
{getPublisher(repoItem)}
</span>
</div>
<div className="px-2 ms-auto w-50 text-dark text-truncate d-none d-sm-inline">
{getPublisher(repoItem)}
</div>
</div>
</div>
<div>
<button
className={`btn btn-close h-100 rounded-0 border-start px-3 py-0 ${styles.closeButton}`}
onClick={() => setRepoItem(null)}
aria-label="Close"
></button>
</div>
</div>
</div>
) : (
<div className={`mt-2 ${styles.searchWrapper}`}>
<SearchRepositories
label="repo-subscriptions"
disabledRepositories={{
ids: props.disabledList,
}}
extraQueryParams={{ user: ctx.user ? [ctx.user.alias] : [], org: userOrganizations || [] }}
onSelection={onRepoSelect}
onAuthError={props.onAuthError}
visibleUrl={false}
/>
</div>
)}
</div>
</div>
</Modal>
);
}
Example #9
| Source File: index.tsx From hub with Apache License 2.0 | 4 votes |
|
RepositoriesSection = (props: Props) => {
const title = useRef<HTMLDivElement>(null);
const [isLoading, setIsLoading] = useState(false);
const [optOutList, setOptOutList] = useState<OptOutByRepo[] | undefined>(undefined);
const [optOutFullList, setOptOutFullList] = useState<OptOutByRepo[] | undefined>(undefined);
const [repoIdsList, setRepoIdsList] = useState<string[]>([]);
const [optOutItems, setOptOutItems] = useState<OptOutItem[] | undefined>(undefined);
const [modalStatus, setModalStatus] = useState<boolean>(false);
const [activePage, setActivePage] = useState<number>(1);
const calculateOffset = (pageNumber?: number): number => {
return DEFAULT_LIMIT * ((pageNumber || activePage) - 1);
};
const [offset, setOffset] = useState<number>(calculateOffset());
const [total, setTotal] = useState<number | undefined>(undefined);
const onPageNumberChange = (pageNumber: number): void => {
setOffset(calculateOffset(pageNumber));
setActivePage(pageNumber);
if (title && title.current) {
title.current.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth' });
}
};
const getNotificationTitle = (kind: EventKind): string => {
let title = '';
const notif = REPOSITORY_SUBSCRIPTIONS_LIST.find((subs: SubscriptionItem) => subs.kind === kind);
if (!isUndefined(notif)) {
title = notif.title.toLowerCase();
}
return title;
};
const getVisibleOptOut = (items: OptOutByRepo[]): OptOutByRepo[] => {
if (isUndefined(items)) return [];
return items.slice(offset, offset + DEFAULT_LIMIT);
};
const sortOptOutList = (items: OptOutItem[]): OptOutByRepo[] => {
let list: OptOutByRepo[] = [];
items.forEach((item: OptOutItem) => {
const itemIndex = list.findIndex(
(obr: OptOutByRepo) => obr.repository.repositoryId === item.repository.repositoryId
);
if (itemIndex >= 0) {
list[itemIndex] = { ...list[itemIndex], optOutItems: [...list[itemIndex].optOutItems, item] };
} else {
list.push({
repository: item.repository,
optOutItems: [item],
});
}
});
return sortBy(list, 'repository.name');
};
async function getOptOutList(callback?: () => void) {
try {
setIsLoading(true);
const items = await API.getAllOptOut();
const formattedItems = sortOptOutList(items);
setOptOutItems(items);
setOptOutFullList(formattedItems);
setRepoIdsList(formattedItems ? formattedItems.map((item: OptOutByRepo) => item.repository.repositoryId!) : []);
setTotal(formattedItems.length);
const newVisibleItems = getVisibleOptOut(formattedItems);
// When current page is empty after changes
if (newVisibleItems.length === 0 && activePage !== 1) {
onPageNumberChange(1);
} else {
setOptOutList(newVisibleItems);
}
setIsLoading(false);
} catch (err: any) {
setIsLoading(false);
if (err.kind !== ErrorKind.Unauthorized) {
alertDispatcher.postAlert({
type: 'danger',
message: 'An error occurred getting your opt-out entries list, please try again later.',
});
setOptOutFullList([]);
setOptOutList([]);
} else {
props.onAuthError();
}
} finally {
if (callback) {
callback();
}
}
}
async function changeSubscription(changeProps: ChangeSubsProps) {
const { data, callback } = { ...changeProps };
try {
if (!isUndefined(data.optOutId)) {
await API.deleteOptOut(data.optOutId);
} else {
await API.addOptOut(data.repoId, data.kind);
}
getOptOutList(callback);
} catch (err: any) {
callback();
if (err.kind !== ErrorKind.Unauthorized) {
alertDispatcher.postAlert({
type: 'danger',
message: `An error occurred ${
!isUndefined(data.optOutId) ? 'deleting' : 'adding'
} the opt-out entry for ${getNotificationTitle(data.kind)} notifications for repository ${
data.repoName
}, please try again later.`,
});
getOptOutList(); // Get opt-out if changeSubscription fails
} else {
props.onAuthError();
}
}
}
useEffect(() => {
getOptOutList();
}, []); /* eslint-disable-line react-hooks/exhaustive-deps */
useEffect(() => {
setOptOutList(getVisibleOptOut(optOutFullList || []));
}, [activePage]); /* eslint-disable-line react-hooks/exhaustive-deps */
return (
<div className="mt-5 pt-3">
{(isUndefined(optOutList) || isLoading) && <Loading />}
<div className="d-flex flex-row align-items-start justify-content-between pb-2">
<div ref={title} className={`h4 pb-0 ${styles.title}`}>
Repositories
</div>
<div>
<button
className={`btn btn-outline-secondary btn-sm text-uppercase ${styles.btnAction}`}
onClick={() => setModalStatus(true)}
aria-label="Open opt-out modal"
>
<div className="d-flex flex-row align-items-center justify-content-center">
<IoMdLogOut />
<span className="d-none d-md-inline ms-2">Opt-out</span>
</div>
</button>
</div>
</div>
<div className="mt-3 mt-md-3">
<p>
Repositories notifications are <span className="fw-bold">enabled by default</span>. However, you can opt-out
of notifications for certain kinds of events that happen in any of the repositories you can manage.
</p>
<p>
You will <span className="fw-bold">NOT</span> receive notifications when an event that matches any of the
repositories in the list is fired.
</p>
<div className="mt-4 mt-md-5">
{!isUndefined(optOutList) && optOutList.length > 0 && (
<div className="row">
<div className="col-12 col-xxxl-10">
<table className={`table table-bordered table-hover ${styles.table}`} data-testid="repositoriesList">
<thead>
<tr className={styles.tableTitle}>
<th scope="col" className={`align-middle text-center d-none d-sm-table-cell ${styles.fitCell}`}>
Kind
</th>
<th scope="col" className="align-middle w-50">
Repository
</th>
<th scope="col" className="align-middle w-50 d-none d-sm-table-cell">
Publisher
</th>
{REPOSITORY_SUBSCRIPTIONS_LIST.map((subs: SubscriptionItem) => (
<th
scope="col"
className={`align-middle text-nowrap ${styles.fitCell}`}
key={`title_${subs.kind}`}
>
<div className="d-flex flex-row align-items-center justify-content-center">
{subs.icon}
{subs.shortTitle && <span className="d-inline d-lg-none ms-2">{subs.shortTitle}</span>}
<span className="d-none d-lg-inline ms-2">{subs.title}</span>
</div>
</th>
))}
</tr>
</thead>
<tbody className={styles.body}>
{optOutList.map((item: OptOutByRepo) => {
const repoInfo: Repository = item.repository;
return (
<tr key={`subs_${repoInfo.repositoryId}`} data-testid="optOutRow">
<td className="align-middle text-center d-none d-sm-table-cell">
<RepositoryIcon kind={repoInfo.kind} className={`h-auto ${styles.icon}`} />
</td>
<td className="align-middle">
<div className="d-flex flex-row align-items-center">
<Link
data-testid="repoLink"
className="text-dark text-capitalize"
to={{
pathname: '/packages/search',
search: prepareQueryString({
pageNumber: 1,
filters: {
repo: [repoInfo.name],
},
}),
}}
>
{repoInfo.name}
</Link>
</div>
</td>
<td className="align-middle position-relative d-none d-sm-table-cell">
<span className={`mx-1 mb-1 ${styles.tinyIcon}`}>
{repoInfo.userAlias ? <FaUser /> : <MdBusiness />}
</span>{' '}
{repoInfo.userAlias ? (
<Link
data-testid="userLink"
className="text-dark"
to={{
pathname: '/packages/search',
search: prepareQueryString({
pageNumber: 1,
filters: {
user: [repoInfo.userAlias!],
},
}),
}}
>
{repoInfo.userAlias}
</Link>
) : (
<Link
data-testid="orgLink"
className="text-dark"
to={{
pathname: '/packages/search',
search: prepareQueryString({
pageNumber: 1,
filters: {
org: [repoInfo.organizationName!],
},
}),
}}
>
{repoInfo.organizationDisplayName || repoInfo.organizationName}
</Link>
)}
</td>
{REPOSITORY_SUBSCRIPTIONS_LIST.map((subs: SubscriptionItem, index: number) => {
const optItem = item.optOutItems.find((opt: OptOutItem) => subs.kind === opt.eventKind);
return (
<td className="align-middle text-center" key={`td_${repoInfo.name}_${subs.kind}`}>
<div className="text-center position-relative">
<SubscriptionSwitch
repoInfo={repoInfo}
kind={subs.kind}
enabled={subs.enabled}
optOutItem={optItem}
changeSubscription={changeSubscription}
/>
</div>
</td>
);
})}
</tr>
);
})}
{!isUndefined(total) && total > DEFAULT_LIMIT && (
<tr className={styles.paginationCell}>
<td className="align-middle text-center" colSpan={5}>
<Pagination
limit={DEFAULT_LIMIT}
offset={offset}
total={total}
active={activePage}
className="my-3"
onChange={onPageNumberChange}
/>
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
)}
</div>
</div>
{modalStatus && (
<OptOutModal
disabledList={repoIdsList}
optOutList={optOutItems}
onSuccess={getOptOutList}
onClose={() => setModalStatus(false)}
onAuthError={props.onAuthError}
getNotificationTitle={getNotificationTitle}
open
/>
)}
</div>
);
}
Example #10
| Source File: UserAuthDropdown.tsx From hub with Apache License 2.0 | 4 votes |
|
UserAuthDropdown = (props: Props) => {
const { ctx } = useContext(AppCtx);
const [openStatus, setOpenStatus] = useState(false);
const ref = useRef(null);
useOutsideClick([ref], openStatus, () => setOpenStatus(false));
return (
<div className="btn-group">
<button
className={`btn p-0 position-relative ${styles.btn}`}
type="button"
onClick={() => setOpenStatus(true)}
aria-label="Open menu"
>
<div className="d-flex flex-row align-items-center justify-content-center">
<div
className={classnames(
'rounded-circle d-flex align-items-center justify-content-center textLight userAuth overflow-hidden position-relative border border-2 overflow-hidden lh-1 fs-5 bg-white',
styles.imageWrapper,
{ [styles.iconWrapper]: isUndefined(ctx.user!.profileImageId) || isNull(ctx.user!.profileImageId) }
)}
>
{ctx.user && ctx.user.profileImageId ? (
<Image
imageId={ctx.user.profileImageId}
alt="User profile"
className="mw-100 h-auto"
classNameForSquare={`position-absolute top-0 start-0 w-100 h-100 ${styles.imageAsBg}`}
/>
) : (
<FaUser data-testid="profileIcon" className="rounded-circle" />
)}
</div>
<small className="ms-1 textLight">
<FaCaretDown />
</small>
</div>
</button>
<div ref={ref} className={classnames('dropdown-menu dropdown-menu-end', styles.dropdown, { show: openStatus })}>
<div className={`dropdown-arrow ${styles.arrow}`} />
<p className={`mt-2 mb-0 text-break ${styles.signedInText}`}>
Signed in as <span className="fw-bold">{ctx.user!.alias}</span>
</p>
<div className="dropdown-divider my-3" />
<ThemeMode device="desktop" onSelection={() => setOpenStatus(false)} />
<div className="dropdown-divider my-3" />
<Link
className="dropdown-item"
to={{
pathname: '/packages/starred',
}}
onClick={() => setOpenStatus(false)}
>
<div className="d-flex align-items-center">
<FaStar className="me-2" />
<div>Starred packages</div>
</div>
</Link>
<Link
className="dropdown-item"
to={{
pathname: '/control-panel',
}}
onClick={() => setOpenStatus(false)}
>
<div className="d-flex align-items-center">
<FaCog className="me-2" />
<div>Control Panel</div>
</div>
</Link>
<LogOut className="mb-2" onSuccess={() => setOpenStatus(false)} privateRoute={props.privateRoute} />
</div>
</div>
);
}
Example #11
| Source File: Builder.tsx From crosshare with GNU Affero General Public License v3.0 | 4 votes |
|
GridMode = ({
getMostConstrainedEntry,
reRunAutofill,
state,
dispatch,
setClueMode,
...props
}: GridModeProps) => {
const [muted, setMuted] = usePersistedBoolean('muted', false);
const [toggleKeyboard, setToggleKeyboard] = usePersistedBoolean(
'keyboard',
false
);
const { showSnackbar } = useSnackbar();
const gridRef = useRef<HTMLDivElement | null>(null);
const focusGrid = useCallback(() => {
if (gridRef.current) {
gridRef.current.focus();
}
}, []);
const physicalKeyboardHandler = useCallback(
(e: KeyboardEvent) => {
const mkey = fromKeyboardEvent(e);
if (isSome(mkey)) {
e.preventDefault();
if (mkey.value.k === KeyK.Enter && !state.isEnteringRebus) {
reRunAutofill();
return;
}
if (mkey.value.k === KeyK.Exclamation) {
const entry = getMostConstrainedEntry();
if (entry !== null) {
const ca: ClickedEntryAction = {
type: 'CLICKEDENTRY',
entryIndex: entry,
};
dispatch(ca);
}
return;
}
if (mkey.value.k === KeyK.Octothorp) {
const a: ToggleHiddenAction = { type: 'TOGGLEHIDDEN' };
dispatch(a);
}
const kpa: KeypressAction = { type: 'KEYPRESS', key: mkey.value };
dispatch(kpa);
}
},
[dispatch, reRunAutofill, state.isEnteringRebus, getMostConstrainedEntry]
);
useEventListener(
'keydown',
physicalKeyboardHandler,
gridRef.current || undefined
);
const pasteHandler = useCallback(
(e: ClipboardEvent) => {
const tagName = (e.target as HTMLElement)?.tagName?.toLowerCase();
if (tagName === 'textarea' || tagName === 'input') {
return;
}
const pa: PasteAction = {
type: 'PASTE',
content: e.clipboardData?.getData('Text') || '',
};
dispatch(pa);
e.preventDefault();
},
[dispatch]
);
useEventListener('paste', pasteHandler);
const fillLists = useMemo(() => {
let left = <></>;
let right = <></>;
const [entry, cross] = entryAndCrossAtPosition(state.grid, state.active);
let crossMatches = cross && potentialFill(cross, state.grid);
let entryMatches = entry && potentialFill(entry, state.grid);
if (
crossMatches !== null &&
entryMatches !== null &&
entry !== null &&
cross !== null
) {
/* If we have both entry + cross we now filter for only matches that'd work for both. */
const entryActiveIndex = activeIndex(state.grid, state.active, entry);
const crossActiveIndex = activeIndex(state.grid, state.active, cross);
const entryValidLetters = lettersAtIndex(entryMatches, entryActiveIndex);
const crossValidLetters = lettersAtIndex(crossMatches, crossActiveIndex);
const validLetters = (
entryValidLetters.match(
new RegExp('[' + crossValidLetters + ']', 'g')
) || []
).join('');
entryMatches = entryMatches.filter(([word]) => {
const l = word[entryActiveIndex];
return l && validLetters.indexOf(l) !== -1;
});
crossMatches = crossMatches.filter(([word]) => {
const l = word[crossActiveIndex];
return l && validLetters.indexOf(l) !== -1;
});
}
if (cross && crossMatches !== null) {
if (cross.direction === Direction.Across) {
left = (
<PotentialFillList
selected={false}
gridRef={gridRef}
header="Across"
values={crossMatches}
entryIndex={cross.index}
dispatch={dispatch}
/>
);
} else {
right = (
<PotentialFillList
selected={false}
gridRef={gridRef}
header="Down"
values={crossMatches}
entryIndex={cross.index}
dispatch={dispatch}
/>
);
}
}
if (entry && entryMatches !== null) {
if (entry.direction === Direction.Across) {
left = (
<PotentialFillList
selected={true}
gridRef={gridRef}
header="Across"
values={entryMatches}
entryIndex={entry.index}
dispatch={dispatch}
/>
);
} else {
right = (
<PotentialFillList
selected={true}
gridRef={gridRef}
header="Down"
values={entryMatches}
entryIndex={entry.index}
dispatch={dispatch}
/>
);
}
}
return { left, right };
}, [state.grid, state.active, dispatch]);
const { autofillEnabled, setAutofillEnabled } = props;
const toggleAutofillEnabled = useCallback(() => {
if (autofillEnabled) {
showSnackbar('Autofill Disabled');
}
setAutofillEnabled(!autofillEnabled);
}, [autofillEnabled, setAutofillEnabled, showSnackbar]);
const stats = useMemo(() => {
let totalLength = 0;
const lengthHistogram: Array<number> = new Array(
Math.max(state.grid.width, state.grid.height) - 1
).fill(0);
const lengthHistogramNames = lengthHistogram.map((_, i) =>
(i + 2).toString()
);
state.grid.entries.forEach((e) => {
totalLength += e.cells.length;
lengthHistogram[e.cells.length - 2] += 1;
});
const numEntries = state.grid.entries.length;
const averageLength = totalLength / numEntries;
const lettersHistogram: Array<number> = new Array(26).fill(0);
const lettersHistogramNames = lettersHistogram.map((_, i) =>
String.fromCharCode(i + 65)
);
let numBlocks = 0;
const numTotal = state.grid.width * state.grid.height;
state.grid.cells.forEach((s) => {
if (s === '.') {
numBlocks += 1;
} else {
const index = lettersHistogramNames.indexOf(s);
if (index !== -1) {
lettersHistogram[index] += 1;
}
}
});
return {
numBlocks,
numTotal,
lengthHistogram,
lengthHistogramNames,
numEntries,
averageLength,
lettersHistogram,
lettersHistogramNames,
};
}, [
state.grid.entries,
state.grid.height,
state.grid.width,
state.grid.cells,
]);
const keyboardHandler = useCallback(
(key: string) => {
const mkey = fromKeyString(key);
if (isSome(mkey)) {
const kpa: KeypressAction = { type: 'KEYPRESS', key: mkey.value };
dispatch(kpa);
}
},
[dispatch]
);
const topBarChildren = useMemo(() => {
let autofillIcon = <SpinnerDisabled />;
let autofillReverseIcon = <SpinnerWorking />;
let autofillReverseText = 'Enable Autofill';
let autofillText = 'Autofill disabled';
if (props.autofillEnabled) {
autofillReverseIcon = <SpinnerDisabled />;
autofillReverseText = 'Disable Autofill';
if (props.autofillInProgress) {
autofillIcon = <SpinnerWorking />;
autofillText = 'Autofill in progress';
} else if (props.autofilledGrid.length) {
autofillIcon = <SpinnerFinished />;
autofillText = 'Autofill complete';
} else {
autofillIcon = <SpinnerFailed />;
autofillText = "Couldn't autofill this grid";
}
}
return (
<>
<TopBarDropDown
onClose={focusGrid}
icon={autofillIcon}
text="Autofill"
hoverText={autofillText}
>
{() => (
<>
<TopBarDropDownLink
icon={autofillReverseIcon}
text={autofillReverseText}
onClick={toggleAutofillEnabled}
/>
<TopBarDropDownLink
icon={<FaSignInAlt />}
text="Jump to Most Constrained"
shortcutHint={<ExclamationKey />}
onClick={() => {
const entry = getMostConstrainedEntry();
if (entry !== null) {
const ca: ClickedEntryAction = {
type: 'CLICKEDENTRY',
entryIndex: entry,
};
dispatch(ca);
}
}}
/>
<TopBarDropDownLink
icon={<MdRefresh />}
text="Rerun Autofiller"
shortcutHint={<EnterKey />}
onClick={() => {
reRunAutofill();
}}
/>
</>
)}
</TopBarDropDown>
<TopBarLink
icon={<FaListOl />}
text="Clues"
onClick={() => setClueMode(true)}
/>
<TopBarLink
icon={<FaRegNewspaper />}
text="Publish"
onClick={() => {
const a: PublishAction = {
type: 'PUBLISH',
publishTimestamp: TimestampClass.now(),
};
dispatch(a);
}}
/>
<TopBarDropDown onClose={focusGrid} icon={<FaEllipsisH />} text="More">
{(closeDropdown) => (
<>
<NestedDropDown
onClose={focusGrid}
closeParent={closeDropdown}
icon={<FaRegPlusSquare />}
text="New Puzzle"
>
{() => <NewPuzzleForm dispatch={dispatch} />}
</NestedDropDown>
<NestedDropDown
onClose={focusGrid}
closeParent={closeDropdown}
icon={<FaFileImport />}
text="Import .puz File"
>
{() => <ImportPuzForm dispatch={dispatch} />}
</NestedDropDown>
<TopBarDropDownLink
icon={<FaRegFile />}
text="Export .puz File"
onClick={() => {
const a: SetShowDownloadLink = {
type: 'SETSHOWDOWNLOAD',
value: true,
};
dispatch(a);
}}
/>
<NestedDropDown
onClose={focusGrid}
closeParent={closeDropdown}
icon={<IoMdStats />}
text="Stats"
>
{() => (
<>
<h2>Grid</h2>
<div>
{state.gridIsComplete ? (
<FaRegCheckCircle />
) : (
<FaRegCircle />
)}{' '}
All cells should be filled
</div>
<div>
{state.hasNoShortWords ? (
<FaRegCheckCircle />
) : (
<FaRegCircle />
)}{' '}
All words should be at least three letters
</div>
<div>
{state.repeats.size > 0 ? (
<>
<FaRegCircle /> (
{Array.from(state.repeats).sort().join(', ')})
</>
) : (
<FaRegCheckCircle />
)}{' '}
No words should be repeated
</div>
<h2 css={{ marginTop: '1.5em' }}>Fill</h2>
<div>Number of words: {stats.numEntries}</div>
<div>
Mean word length: {stats.averageLength.toPrecision(3)}
</div>
<div>
Number of blocks: {stats.numBlocks} (
{((100 * stats.numBlocks) / stats.numTotal).toFixed(1)}%)
</div>
<div
css={{
marginTop: '1em',
textDecoration: 'underline',
textAlign: 'center',
}}
>
Word Lengths
</div>
<Histogram
data={stats.lengthHistogram}
names={stats.lengthHistogramNames}
/>
<div
css={{
marginTop: '1em',
textDecoration: 'underline',
textAlign: 'center',
}}
>
Letter Counts
</div>
<Histogram
data={stats.lettersHistogram}
names={stats.lettersHistogramNames}
/>
</>
)}
</NestedDropDown>
<NestedDropDown
onClose={focusGrid}
closeParent={closeDropdown}
icon={<SymmetryIcon type={state.symmetry} />}
text="Change Symmetry"
>
{() => (
<>
<TopBarDropDownLink
icon={<SymmetryRotational />}
text="Use Rotational Symmetry"
onClick={() => {
const a: SymmetryAction = {
type: 'CHANGESYMMETRY',
symmetry: Symmetry.Rotational,
};
dispatch(a);
}}
/>
<TopBarDropDownLink
icon={<SymmetryHorizontal />}
text="Use Horizontal Symmetry"
onClick={() => {
const a: SymmetryAction = {
type: 'CHANGESYMMETRY',
symmetry: Symmetry.Horizontal,
};
dispatch(a);
}}
/>
<TopBarDropDownLink
icon={<SymmetryVertical />}
text="Use Vertical Symmetry"
onClick={() => {
const a: SymmetryAction = {
type: 'CHANGESYMMETRY',
symmetry: Symmetry.Vertical,
};
dispatch(a);
}}
/>
<TopBarDropDownLink
icon={<SymmetryNone />}
text="Use No Symmetry"
onClick={() => {
const a: SymmetryAction = {
type: 'CHANGESYMMETRY',
symmetry: Symmetry.None,
};
dispatch(a);
}}
/>
{state.grid.width === state.grid.height ? (
<>
<TopBarDropDownLink
icon={<SymmetryIcon type={Symmetry.DiagonalNESW} />}
text="Use NE/SW Diagonal Symmetry"
onClick={() => {
const a: SymmetryAction = {
type: 'CHANGESYMMETRY',
symmetry: Symmetry.DiagonalNESW,
};
dispatch(a);
}}
/>
<TopBarDropDownLink
icon={<SymmetryIcon type={Symmetry.DiagonalNWSE} />}
text="Use NW/SE Diagonal Symmetry"
onClick={() => {
const a: SymmetryAction = {
type: 'CHANGESYMMETRY',
symmetry: Symmetry.DiagonalNWSE,
};
dispatch(a);
}}
/>
</>
) : (
''
)}
</>
)}
</NestedDropDown>
<TopBarDropDownLink
icon={<FaSquare />}
text="Toggle Block"
shortcutHint={<PeriodKey />}
onClick={() => {
const a: KeypressAction = {
type: 'KEYPRESS',
key: { k: KeyK.Dot },
};
dispatch(a);
}}
/>
<TopBarDropDownLink
icon={<CgSidebarRight />}
text="Toggle Bar"
shortcutHint={<CommaKey />}
onClick={() => {
const a: KeypressAction = {
type: 'KEYPRESS',
key: { k: KeyK.Comma },
};
dispatch(a);
}}
/>
<TopBarDropDownLink
icon={<FaEyeSlash />}
text="Toggle Cell Visibility"
shortcutHint={<KeyIcon text="#" />}
onClick={() => {
const a: ToggleHiddenAction = {
type: 'TOGGLEHIDDEN',
};
dispatch(a);
}}
/>
<TopBarDropDownLink
icon={<Rebus />}
text="Enter Rebus"
shortcutHint={<EscapeKey />}
onClick={() => {
const a: KeypressAction = {
type: 'KEYPRESS',
key: { k: KeyK.Escape },
};
dispatch(a);
}}
/>
<TopBarDropDownLink
icon={
state.grid.highlight === 'circle' ? (
<FaRegCircle />
) : (
<FaFillDrip />
)
}
text="Toggle Square Highlight"
shortcutHint={<BacktickKey />}
onClick={() => {
const a: KeypressAction = {
type: 'KEYPRESS',
key: { k: KeyK.Backtick },
};
dispatch(a);
}}
/>
<TopBarDropDownLink
icon={
state.grid.highlight === 'circle' ? (
<FaFillDrip />
) : (
<FaRegCircle />
)
}
text={
state.grid.highlight === 'circle'
? 'Use Shade for Highlights'
: 'Use Circle for Highlights'
}
onClick={() => {
const a: SetHighlightAction = {
type: 'SETHIGHLIGHT',
highlight:
state.grid.highlight === 'circle' ? 'shade' : 'circle',
};
dispatch(a);
}}
/>
{muted ? (
<TopBarDropDownLink
icon={<FaVolumeUp />}
text="Unmute"
onClick={() => setMuted(false)}
/>
) : (
<TopBarDropDownLink
icon={<FaVolumeMute />}
text="Mute"
onClick={() => setMuted(true)}
/>
)}
<TopBarDropDownLink
icon={<FaKeyboard />}
text="Toggle Keyboard"
onClick={() => setToggleKeyboard(!toggleKeyboard)}
/>
{props.isAdmin ? (
<>
<TopBarDropDownLinkA
href="/admin"
icon={<FaUserLock />}
text="Admin"
/>
</>
) : (
''
)}
<TopBarDropDownLinkA
href="/dashboard"
icon={<FaHammer />}
text="Constructor Dashboard"
/>
<TopBarDropDownLinkA
href="/account"
icon={<FaUser />}
text="Account"
/>
</>
)}
</TopBarDropDown>
</>
);
}, [
focusGrid,
getMostConstrainedEntry,
props.autofillEnabled,
props.autofillInProgress,
props.autofilledGrid.length,
stats,
props.isAdmin,
setClueMode,
setMuted,
state.grid.highlight,
state.grid.width,
state.grid.height,
state.gridIsComplete,
state.hasNoShortWords,
state.repeats,
state.symmetry,
toggleAutofillEnabled,
reRunAutofill,
dispatch,
muted,
toggleKeyboard,
setToggleKeyboard,
]);
return (
<>
<Global styles={FULLSCREEN_CSS} />
<div
css={{
display: 'flex',
flexDirection: 'column',
height: '100%',
}}
>
<div css={{ flex: 'none' }}>
<TopBar>{topBarChildren}</TopBar>
</div>
{state.showDownloadLink ? (
<PuzDownloadOverlay
state={state}
cancel={() => {
const a: SetShowDownloadLink = {
type: 'SETSHOWDOWNLOAD',
value: false,
};
dispatch(a);
}}
/>
) : (
''
)}
{state.toPublish ? (
<PublishOverlay
id={state.id}
toPublish={state.toPublish}
warnings={state.publishWarnings}
user={props.user}
cancelPublish={() => dispatch({ type: 'CANCELPUBLISH' })}
/>
) : (
''
)}
{state.publishErrors.length ? (
<Overlay
closeCallback={() => dispatch({ type: 'CLEARPUBLISHERRORS' })}
>
<>
<div>
Please fix the following errors and try publishing again:
</div>
<ul>
{state.publishErrors.map((s, i) => (
<li key={i}>{s}</li>
))}
</ul>
{state.publishWarnings.length ? (
<>
<div>Warnings:</div>
<ul>
{state.publishWarnings.map((s, i) => (
<li key={i}>{s}</li>
))}
</ul>
</>
) : (
''
)}
</>
</Overlay>
) : (
''
)}
<div
css={{ flex: '1 1 auto', overflow: 'scroll', position: 'relative' }}
>
<SquareAndCols
leftIsActive={state.active.dir === Direction.Across}
ref={gridRef}
aspectRatio={state.grid.width / state.grid.height}
square={(width: number, _height: number) => {
return (
<GridView
isEnteringRebus={state.isEnteringRebus}
rebusValue={state.rebusValue}
squareWidth={width}
grid={state.grid}
active={state.active}
dispatch={dispatch}
allowBlockEditing={true}
autofill={props.autofillEnabled ? props.autofilledGrid : []}
/>
);
}}
left={fillLists.left}
right={fillLists.right}
dispatch={dispatch}
/>
</div>
<div css={{ flex: 'none', width: '100%' }}>
<Keyboard
toggleKeyboard={toggleKeyboard}
keyboardHandler={keyboardHandler}
muted={muted}
showExtraKeyLayout={state.showExtraKeyLayout}
includeBlockKey={true}
/>
</div>
</div>
</>
);
}
Example #12
| Source File: Puzzle.tsx From crosshare with GNU Affero General Public License v3.0 | 4 votes |
|
Puzzle = ({
loadingPlayState,
puzzle,
play,
...props
}: PuzzleProps & AuthPropsOptional) => {
const [state, dispatch] = useReducer(
puzzleReducer,
{
type: 'puzzle',
wasEntryClick: false,
active: { col: 0, row: 0, dir: Direction.Across },
grid: addClues(
fromCells({
mapper: (e) => e,
width: puzzle.size.cols,
height: puzzle.size.rows,
cells: play
? play.g
: puzzle.grid.map((s) => (s === BLOCK ? BLOCK : ' ')),
vBars: new Set(puzzle.vBars),
hBars: new Set(puzzle.hBars),
allowBlockEditing: false,
highlighted: new Set(puzzle.highlighted),
highlight: puzzle.highlight,
hidden: new Set(puzzle.hidden),
}),
puzzle.clues
),
showExtraKeyLayout: false,
answers: puzzle.grid,
alternateSolutions: puzzle.alternateSolutions,
verifiedCells: new Set<number>(play ? play.vc : []),
wrongCells: new Set<number>(play ? play.wc : []),
revealedCells: new Set<number>(play ? play.rc : []),
downsOnly: play?.do || false,
isEnteringRebus: false,
rebusValue: '',
success: play ? play.f : false,
ranSuccessEffects: play ? play.f : false,
filled: false,
autocheck: false,
dismissedKeepTrying: false,
dismissedSuccess: false,
moderating: false,
showingEmbedOverlay: false,
displaySeconds: play ? play.t : 0,
bankedSeconds: play ? play.t : 0,
ranMetaSubmitEffects: false,
...(play &&
play.ct_rv && {
contestRevealed: true,
contestSubmitTime: play.ct_t?.toMillis(),
}),
...(play &&
play.ct_sub && {
ranMetaSubmitEffects: true,
contestPriorSubmissions: play.ct_pr_subs,
contestDisplayName: play.ct_n,
contestSubmission: play.ct_sub,
contestEmail: play.ct_em,
contestSubmitTime: play.ct_t?.toMillis(),
}),
currentTimeWindowStart: 0,
didCheat: play ? play.ch : false,
clueView: false,
cellsUpdatedAt: play ? play.ct : puzzle.grid.map(() => 0),
cellsIterationCount: play ? play.uc : puzzle.grid.map(() => 0),
cellsEverMarkedWrong: new Set<number>(play ? play.we : []),
loadedPlayState: !loadingPlayState,
waitToResize: true,
isEditable(cellIndex) {
return !this.verifiedCells.has(cellIndex) && !this.success;
},
},
advanceActiveToNonBlock
);
const authContext = useContext(AuthContext);
useEffect(() => {
if (!authContext.notifications?.length) {
return;
}
for (const notification of authContext.notifications) {
if (notification.r) {
// shouldn't be possible but be defensive
continue;
}
if (!isNewPuzzleNotification(notification)) {
continue;
}
if (notification.p === puzzle.id) {
App.firestore()
.collection('n')
.doc(notification.id)
.update({ r: true });
return;
}
}
}, [authContext.notifications, puzzle.id]);
useEffect(() => {
if (loadingPlayState === false) {
const action: LoadPlayAction = {
type: 'LOADPLAY',
play: play,
prefs: props.prefs,
isAuthor: props.user ? props.user.uid === puzzle.authorId : false,
};
dispatch(action);
}
}, [loadingPlayState, play, props.user, props.prefs, puzzle.authorId]);
// Every (unpaused) second dispatch a tick action which updates the display time
useEffect(() => {
function tick() {
if (state.currentTimeWindowStart) {
dispatch({ type: 'TICKACTION' });
}
}
const id = setInterval(tick, 1000);
return () => clearInterval(id);
}, [state.currentTimeWindowStart, dispatch]);
// Pause when page goes out of focus
function prodPause() {
if (process.env.NODE_ENV !== 'development') {
dispatch({ type: 'PAUSEACTION' });
writePlayToDBIfNeeded();
}
}
useEventListener('blur', prodPause);
const [muted, setMuted] = usePersistedBoolean('muted', false);
const [toggleKeyboard, setToggleKeyboard] = usePersistedBoolean(
'keyboard',
false
);
// Set up music player for success song
const [audioContext, initAudioContext] = useContext(CrosshareAudioContext);
const playSuccess = useRef<(() => void) | null>(null);
useEffect(() => {
if (!audioContext) {
return initAudioContext();
}
if (!playSuccess.current && !muted && audioContext) {
fetch('/success.mp3')
.then((response) => response.arrayBuffer())
.then((buffer) => {
audioContext.decodeAudioData(buffer, (audioBuffer) => {
playSuccess.current = () => {
const source = audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioContext.destination);
source.start();
};
});
});
}
}, [muted, audioContext, initAudioContext]);
const writePlayToDBIfNeeded = useCallback(
async (user?: firebase.User) => {
console.log('doing write play');
if (!state.loadedPlayState) {
return;
}
if (puzzle.contestAnswers?.length) {
// For a meta we need to have run both to skip
if (state.ranSuccessEffects && state.ranMetaSubmitEffects) {
return;
}
} else {
// For a reg puzzle skip if success effects have run
if (state.ranSuccessEffects) {
return;
}
}
const u = user || props.user;
if (!u) {
return;
}
if (!isDirty(u, puzzle.id)) {
return;
}
writePlayToDB(u, puzzle.id)
.then(() => {
console.log('Finished writing play state to db');
})
.catch((reason) => {
console.error('Failed to write play: ', reason);
});
},
[
puzzle.id,
puzzle.contestAnswers,
props.user,
state.ranMetaSubmitEffects,
state.ranSuccessEffects,
state.loadedPlayState,
]
);
const cachePlayForUser = useCallback(
(user: firebase.User | undefined) => {
if (!state.loadedPlayState) {
return;
}
const updatedAt = TimestampClass.now();
const playTime =
state.currentTimeWindowStart === 0
? state.bankedSeconds
: state.bankedSeconds +
(new Date().getTime() - state.currentTimeWindowStart) / 1000;
const playForUser: PlayWithoutUserT = {
c: puzzle.id,
n: puzzle.title,
ua: updatedAt,
g: Array.from(state.grid.cells),
ct: Array.from(state.cellsUpdatedAt),
uc: Array.from(state.cellsIterationCount),
vc: Array.from(state.verifiedCells),
wc: Array.from(state.wrongCells),
we: Array.from(state.cellsEverMarkedWrong),
rc: Array.from(state.revealedCells),
t: playTime,
ch: state.didCheat,
do: state.downsOnly,
f: state.success,
...(state.contestRevealed && {
ct_rv: state.contestRevealed,
ct_t:
state.contestSubmitTime !== undefined
? TimestampClass.fromMillis(state.contestSubmitTime)
: undefined,
ct_n: state.contestDisplayName,
}),
...(state.contestSubmission && {
ct_sub: state.contestSubmission,
ct_pr_subs: state.contestPriorSubmissions || [],
ct_t:
state.contestSubmitTime !== undefined
? TimestampClass.fromMillis(state.contestSubmitTime)
: undefined,
ct_n: state.contestDisplayName,
...(state.contestEmail && {
ct_em: state.contestEmail,
}),
}),
};
cachePlay(user, puzzle.id, playForUser);
},
[
state.downsOnly,
state.loadedPlayState,
puzzle.id,
state.cellsEverMarkedWrong,
state.cellsIterationCount,
state.cellsUpdatedAt,
state.didCheat,
state.grid.cells,
state.revealedCells,
state.success,
state.verifiedCells,
state.wrongCells,
puzzle.title,
state.bankedSeconds,
state.currentTimeWindowStart,
state.contestSubmission,
state.contestSubmitTime,
state.contestEmail,
state.contestDisplayName,
state.contestRevealed,
state.contestPriorSubmissions,
]
);
useEffect(() => {
cachePlayForUser(props.user);
}, [props.user, cachePlayForUser]);
const router = useRouter();
useEffect(() => {
const listener = () => {
writePlayToDBIfNeeded();
};
window.addEventListener('beforeunload', listener);
router.events.on('routeChangeStart', listener);
return () => {
window.removeEventListener('beforeunload', listener);
router.events.off('routeChangeStart', listener);
};
}, [writePlayToDBIfNeeded, router]);
const { addToast } = useSnackbar();
useEffect(() => {
if (
(state.contestSubmission || state.contestRevealed) &&
!state.ranMetaSubmitEffects
) {
const action: RanMetaSubmitEffectsAction = { type: 'RANMETASUBMIT' };
dispatch(action);
if (props.user) {
cachePlayForUser(props.user);
writePlayToDBIfNeeded(props.user);
} else {
signInAnonymously().then((u) => {
cachePlayForUser(u);
writePlayToDBIfNeeded(u);
});
}
}
}, [
cachePlayForUser,
state.contestSubmission,
state.contestRevealed,
state.ranMetaSubmitEffects,
props.user,
writePlayToDBIfNeeded,
]);
useEffect(() => {
if (state.success && !state.ranSuccessEffects) {
const action: RanSuccessEffectsAction = { type: 'RANSUCCESS' };
dispatch(action);
if (props.user) {
cachePlayForUser(props.user);
writePlayToDBIfNeeded(props.user);
} else {
signInAnonymously().then((u) => {
cachePlayForUser(u);
writePlayToDBIfNeeded(u);
});
}
let delay = 0;
if (state.bankedSeconds <= 60) {
addToast('? Solved in under a minute!');
delay += 500;
}
if (!state.didCheat && state.downsOnly) {
addToast('? Solved downs-only!', delay);
} else if (!state.didCheat) {
addToast('? Solved without check/reveal!', delay);
}
if (!muted && playSuccess.current) {
playSuccess.current();
}
}
}, [
addToast,
cachePlayForUser,
muted,
props.user,
state.bankedSeconds,
state.didCheat,
state.downsOnly,
state.ranSuccessEffects,
state.success,
writePlayToDBIfNeeded,
]);
const physicalKeyboardHandler = useCallback(
(e: KeyboardEvent) => {
// Disable keyboard when paused / loading play
if (!(state.success && state.dismissedSuccess)) {
if (loadingPlayState || !state.currentTimeWindowStart) {
return;
}
}
const mkey = fromKeyboardEvent(e);
if (isSome(mkey)) {
const kpa: KeypressAction = { type: 'KEYPRESS', key: mkey.value };
dispatch(kpa);
e.preventDefault();
}
},
[
dispatch,
loadingPlayState,
state.currentTimeWindowStart,
state.success,
state.dismissedSuccess,
]
);
useEventListener('keydown', physicalKeyboardHandler);
const pasteHandler = useCallback(
(e: ClipboardEvent) => {
const tagName = (e.target as HTMLElement)?.tagName?.toLowerCase();
if (tagName === 'textarea' || tagName === 'input') {
return;
}
const pa: PasteAction = {
type: 'PASTE',
content: e.clipboardData?.getData('Text') || '',
};
dispatch(pa);
e.preventDefault();
},
[dispatch]
);
useEventListener('paste', pasteHandler);
let [entry, cross] = entryAndCrossAtPosition(state.grid, state.active);
if (entry === null && cross !== null) {
dispatch({ type: 'CHANGEDIRECTION' });
[entry, cross] = [cross, entry];
}
const keyboardHandler = useCallback(
(key: string) => {
const mkey = fromKeyString(key);
if (isSome(mkey)) {
const kpa: KeypressAction = { type: 'KEYPRESS', key: mkey.value };
dispatch(kpa);
}
},
[dispatch]
);
const { acrossEntries, downEntries } = useMemo(() => {
return {
acrossEntries: state.grid.entries.filter(
(e) => e.direction === Direction.Across
),
downEntries: state.grid.entries.filter(
(e) => e.direction === Direction.Down
),
};
}, [state.grid.entries]);
const isEmbed = useContext(EmbedContext);
/* `clueMap` is a map from ENTRYWORD => '5D: This is the clue' - we use this
* for comment clue tooltips. */
const clueMap = useMemo(() => {
return getEntryToClueMap(state.grid, state.answers);
}, [state.grid, state.answers]);
/* `refs` is a set of referenced entry indexes for each entry in the grid - we use this
* for grid highlights when an entry is selected.
*
* `refPositions` is an array for each entry of [reffedEntry, clueTextStart, clueTextEnd] tuples
*/
const [refs, refPositions] = useMemo(() => {
return getRefs(state.grid);
}, [state.grid]);
const scrollToCross = useMatchMedia(SMALL_AND_UP_RULES);
const overlayBaseProps: PuzzleOverlayBaseProps = {
publishTime: puzzle.isPrivateUntil || puzzle.publishTime,
coverImage: props.coverImage,
profilePicture: props.profilePicture,
downsOnly: state.downsOnly,
clueMap: clueMap,
user: props.user,
nextPuzzle: props.nextPuzzle,
puzzle: puzzle,
isMuted: muted,
solveTime: state.displaySeconds,
didCheat: state.didCheat,
dispatch: dispatch,
};
let puzzleView: ReactNode;
const entryIdx = entryIndexAtPosition(state.grid, state.active);
let refed: Set<number> = new Set();
if (entryIdx !== null) {
refed = refs[entryIdx] || new Set();
}
const shouldConceal =
state.currentTimeWindowStart === 0 &&
!(state.success && state.dismissedSuccess);
if (state.clueView) {
puzzleView = (
<TwoCol
left={
<ClueList
isEnteringRebus={state.isEnteringRebus}
rebusValue={state.rebusValue}
wasEntryClick={state.wasEntryClick}
allEntries={state.grid.entries}
refPositions={refPositions}
refed={refed}
dimCompleted={true}
active={state.active}
grid={state.grid}
showEntries={true}
conceal={shouldConceal}
header={t`Across`}
entries={acrossEntries}
current={entry?.index}
cross={cross?.index}
scrollToCross={scrollToCross}
dispatch={dispatch}
downsOnly={state.downsOnly && !state.success}
/>
}
right={
<ClueList
isEnteringRebus={state.isEnteringRebus}
rebusValue={state.rebusValue}
wasEntryClick={state.wasEntryClick}
allEntries={state.grid.entries}
refPositions={refPositions}
refed={refed}
dimCompleted={true}
active={state.active}
grid={state.grid}
showEntries={true}
conceal={shouldConceal}
header={t`Down`}
entries={downEntries}
current={entry?.index}
cross={cross?.index}
scrollToCross={scrollToCross}
dispatch={dispatch}
downsOnly={state.downsOnly && !state.success}
/>
}
/>
);
} else {
puzzleView = (
<SquareAndCols
leftIsActive={state.active.dir === Direction.Across}
waitToResize={state.waitToResize}
dispatch={dispatch}
aspectRatio={state.grid.width / state.grid.height}
square={(width: number, _height: number) => {
return (
<GridView
isEnteringRebus={state.isEnteringRebus}
rebusValue={state.rebusValue}
squareWidth={width}
grid={state.grid}
active={state.active}
entryRefs={refs}
dispatch={dispatch}
revealedCells={state.revealedCells}
verifiedCells={state.verifiedCells}
wrongCells={state.wrongCells}
showAlternates={state.success ? state.alternateSolutions : null}
answers={state.answers}
/>
);
}}
header={
<div
css={{
height: SQUARE_HEADER_HEIGHT,
fontSize: 18,
lineHeight: '24px',
backgroundColor: 'var(--lighter)',
overflowY: 'scroll',
scrollbarWidth: 'none',
display: 'flex',
}}
>
{entry ? (
<div css={{ margin: 'auto 1em' }}>
<span
css={{
fontWeight: 'bold',
paddingRight: '0.5em',
}}
>
{entry.labelNumber}
{entry.direction === Direction.Across ? 'A' : 'D'}
</span>
<span
css={{
color: shouldConceal ? 'transparent' : 'var(--text)',
textShadow: shouldConceal
? '0 0 1em var(--conceal-text)'
: '',
}}
>
<ClueText
refPositions={refPositions}
entryIndex={entry.index}
allEntries={state.grid.entries}
grid={state.grid}
downsOnly={state.downsOnly && !state.success}
/>
</span>
</div>
) : (
''
)}
</div>
}
left={
<ClueList
wasEntryClick={state.wasEntryClick}
scrollToCross={scrollToCross}
allEntries={state.grid.entries}
refPositions={refPositions}
refed={refed}
dimCompleted={true}
active={state.active}
grid={state.grid}
showEntries={false}
conceal={shouldConceal}
header={t`Across`}
entries={acrossEntries}
current={entry?.index}
cross={cross?.index}
dispatch={dispatch}
downsOnly={state.downsOnly && !state.success}
/>
}
right={
<ClueList
wasEntryClick={state.wasEntryClick}
scrollToCross={scrollToCross}
allEntries={state.grid.entries}
refPositions={refPositions}
refed={refed}
dimCompleted={true}
active={state.active}
grid={state.grid}
showEntries={false}
conceal={shouldConceal}
header={t`Down`}
entries={downEntries}
current={entry?.index}
cross={cross?.index}
dispatch={dispatch}
downsOnly={state.downsOnly && !state.success}
/>
}
/>
);
}
const checkRevealMenus = useMemo(
() => (
<>
<TopBarDropDown icon={<FaEye />} text={t`Reveal`}>
{() => (
<>
<TopBarDropDownLink
icon={<RevealSquare />}
text={t`Reveal Square`}
onClick={() => {
const ca: CheatAction = {
type: 'CHEAT',
unit: CheatUnit.Square,
isReveal: true,
};
dispatch(ca);
}}
/>
<TopBarDropDownLink
icon={<RevealEntry />}
text={t`Reveal Word`}
onClick={() => {
const ca: CheatAction = {
type: 'CHEAT',
unit: CheatUnit.Entry,
isReveal: true,
};
dispatch(ca);
}}
/>
<TopBarDropDownLink
icon={<RevealPuzzle />}
text={t`Reveal Puzzle`}
onClick={() => {
const ca: CheatAction = {
type: 'CHEAT',
unit: CheatUnit.Puzzle,
isReveal: true,
};
dispatch(ca);
}}
/>
</>
)}
</TopBarDropDown>
{!state.autocheck ? (
<TopBarDropDown icon={<FaCheck />} text={t`Check`}>
{() => (
<>
<TopBarDropDownLink
icon={<FaCheckSquare />}
text={t`Autocheck`}
onClick={() => {
const action: ToggleAutocheckAction = {
type: 'TOGGLEAUTOCHECK',
};
dispatch(action);
}}
/>
<TopBarDropDownLink
icon={<CheckSquare />}
text={t`Check Square`}
onClick={() => {
const ca: CheatAction = {
type: 'CHEAT',
unit: CheatUnit.Square,
};
dispatch(ca);
}}
/>
<TopBarDropDownLink
icon={<CheckEntry />}
text={t`Check Word`}
onClick={() => {
const ca: CheatAction = {
type: 'CHEAT',
unit: CheatUnit.Entry,
};
dispatch(ca);
}}
/>
<TopBarDropDownLink
icon={<CheckPuzzle />}
text={t`Check Puzzle`}
onClick={() => {
const ca: CheatAction = {
type: 'CHEAT',
unit: CheatUnit.Puzzle,
};
dispatch(ca);
}}
/>
</>
)}
</TopBarDropDown>
) : (
<TopBarLink
icon={<FaCheckSquare />}
text={t`Autochecking`}
onClick={() => {
const action: ToggleAutocheckAction = { type: 'TOGGLEAUTOCHECK' };
dispatch(action);
}}
/>
)}
</>
),
[state.autocheck]
);
const moreMenu = useMemo(
() => (
<>
<TopBarDropDown icon={<FaEllipsisH />} text={t`More`}>
{() => (
<>
{!state.success ? (
<TopBarDropDownLink
icon={<Rebus />}
text={t`Enter Rebus`}
shortcutHint={<EscapeKey />}
onClick={() => {
const kpa: KeypressAction = {
type: 'KEYPRESS',
key: { k: KeyK.Escape },
};
dispatch(kpa);
}}
/>
) : (
''
)}
{muted ? (
<TopBarDropDownLink
icon={<FaVolumeUp />}
text={t`Unmute`}
onClick={() => setMuted(false)}
/>
) : (
<TopBarDropDownLink
icon={<FaVolumeMute />}
text={t`Mute`}
onClick={() => setMuted(true)}
/>
)}
<TopBarDropDownLink
icon={<FaKeyboard />}
text={t`Toggle Keyboard`}
onClick={() => setToggleKeyboard(!toggleKeyboard)}
/>
{props.isAdmin ? (
<>
<TopBarDropDownLink
icon={<FaGlasses />}
text="Moderate"
onClick={() => dispatch({ type: 'TOGGLEMODERATING' })}
/>
<TopBarDropDownLinkA
href="/admin"
icon={<FaUserLock />}
text="Admin"
/>
</>
) : (
''
)}
{props.isAdmin || props.user?.uid === puzzle.authorId ? (
<>
<TopBarDropDownLinkA
href={`/stats/${puzzle.id}`}
icon={<IoMdStats />}
text={t`Stats`}
/>
<TopBarDropDownLinkA
href={`/edit/${puzzle.id}`}
icon={<FaEdit />}
text={t`Edit`}
/>
{!isEmbed ? (
<TopBarDropDownLink
icon={<ImEmbed />}
text={t`Embed`}
onClick={() => dispatch({ type: 'TOGGLEEMBEDOVERLAY' })}
/>
) : (
''
)}
</>
) : (
''
)}
<TopBarDropDownLinkSimpleA
href={'/api/pdf/' + puzzle.id}
icon={<FaPrint />}
text={t`Print Puzzle`}
/>
{puzzle.hBars.length || puzzle.vBars.length ? (
''
) : (
<TopBarDropDownLinkSimpleA
href={'/api/puz/' + puzzle.id}
icon={<FaRegFile />}
text={t`Download .puz File`}
/>
)}
<TopBarDropDownLinkA
href="/account"
icon={<FaUser />}
text={t`Account / Settings`}
/>
<TopBarDropDownLinkA
href="/construct"
icon={<FaHammer />}
text={t`Construct a Puzzle`}
/>
</>
)}
</TopBarDropDown>
</>
),
[
muted,
props.isAdmin,
props.user?.uid,
puzzle,
setMuted,
state.success,
toggleKeyboard,
setToggleKeyboard,
isEmbed,
]
);
const description = puzzle.blogPost
? puzzle.blogPost.slice(0, 160) + '...'
: puzzle.clues.map(getClueText).slice(0, 10).join('; ');
const locale = router.locale || 'en';
return (
<>
<Global
styles={FULLSCREEN_CSS}
/>
<Head>
<title>{puzzle.title} | Crosshare crossword puzzle</title>
<I18nTags
locale={locale}
canonicalPath={`/crosswords/${puzzle.id}/${slugify(puzzle.title)}`}
/>
<meta key="og:title" property="og:title" content={puzzle.title} />
<meta
key="og:description"
property="og:description"
content={description}
/>
<meta
key="og:image"
property="og:image"
content={'https://crosshare.org/api/ogimage/' + puzzle.id}
/>
<meta key="og:image:width" property="og:image:width" content="1200" />
<meta key="og:image:height" property="og:image:height" content="630" />
<meta
key="og:image:alt"
property="og:image:alt"
content="An image of the puzzle grid"
/>
<meta key="description" name="description" content={description} />
</Head>
<div
css={{
display: 'flex',
flexDirection: 'column',
height: '100%',
}}
>
<div css={{ flex: 'none' }}>
<TopBar title={puzzle.title}>
{!loadingPlayState ? (
!state.success ? (
<>
<TopBarLink
icon={<FaPause />}
hoverText={t`Pause Game`}
text={timeString(state.displaySeconds, true)}
onClick={() => {
dispatch({ type: 'PAUSEACTION' });
writePlayToDBIfNeeded();
}}
keepText={true}
/>
<TopBarLink
icon={state.clueView ? <SpinnerFinished /> : <FaListOl />}
text={state.clueView ? t`Grid` : t`Clues`}
onClick={() => {
const a: ToggleClueViewAction = {
type: 'TOGGLECLUEVIEW',
};
dispatch(a);
}}
/>
{checkRevealMenus}
{moreMenu}
</>
) : (
<>
<TopBarLink
icon={<FaComment />}
text={
puzzle.contestAnswers?.length
? !isMetaSolution(
state.contestSubmission,
puzzle.contestAnswers
) && !state.contestRevealed
? t`Contest Prompt / Submission`
: t`Comments / Leaderboard`
: t`Show Comments`
}
onClick={() => dispatch({ type: 'UNDISMISSSUCCESS' })}
/>
{moreMenu}
</>
)
) : (
moreMenu
)}
</TopBar>
</div>
{state.filled && !state.success && !state.dismissedKeepTrying ? (
<KeepTryingOverlay dispatch={dispatch} />
) : (
''
)}
{state.success && !state.dismissedSuccess ? (
<PuzzleOverlay
{...overlayBaseProps}
overlayType={OverlayType.Success}
contestSubmission={state.contestSubmission}
contestHasPrize={puzzle.contestHasPrize}
contestRevealed={state.contestRevealed}
contestRevealDelay={puzzle.contestRevealDelay}
/>
) : (
''
)}
{state.moderating ? (
<ModeratingOverlay puzzle={puzzle} dispatch={dispatch} />
) : (
''
)}
{state.showingEmbedOverlay && props.user ? (
<EmbedOverlay user={props.user} puzzle={puzzle} dispatch={dispatch} />
) : (
''
)}
{state.currentTimeWindowStart === 0 &&
!state.success &&
!(state.filled && !state.dismissedKeepTrying) ? (
state.bankedSeconds === 0 ? (
<PuzzleOverlay
{...overlayBaseProps}
overlayType={OverlayType.BeginPause}
dismissMessage={t`Begin Puzzle`}
message={t`Ready to get started?`}
loadingPlayState={loadingPlayState || !state.loadedPlayState}
/>
) : (
<PuzzleOverlay
{...overlayBaseProps}
overlayType={OverlayType.BeginPause}
dismissMessage={t`Resume`}
message={t`Your puzzle is paused`}
loadingPlayState={loadingPlayState || !state.loadedPlayState}
/>
)
) : (
''
)}
<div
css={{
flex: '1 1 auto',
overflow: 'scroll',
scrollbarWidth: 'none',
position: 'relative',
}}
>
{puzzleView}
</div>
<div css={{ flex: 'none', width: '100%' }}>
<Keyboard
toggleKeyboard={toggleKeyboard}
keyboardHandler={keyboardHandler}
muted={muted}
showExtraKeyLayout={state.showExtraKeyLayout}
includeBlockKey={false}
/>
</div>
</div>
</>
);
}
