) => {
const navigate = useNavigate();
const dispatch = useAppDispatch();
const configError = useCallback(
(error?: string) => {
return (
{t('app.app.errorHeader')}
{t('app.app.configErrors')}:
{error ?? config.error}
{t('app.app.checkConfigYml')}
);
},
[config.error, t],
);
const handleLogin = useCallback(
(credentials: Credentials) => {
loginUser(credentials);
},
[loginUser],
);
const AuthComponent = useMemo(() => {
if (!config.config) {
return null;
}
const backend = currentBackend(config.config);
return backend?.authComponent();
}, [config.config]);
const authenticationPage = useMemo(() => {
if (!config.config) {
return null;
}
if (AuthComponent == null) {
return (
{t('app.app.waitingBackend')}
);
}
return (
navigate('/', { replace: true })}
t={t}
/>
);
}, [AuthComponent, auth.error, auth.isFetching, config.config, handleLogin, navigate, t]);
const defaultPath = useMemo(() => getDefaultPath(collections), [collections]);
const { pathname } = useLocation();
const [searchParams] = useSearchParams();
useEffect(() => {
if (
/\/collections\/[a-zA-Z0-9_-]+\/entries\/[a-zA-Z0-9_-]+/g.test(pathname) ||
(/\/collections\/[a-zA-Z0-9_-]+\/new/g.test(pathname) &&
searchParams.get('duplicate') === 'true')
) {
return;
}
dispatch(discardDraft());
}, [dispatch, pathname, searchParams]);
const content = useMemo(() => {
if (!user) {
return authenticationPage;
}
return (
<>
{isFetching && }
} />
} />
} />
}
/>
} />
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
} />
} />
} />
{useMediaLibrary ? : null}
>
);
}, [authenticationPage, collections, defaultPath, isFetching, useMediaLibrary, user]);
if (!config.config) {
return configError(t('app.app.configNotFound'));
}
if (config.error) {
return configError();
}
if (config.isFetching) {
return {t('app.app.loadingConfig')};
}
return (
<>
<>
{content}
>
>
);
};
function mapStateToProps(state: RootState) {
const { auth, config, collections, globalUI, mediaLibrary, scroll } = state;
const user = auth.user;
const isFetching = globalUI.isFetching;
const useMediaLibrary = !mediaLibrary.externalLibrary;
const scrollSyncEnabled = scroll.isScrolling;
return {
auth,
config,
collections,
user,
isFetching,
useMediaLibrary,
scrollSyncEnabled,
};
}
const mapDispatchToProps = {
loginUser: loginUserAction,
};
const connector = connect(mapStateToProps, mapDispatchToProps);
export type AppProps = ConnectedProps;
export default connector(translate()(App) as ComponentType);