Skip to content

F
frontend
Commit 621f86f5 authored by tom's avatar tom
Browse files
Options

renaming

parent 9c38cc4f
Hide whitespace changes
Inline Side-by-side
Showing with 81 additions and 78 deletions
pages/apps/[id].tsx
View file @ 621f86f5
...@@ -5,7 +5,7 @@ import React from 'react'; ...@@ -5,7 +5,7 @@ import React from 'react';
import MarketplaceApp from 'ui/pages/MarketplaceApp'; import MarketplaceApp from 'ui/pages/MarketplaceApp';
import Page from 'ui/shared/Page/Page'; import Page from 'ui/shared/Page/Page';
const AppPage: NextPage = () => { const MarketplaceAppPage: NextPage = () => {
return ( return (
<Page wrapChildren={ false }> <Page wrapChildren={ false }>
<Head><title>Blockscout | Marketplace</title></Head> <Head><title>Blockscout | Marketplace</title></Head>
...@@ -14,6 +14,6 @@ const AppPage: NextPage = () => { ...@@ -14,6 +14,6 @@ const AppPage: NextPage = () => {
); );
}; };
export default AppPage; export default MarketplaceAppPage;
export { getServerSideProps } from 'lib/next/getServerSideProps'; export { getServerSideProps } from 'lib/next/getServerSideProps';
pages/apps/index.tsx
View file @ 621f86f5
...@@ -2,21 +2,21 @@ import type { NextPage } from 'next'; ...@@ -2,21 +2,21 @@ import type { NextPage } from 'next';
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; import React from 'react';
import Apps from 'ui/pages/Apps'; import Marketplace from 'ui/pages/Marketplace';
import Page from 'ui/shared/Page/Page'; import Page from 'ui/shared/Page/Page';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
const AppsPage: NextPage = () => { const MarketplacePage: NextPage = () => {
return ( return (
<Page> <Page>
<PageTitle text="Apps"/> <PageTitle text="Marketplace"/>
<Head><title>Blockscout | Marketplace</title></Head> <Head><title>Blockscout | Marketplace</title></Head>
<Apps/> <Marketplace/>
</Page> </Page>
); );
}; };
export default AppsPage; export default MarketplacePage;
export { getServerSideProps } from 'lib/next/getServerSideProps'; export { getServerSideProps } from 'lib/next/getServerSideProps';
types/client/apps.ts → types/client/marketplace.ts
View file @ 621f86f5
export type AppItemPreview = { export type MarketplaceAppPreview = {
id: string; id: string;
external?: boolean; external?: boolean;
title: string; title: string;
...@@ -8,7 +8,7 @@ export type AppItemPreview = { ...@@ -8,7 +8,7 @@ export type AppItemPreview = {
url: string; url: string;
} }
export type AppItemOverview = AppItemPreview & { export type MarketplaceAppOverview = MarketplaceAppPreview & {
author: string; author: string;
description: string; description: string;
site?: string; site?: string;
...@@ -17,7 +17,7 @@ export type AppItemOverview = AppItemPreview & { ...@@ -17,7 +17,7 @@ export type AppItemOverview = AppItemPreview & {
github?: string; github?: string;
} }
export enum AppCategory { export enum MarketplaceCategory {
ALL = 'All apps', ALL = 'All apps',
FAVORITES = 'Favorites', FAVORITES = 'Favorites',
} }
ui/apps/AppCard.tsx → ui/marketplace/MarketplaceAppCard.tsx
View file @ 621f86f5
...@@ -2,21 +2,21 @@ import { Box, Heading, Icon, IconButton, Image, Link, LinkBox, Text, useColorMod ...@@ -2,21 +2,21 @@ import { Box, Heading, Icon, IconButton, Image, Link, LinkBox, Text, useColorMod
import type { MouseEvent } from 'react'; import type { MouseEvent } from 'react';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import type { AppItemPreview } from 'types/client/apps'; import type { MarketplaceAppPreview } from 'types/client/marketplace';
import northEastIcon from 'icons/arrows/north-east.svg'; import northEastIcon from 'icons/arrows/north-east.svg';
import starFilledIcon from 'icons/star_filled.svg'; import starFilledIcon from 'icons/star_filled.svg';
import starOutlineIcon from 'icons/star_outline.svg'; import starOutlineIcon from 'icons/star_outline.svg';
import AppCardLink from './AppCardLink'; import MarketplaceAppCardLink from './MarketplaceAppCardLink';
interface Props extends AppItemPreview { interface Props extends MarketplaceAppPreview {
onInfoClick: (id: string) => void; onInfoClick: (id: string) => void;
isFavorite: boolean; isFavorite: boolean;
onFavoriteClick: (id: string, isFavorite: boolean) => void; onFavoriteClick: (id: string, isFavorite: boolean) => void;
} }
const AppCard = ({ const MarketplaceAppCard = ({
id, id,
url, url,
external, external,
...@@ -85,7 +85,7 @@ const AppCard = ({ ...@@ -85,7 +85,7 @@ const AppCard = ({
size={{ base: 'xs', sm: 'sm' }} size={{ base: 'xs', sm: 'sm' }}
fontWeight="semibold" fontWeight="semibold"
> >
<AppCardLink <MarketplaceAppCardLink
id={ id } id={ id }
url={ url } url={ url }
external={ external } external={ external }
...@@ -158,4 +158,4 @@ const AppCard = ({ ...@@ -158,4 +158,4 @@ const AppCard = ({
); );
}; };
export default React.memo(AppCard); export default React.memo(MarketplaceAppCard);
ui/apps/AppCardLink.tsx → ui/marketplace/MarketplaceAppCardLink.tsx
View file @ 621f86f5
...@@ -9,7 +9,7 @@ type Props = { ...@@ -9,7 +9,7 @@ type Props = {
title: string; title: string;
} }
const AppLink = ({ url, external, id, title }: Props) => { const MarketplaceAppCardLink = ({ url, external, id, title }: Props) => {
return external ? ( return external ? (
<LinkOverlay href={ url } isExternal={ true }> <LinkOverlay href={ url } isExternal={ true }>
{ title } { title }
...@@ -23,4 +23,4 @@ const AppLink = ({ url, external, id, title }: Props) => { ...@@ -23,4 +23,4 @@ const AppLink = ({ url, external, id, title }: Props) => {
); );
}; };
export default AppLink; export default MarketplaceAppCardLink;
ui/apps/AppCardSkeleton.tsx → ui/marketplace/MarketplaceAppCardSkeleton.tsx
View file @ 621f86f5
import { Box, Heading, Skeleton, SkeletonCircle, useColorModeValue } from '@chakra-ui/react'; import { Box, Heading, Skeleton, SkeletonCircle, useColorModeValue } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
export const AppCardSkeleton = () => { const MarketplaceAppCardSkeleton = () => {
return ( return (
<Box <Box
borderRadius="md" borderRadius="md"
...@@ -43,3 +43,5 @@ export const AppCardSkeleton = () => { ...@@ -43,3 +43,5 @@ export const AppCardSkeleton = () => {
</Box> </Box>
); );
}; };
export default MarketplaceAppCardSkeleton;
ui/apps/AppModal.tsx → ui/marketplace/MarketplaceAppModal.tsx
View file @ 621f86f5
...@@ -4,7 +4,7 @@ import { ...@@ -4,7 +4,7 @@ import {
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import type { AppItemOverview } from 'types/client/apps'; import type { MarketplaceAppOverview } from 'types/client/marketplace';
import linkIcon from 'icons/link.svg'; import linkIcon from 'icons/link.svg';
import ghIcon from 'icons/social/git.svg'; import ghIcon from 'icons/social/git.svg';
...@@ -15,16 +15,16 @@ import starOutlineIcon from 'icons/star_outline.svg'; ...@@ -15,16 +15,16 @@ import starOutlineIcon from 'icons/star_outline.svg';
import useIsMobile from 'lib/hooks/useIsMobile'; import useIsMobile from 'lib/hooks/useIsMobile';
import { nbsp } from 'lib/html-entities'; import { nbsp } from 'lib/html-entities';
import AppModalLink from './AppModalLink'; import MarketplaceAppModalLink from './MarketplaceAppModalLink';
type Props = { type Props = {
onClose: () => void; onClose: () => void;
isFavorite: boolean; isFavorite: boolean;
onFavoriteClick: (id: string, isFavorite: boolean) => void; onFavoriteClick: (id: string, isFavorite: boolean) => void;
data: AppItemOverview; data: MarketplaceAppOverview;
} }
const AppModal = ({ const MarketplaceAppModal = ({
onClose, onClose,
isFavorite, isFavorite,
onFavoriteClick, onFavoriteClick,
...@@ -120,7 +120,7 @@ const AppModal = ({ ...@@ -120,7 +120,7 @@ const AppModal = ({
marginTop={{ base: 6, sm: 0 }} marginTop={{ base: 6, sm: 0 }}
> >
<Box display="flex"> <Box display="flex">
<AppModalLink <MarketplaceAppModalLink
id={ data.id } id={ data.id }
url={ url } url={ url }
external={ external } external={ external }
...@@ -241,4 +241,4 @@ const AppModal = ({ ...@@ -241,4 +241,4 @@ const AppModal = ({
); );
}; };
export default AppModal; export default MarketplaceAppModal;
ui/apps/AppModalLink.tsx → ui/marketplace/MarketplaceAppModalLink.tsx
View file @ 621f86f5
...@@ -9,7 +9,7 @@ type Props = { ...@@ -9,7 +9,7 @@ type Props = {
title: string; title: string;
} }
const AppModalLink = ({ url, external, id }: Props) => { const MarketplaceAppModalLink = ({ url, external, id }: Props) => {
const buttonProps = { const buttonProps = {
size: 'sm', size: 'sm',
marginRight: 2, marginRight: 2,
...@@ -36,4 +36,4 @@ const AppModalLink = ({ url, external, id }: Props) => { ...@@ -36,4 +36,4 @@ const AppModalLink = ({ url, external, id }: Props) => {
); );
}; };
export default AppModalLink; export default MarketplaceAppModalLink;
ui/apps/CategoriesMenu.tsx → ui/marketplace/MarketplaceCategoriesMenu.tsx
View file @ 621f86f5
import { Box, Button, Icon, Menu, MenuButton, MenuList } from '@chakra-ui/react'; import { Box, Button, Icon, Menu, MenuButton, MenuList } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import { AppCategory } from 'types/client/apps'; import { MarketplaceCategory } from 'types/client/marketplace';
import eastMiniArrowIcon from 'icons/arrows/east-mini.svg'; import eastMiniArrowIcon from 'icons/arrows/east-mini.svg';
import CategoriesMenuItem from './CategoriesMenuItem'; import MarketplaceCategoriesMenuItem from './MarketplaceCategoriesMenuItem';
type Props = { type Props = {
categories: Array<string>; categories: Array<string>;
...@@ -13,10 +13,10 @@ type Props = { ...@@ -13,10 +13,10 @@ type Props = {
onSelect: (category: string) => void; onSelect: (category: string) => void;
} }
const CategoriesMenu = ({ selectedCategoryId, onSelect, categories }: Props) => { const MarketplaceCategoriesMenu = ({ selectedCategoryId, onSelect, categories }: Props) => {
const options = React.useMemo(() => ([ const options = React.useMemo(() => ([
AppCategory.FAVORITES, MarketplaceCategory.FAVORITES,
AppCategory.ALL, MarketplaceCategory.ALL,
...categories, ...categories,
]), [ categories ]); ]), [ categories ]);
...@@ -43,7 +43,7 @@ const CategoriesMenu = ({ selectedCategoryId, onSelect, categories }: Props) => ...@@ -43,7 +43,7 @@ const CategoriesMenu = ({ selectedCategoryId, onSelect, categories }: Props) =>
<MenuList zIndex={ 3 }> <MenuList zIndex={ 3 }>
{ options.map((category: string) => ( { options.map((category: string) => (
<CategoriesMenuItem <MarketplaceCategoriesMenuItem
key={ category } key={ category }
id={ category } id={ category }
onClick={ onSelect } onClick={ onSelect }
...@@ -54,4 +54,4 @@ const CategoriesMenu = ({ selectedCategoryId, onSelect, categories }: Props) => ...@@ -54,4 +54,4 @@ const CategoriesMenu = ({ selectedCategoryId, onSelect, categories }: Props) =>
); );
}; };
export default React.memo(CategoriesMenu); export default React.memo(MarketplaceCategoriesMenu);
ui/apps/CategoriesMenuItem.tsx → ui/marketplace/MarketplaceCategoriesMenuItem.tsx
View file @ 621f86f5
...@@ -2,7 +2,7 @@ import { Icon, MenuItem } from '@chakra-ui/react'; ...@@ -2,7 +2,7 @@ import { Icon, MenuItem } from '@chakra-ui/react';
import type { FunctionComponent, SVGAttributes } from 'react'; import type { FunctionComponent, SVGAttributes } from 'react';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { AppCategory } from 'types/client/apps'; import { MarketplaceCategory } from 'types/client/marketplace';
import starFilledIcon from 'icons/star_filled.svg'; import starFilledIcon from 'icons/star_filled.svg';
...@@ -12,10 +12,10 @@ type Props = { ...@@ -12,10 +12,10 @@ type Props = {
} }
const ICONS: Record<string, FunctionComponent<SVGAttributes<SVGElement>>> = { const ICONS: Record<string, FunctionComponent<SVGAttributes<SVGElement>>> = {
[AppCategory.FAVORITES]: starFilledIcon, [MarketplaceCategory.FAVORITES]: starFilledIcon,
}; };
const CategoriesMenuItem = ({ id, onClick }: Props) => { const MarketplaceCategoriesMenuItem = ({ id, onClick }: Props) => {
const handleSelection = useCallback(() => { const handleSelection = useCallback(() => {
onClick(id); onClick(id);
}, [ id, onClick ]); }, [ id, onClick ]);
...@@ -33,4 +33,4 @@ const CategoriesMenuItem = ({ id, onClick }: Props) => { ...@@ -33,4 +33,4 @@ const CategoriesMenuItem = ({ id, onClick }: Props) => {
); );
}; };
export default CategoriesMenuItem; export default MarketplaceCategoriesMenuItem;
ui/apps/AppList.tsx → ui/marketplace/MarketplaceList.tsx
View file @ 621f86f5
import { Grid, GridItem } from '@chakra-ui/react'; import { Grid, GridItem } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { AppItemPreview } from 'types/client/apps'; import type { MarketplaceAppPreview } from 'types/client/marketplace';
import { apos } from 'lib/html-entities'; import { apos } from 'lib/html-entities';
import AppCard from 'ui/apps/AppCard'; import EmptySearchResult from 'ui/shared/EmptySearchResult';
import EmptySearchResult from 'ui/apps/EmptySearchResult';
import MarketplaceAppCard from './MarketplaceAppCard';
type Props = { type Props = {
apps: Array<AppItemPreview>; apps: Array<MarketplaceAppPreview>;
onAppClick: (id: string) => void; onAppClick: (id: string) => void;
favoriteApps: Array<string>; favoriteApps: Array<string>;
onFavoriteClick: (id: string, isFavorite: boolean) => void; onFavoriteClick: (id: string, isFavorite: boolean) => void;
} }
const AppList = ({ apps, onAppClick, favoriteApps, onFavoriteClick }: Props) => { const MarketplaceList = ({ apps, onAppClick, favoriteApps, onFavoriteClick }: Props) => {
return apps.length > 0 ? ( return apps.length > 0 ? (
<Grid <Grid
templateColumns={{ templateColumns={{
...@@ -28,7 +29,7 @@ const AppList = ({ apps, onAppClick, favoriteApps, onFavoriteClick }: Props) => ...@@ -28,7 +29,7 @@ const AppList = ({ apps, onAppClick, favoriteApps, onFavoriteClick }: Props) =>
<GridItem <GridItem
key={ app.id } key={ app.id }
> >
<AppCard <MarketplaceAppCard
onInfoClick={ onAppClick } onInfoClick={ onAppClick }
id={ app.id } id={ app.id }
external={ app.external } external={ app.external }
...@@ -48,4 +49,4 @@ const AppList = ({ apps, onAppClick, favoriteApps, onFavoriteClick }: Props) => ...@@ -48,4 +49,4 @@ const AppList = ({ apps, onAppClick, favoriteApps, onFavoriteClick }: Props) =>
); );
}; };
export default React.memo(AppList); export default React.memo(MarketplaceList);
ui/apps/AppListSkeleton.tsx → ui/marketplace/MarketplaceListSkeleton.tsx
View file @ 621f86f5
import { Grid, GridItem } from '@chakra-ui/react'; import { Grid, GridItem } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import { AppCardSkeleton } from 'ui/apps/AppCardSkeleton'; import MarketplaceAppCardSkeleton from './MarketplaceAppCardSkeleton';
const applicationStubs = [ ...Array(12) ]; const applicationStubs = [ ...Array(12) ];
const AppListSkeleton = () => { const MarketplaceListSkeleton = () => {
return ( return (
<Grid <Grid
templateColumns={{ templateColumns={{
...@@ -19,11 +19,11 @@ const AppListSkeleton = () => { ...@@ -19,11 +19,11 @@ const AppListSkeleton = () => {
<GridItem <GridItem
key={ index } key={ index }
> >
<AppCardSkeleton/> <MarketplaceAppCardSkeleton/>
</GridItem> </GridItem>
)) } )) }
</Grid> </Grid>
); );
}; };
export default AppListSkeleton; export default MarketplaceListSkeleton;
ui/apps/useMarketplaceApps.tsx → ui/marketplace/useMarketplace.tsx
View file @ 621f86f5
...@@ -2,8 +2,8 @@ import { useQuery } from '@tanstack/react-query'; ...@@ -2,8 +2,8 @@ import { useQuery } from '@tanstack/react-query';
import _unique from 'lodash/uniq'; import _unique from 'lodash/uniq';
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import type { AppItemOverview } from 'types/client/apps'; import type { MarketplaceAppOverview } from 'types/client/marketplace';
import { AppCategory } from 'types/client/apps'; import { MarketplaceCategory } from 'types/client/marketplace';
import appConfig from 'configs/app/config'; import appConfig from 'configs/app/config';
import type { ResourceError } from 'lib/api/resources'; import type { ResourceError } from 'lib/api/resources';
...@@ -20,28 +20,28 @@ function getFavoriteApps() { ...@@ -20,28 +20,28 @@ function getFavoriteApps() {
} }
} }
function isAppNameMatches(q: string, app: AppItemOverview) { function isAppNameMatches(q: string, app: MarketplaceAppOverview) {
return app.title.toLowerCase().includes(q.toLowerCase()); return app.title.toLowerCase().includes(q.toLowerCase());
} }
function isAppCategoryMatches(category: string, app: AppItemOverview, favoriteApps: Array<string>) { function isAppCategoryMatches(category: string, app: MarketplaceAppOverview, favoriteApps: Array<string>) {
return category === AppCategory.ALL || return category === MarketplaceCategory.ALL ||
(category === AppCategory.FAVORITES && favoriteApps.includes(app.id)) || (category === MarketplaceCategory.FAVORITES && favoriteApps.includes(app.id)) ||
app.categories.includes(category); app.categories.includes(category);
} }
export default function useMarketplaceApps() { export default function useMarketplace() {
const [ selectedAppId, setSelectedAppId ] = useState<string | null>(null); const [ selectedAppId, setSelectedAppId ] = useState<string | null>(null);
const [ selectedCategoryId, setSelectedCategoryId ] = useState<string>(AppCategory.ALL); const [ selectedCategoryId, setSelectedCategoryId ] = useState<string>(MarketplaceCategory.ALL);
const [ filterQuery, setFilterQuery ] = useState(''); const [ filterQuery, setFilterQuery ] = useState('');
const [ favoriteApps, setFavoriteApps ] = useState<Array<string>>([]); const [ favoriteApps, setFavoriteApps ] = useState<Array<string>>([]);
const apiFetch = useApiFetch(); const apiFetch = useApiFetch();
const { isLoading, isError, error, data } = useQuery<unknown, ResourceError<unknown>, Array<AppItemOverview>>( const { isLoading, isError, error, data } = useQuery<unknown, ResourceError<unknown>, Array<MarketplaceAppOverview>>(
[ 'marketplace-apps' ], [ 'marketplace-apps' ],
async() => apiFetch(appConfig.marketplaceConfigUrl || ''), async() => apiFetch(appConfig.marketplaceConfigUrl || ''),
{ {
select: (data) => (data as Array<AppItemOverview>).sort((a, b) => a.title.localeCompare(b.title)), select: (data) => (data as Array<MarketplaceAppOverview>).sort((a, b) => a.title.localeCompare(b.title)),
}); });
const handleFavoriteClick = useCallback((id: string, isFavorite: boolean) => { const handleFavoriteClick = useCallback((id: string, isFavorite: boolean) => {
......
ui/pages/Apps.tsx → ui/pages/Marketplace.tsx
View file @ 621f86f5
...@@ -3,15 +3,15 @@ import React from 'react'; ...@@ -3,15 +3,15 @@ import React from 'react';
import config from 'configs/app/config'; import config from 'configs/app/config';
import PlusIcon from 'icons/plus.svg'; import PlusIcon from 'icons/plus.svg';
import AppList from 'ui/apps/AppList'; import MarketplaceAppModal from 'ui/marketplace/MarketplaceAppModal';
import AppListSkeleton from 'ui/apps/AppListSkeleton'; import MarketplaceCategoriesMenu from 'ui/marketplace/MarketplaceCategoriesMenu';
import AppModal from 'ui/apps/AppModal'; import MarketplaceList from 'ui/marketplace/MarketplaceList';
import CategoriesMenu from 'ui/apps/CategoriesMenu'; import MarketplaceListSkeleton from 'ui/marketplace/MarketplaceListSkeleton';
import FilterInput from 'ui/shared/filters/FilterInput'; import FilterInput from 'ui/shared/filters/FilterInput';
import useMarketplaceApps from '../apps/useMarketplaceApps'; import useMarketplace from '../marketplace/useMarketplace';
const Apps = () => { const Marketplace = () => {
const { const {
isLoading, isLoading,
isError, isError,
...@@ -26,7 +26,7 @@ const Apps = () => { ...@@ -26,7 +26,7 @@ const Apps = () => {
clearSelectedAppId, clearSelectedAppId,
favoriteApps, favoriteApps,
onFavoriteClick, onFavoriteClick,
} = useMarketplaceApps(); } = useMarketplace();
if (isError) { if (isError) {
throw new Error('Unable to get apps list', { cause: error }); throw new Error('Unable to get apps list', { cause: error });
...@@ -40,7 +40,7 @@ const Apps = () => { ...@@ -40,7 +40,7 @@ const Apps = () => {
display="flex" display="flex"
flexDirection={{ base: 'column', sm: 'row' }} flexDirection={{ base: 'column', sm: 'row' }}
> >
<CategoriesMenu <MarketplaceCategoriesMenu
categories={ categories } categories={ categories }
selectedCategoryId={ selectedCategoryId } selectedCategoryId={ selectedCategoryId }
onSelect={ onCategoryChange } onSelect={ onCategoryChange }
...@@ -49,8 +49,8 @@ const Apps = () => { ...@@ -49,8 +49,8 @@ const Apps = () => {
<FilterInput onChange={ onSearchInputChange } marginBottom={{ base: '4', lg: '6' }} placeholder="Find app"/> <FilterInput onChange={ onSearchInputChange } marginBottom={{ base: '4', lg: '6' }} placeholder="Find app"/>
</Box> </Box>
{ isLoading ? <AppListSkeleton/> : ( { isLoading ? <MarketplaceListSkeleton/> : (
<AppList <MarketplaceList
apps={ displayedApps } apps={ displayedApps }
onAppClick={ showAppInfo } onAppClick={ showAppInfo }
favoriteApps={ favoriteApps } favoriteApps={ favoriteApps }
...@@ -59,7 +59,7 @@ const Apps = () => { ...@@ -59,7 +59,7 @@ const Apps = () => {
) } ) }
{ selectedApp && ( { selectedApp && (
<AppModal <MarketplaceAppModal
onClose={ clearSelectedAppId } onClose={ clearSelectedAppId }
isFavorite={ favoriteApps.includes(selectedApp.id) } isFavorite={ favoriteApps.includes(selectedApp.id) }
onFavoriteClick={ onFavoriteClick } onFavoriteClick={ onFavoriteClick }
...@@ -90,4 +90,4 @@ const Apps = () => { ...@@ -90,4 +90,4 @@ const Apps = () => {
); );
}; };
export default Apps; export default Marketplace;
ui/pages/MarketplaceApp.tsx
View file @ 621f86f5
...@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'; ...@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
import { route } from 'nextjs-routes'; import { route } from 'nextjs-routes';
import React, { useCallback, useEffect, useRef, useState } from 'react'; import React, { useCallback, useEffect, useRef, useState } from 'react';
import type { AppItemOverview } from 'types/client/apps'; import type { MarketplaceAppOverview } from 'types/client/marketplace';
import appConfig from 'configs/app/config'; import appConfig from 'configs/app/config';
import type { ResourceError } from 'lib/api/resources'; import type { ResourceError } from 'lib/api/resources';
...@@ -26,15 +26,15 @@ const MarketplaceApp = () => { ...@@ -26,15 +26,15 @@ const MarketplaceApp = () => {
const router = useRouter(); const router = useRouter();
const id = getQueryParamString(router.query.id); const id = getQueryParamString(router.query.id);
const { isLoading, isError, error, data } = useQuery<unknown, ResourceError<unknown>, AppItemOverview>( const { isLoading, isError, error, data } = useQuery<unknown, ResourceError<unknown>, MarketplaceAppOverview>(
[ 'marketplace-apps', id ], [ 'marketplace-apps', id ],
async() => { async() => {
const result = await apiFetch<Array<AppItemOverview>, unknown>(appConfig.marketplaceConfigUrl || ''); const result = await apiFetch<Array<MarketplaceAppOverview>, unknown>(appConfig.marketplaceConfigUrl || '');
if (!Array.isArray(result)) { if (!Array.isArray(result)) {
throw result; throw result;
} }
const item = result.find((app: AppItemOverview) => app.id === id); const item = result.find((app: MarketplaceAppOverview) => app.id === id);
if (!item) { if (!item) {
throw { status: 404 }; throw { status: 404 };
} }
......
ui/shared/DataListDisplay.tsx
View file @ 621f86f5
import { Box, Text, chakra } from '@chakra-ui/react'; import { Box, Text, chakra } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import EmptySearchResult from 'ui/apps/EmptySearchResult'; import EmptySearchResult from 'ui/shared/EmptySearchResult';
import DataFetchAlert from './DataFetchAlert'; import DataFetchAlert from './DataFetchAlert';
import SkeletonList from './skeletons/SkeletonList'; import SkeletonList from './skeletons/SkeletonList';
......
ui/stats/ChartsWidgetsList.tsx
View file @ 621f86f5
...@@ -5,9 +5,9 @@ import type { StatsChartsSection } from 'types/api/stats'; ...@@ -5,9 +5,9 @@ import type { StatsChartsSection } from 'types/api/stats';
import type { StatsIntervalIds } from 'types/client/stats'; import type { StatsIntervalIds } from 'types/client/stats';
import { apos } from 'lib/html-entities'; import { apos } from 'lib/html-entities';
import ChartWidgetSkeleton from 'ui/shared/chart/ChartWidgetSkeleton';
import EmptySearchResult from 'ui/shared/EmptySearchResult';
import EmptySearchResult from '../apps/EmptySearchResult';
import ChartWidgetSkeleton from '../shared/chart/ChartWidgetSkeleton';
import ChartsLoadingErrorAlert from './ChartsLoadingErrorAlert'; import ChartsLoadingErrorAlert from './ChartsLoadingErrorAlert';
import ChartWidgetContainer from './ChartWidgetContainer'; import ChartWidgetContainer from './ChartWidgetContainer';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment