@fortawesome/free-solid-svg-icons#faHdd TypeScript Examples

export default function ScreenDashboard(props: Props): JSX.Element | null {
    const [redirectToParty, setRedirectToParty] = useState('');
    const [redirectToUser, setRedirectToUser] = useState(false);
    const [redirectToMediaItems, setRedirectToMediaItems] = useState(false);
    const [redirectToPartySettings, setRedirectToPartySettings] = useState('');
    const [partyName, setPartyName] = useState('');
    const userParties = useSelector(
        (state: RootAppState) => state.globalState.userParties
    );
    const party = useSelector((state: RootAppState) => state.globalState.party);
    const user = useSelector((state: RootAppState) => state.globalState.user);
    const errorMessage = useSelector(
        (state: RootAppState) => state.globalState.errorMessage
    );
    const dispatch = useDispatch();
    const { t } = useTranslation();

    useEffect(() => {
        if (props.socket && party && !redirectToParty) {
            props.socket.emit('leaveParty', { partyId: party.id });
            dispatch(setGlobalState(noPartyState));
        }
    }, [props.socket, party, dispatch, redirectToParty]);

    const handleCreateParty = async (
        event: React.MouseEvent
    ): Promise<void> => {
        event.preventDefault();

        try {
            const response = await Axios.post(
                '/api/party',
                { partyName: partyName },
                axiosConfig()
            );
            if (response.data.success) {
                const updatedUserParties = await getUpdatedUserParties(
                    dispatch,
                    t
                );
                if (party) {
                    await updateCurrentParty(
                        dispatch,
                        updatedUserParties,
                        party
                    );
                }
                setPartyName('');
            } else {
                dispatch(
                    setGlobalState({
                        errorMessage: t(
                            `apiResponseMessages.${response.data.msg}`
                        )
                    })
                );
            }
        } catch (error) {
            dispatch(
                setGlobalState({
                    errorMessage: t(`errors.partyCreationError`)
                })
            );
            return Promise.reject(error);
        }
    };

    const handlePartyChoose = (userParty: ClientParty): void => {
        dispatch(setGlobalState({ party: userParty }));
        setRedirectToParty(userParty.id);
    };

    if (redirectToParty !== '') {
        return <Navigate to={'/party/' + redirectToParty}></Navigate>;
    }

    if (redirectToPartySettings !== '') {
        return (
            <Navigate to={'/editParty/' + redirectToPartySettings}></Navigate>
        );
    }

    if (redirectToUser) {
        return <Navigate to={'/user'}></Navigate>;
    }

    if (redirectToMediaItems) {
        return <Navigate to={'/mediaItems'}></Navigate>;
    }

    return (
        <>
            <div className="flex flex-col">
                {user && (
                    <div className="w-full flex flex-row justify-end">
                        <div className="mx-2 mt-1 mb-3">
                            <div
                                className="cursor-pointer"
                                onClick={(): void => setRedirectToUser(true)}
                                title={t('common.userLinkTitle')}
                            >
                                <FontAwesomeIcon
                                    icon={faUser}
                                    size="sm"
                                ></FontAwesomeIcon>{' '}
                                {user.username}
                            </div>
                        </div>
                    </div>
                )}
                {errorMessage && (
                    <div className="w-full absolute">
                        <div className="mx-auto mt-4 max-w-lg">
                            <Alert
                                className="w-full"
                                mode="error"
                                text={errorMessage}
                                onCloseButton={(): void => {
                                    dispatch(
                                        setGlobalState({ errorMessage: '' })
                                    );
                                }}
                            ></Alert>
                        </div>
                    </div>
                )}
                {user && (
                    <div className="m-auto max-w-lg">
                        {user.role === 'admin' && (
                            <form>
                                <div className="flex flex-row mb-5">
                                    <div>
                                        <InputText
                                            containerClassName="w-full"
                                            label={
                                                t('dashboard.newParty') + ':'
                                            }
                                            labelWidth="w-32"
                                            placeholder={t('common.name')}
                                            value={partyName}
                                            onChange={(
                                                event: React.ChangeEvent<HTMLInputElement>
                                            ): void =>
                                                setPartyName(event.target.value)
                                            }
                                        ></InputText>
                                    </div>
                                    <Button
                                        type="submit"
                                        className="ml-3 mb-3 w-24"
                                        text={t('dashboard.createParty')}
                                        onClick={handleCreateParty}
                                    ></Button>
                                </div>
                            </form>
                        )}
                        <div className="m-auto pb-12 mt-3">
                            <div className="flex flex-row">
                                <Heading
                                    size={3}
                                    text={t('dashboard.yourParties')}
                                ></Heading>
                            </div>
                            <div className="flex flex-col md:flex-row mb-4 flex-wrap">
                                {userParties ? (
                                    userParties.map(
                                        (userParty: ClientParty) => {
                                            return (
                                                <PartyTile
                                                    key={userParty.id}
                                                    user={user}
                                                    userParty={userParty}
                                                    handlePartyChoose={
                                                        handlePartyChoose
                                                    }
                                                    setRedirectToPartySettings={
                                                        setRedirectToPartySettings
                                                    }
                                                ></PartyTile>
                                            );
                                        }
                                    )
                                ) : (
                                    <div>{t('dashboard.noParties')}</div>
                                )}
                            </div>
                            <Button
                                className="w-40"
                                text={
                                    <span>
                                        <FontAwesomeIcon
                                            icon={faHdd}
                                            size="lg"
                                            className="mr-3"
                                        ></FontAwesomeIcon>
                                        {user.role === 'admin'
                                            ? t('dashboard.allMedia')
                                            : t('dashboard.yourMedia')}
                                    </span>
                                }
                                onClick={(): void =>
                                    setRedirectToMediaItems(true)
                                }
                            ></Button>
                        </div>
                        <div className="text-xs text-center text-gray-500 mb-2">
                            Version: {APP_VERSION}
                        </div>
                    </div>
                )}
            </div>
        </>
    );
}