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';
import MarketplaceApp from 'ui/pages/MarketplaceApp';
import Page from 'ui/shared/Page/Page';
const AppPage: NextPage = () => {
const MarketplaceAppPage: NextPage = () => {
return (
<Page wrapChildren={ false }>
<Head><title>Blockscout | Marketplace</title></Head>
......@@ -14,6 +14,6 @@ const AppPage: NextPage = () => {
);
};
export default AppPage;
export default MarketplaceAppPage;
export { getServerSideProps } from 'lib/next/getServerSideProps';
pages/apps/index.tsx
View file @ 621f86f5
......@@ -2,21 +2,21 @@ import type { NextPage } from 'next';
import Head from 'next/head';
import React from 'react';
import Apps from 'ui/pages/Apps';
import Marketplace from 'ui/pages/Marketplace';
import Page from 'ui/shared/Page/Page';
import PageTitle from 'ui/shared/Page/PageTitle';
const AppsPage: NextPage = () => {
const MarketplacePage: NextPage = () => {
return (
<Page>
<PageTitle text="Apps"/>
<PageTitle text="Marketplace"/>
<Head><title>Blockscout | Marketplace</title></Head>
<Apps/>
<Marketplace/>
</Page>
);
};
export default AppsPage;
export default MarketplacePage;
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;
external?: boolean;
title: string;
......@@ -8,7 +8,7 @@ export type AppItemPreview = {
url: string;
}
export type AppItemOverview = AppItemPreview & {
export type MarketplaceAppOverview = MarketplaceAppPreview & {
author: string;
description: string;
site?: string;
......@@ -17,7 +17,7 @@ export type AppItemOverview = AppItemPreview & {
github?: string;
}
export enum AppCategory {
export enum MarketplaceCategory {
ALL = 'All apps',
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
import type { MouseEvent } 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 starFilledIcon from 'icons/star_filled.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;
isFavorite: boolean;
onFavoriteClick: (id: string, isFavorite: boolean) => void;
}
const AppCard = ({
const MarketplaceAppCard = ({
id,
url,
external,
......@@ -85,7 +85,7 @@ const AppCard = ({
size={{ base: 'xs', sm: 'sm' }}
fontWeight="semibold"
>
<AppCardLink
<MarketplaceAppCardLink
id={ id }
url={ url }
external={ external }
......@@ -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 = {
title: string;
}
const AppLink = ({ url, external, id, title }: Props) => {
const MarketplaceAppCardLink = ({ url, external, id, title }: Props) => {
return external ? (
<LinkOverlay href={ url } isExternal={ true }>
{ title }
......@@ -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 React from 'react';
export const AppCardSkeleton = () => {
const MarketplaceAppCardSkeleton = () => {
return (
<Box
borderRadius="md"
......@@ -43,3 +43,5 @@ export const AppCardSkeleton = () => {
</Box>
);
};
export default MarketplaceAppCardSkeleton;
ui/apps/AppModal.tsx → ui/marketplace/MarketplaceAppModal.tsx
View file @ 621f86f5
......@@ -4,7 +4,7 @@ import {
} from '@chakra-ui/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 ghIcon from 'icons/social/git.svg';
......@@ -15,16 +15,16 @@ import starOutlineIcon from 'icons/star_outline.svg';
import useIsMobile from 'lib/hooks/useIsMobile';
import { nbsp } from 'lib/html-entities';
import AppModalLink from './AppModalLink';
import MarketplaceAppModalLink from './MarketplaceAppModalLink';
type Props = {
onClose: () => void;
isFavorite: boolean;
onFavoriteClick: (id: string, isFavorite: boolean) => void;
data: AppItemOverview;
data: MarketplaceAppOverview;
}
const AppModal = ({
const MarketplaceAppModal = ({
onClose,
isFavorite,
onFavoriteClick,
......@@ -120,7 +120,7 @@ const AppModal = ({
marginTop={{ base: 6, sm: 0 }}
>
<Box display="flex">
<AppModalLink
<MarketplaceAppModalLink
id={ data.id }
url={ url }
external={ external }
......@@ -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 = {
title: string;
}
const AppModalLink = ({ url, external, id }: Props) => {
const MarketplaceAppModalLink = ({ url, external, id }: Props) => {
const buttonProps = {
size: 'sm',
marginRight: 2,
......@@ -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 React from 'react';
import { AppCategory } from 'types/client/apps';
import { MarketplaceCategory } from 'types/client/marketplace';
import eastMiniArrowIcon from 'icons/arrows/east-mini.svg';
import CategoriesMenuItem from './CategoriesMenuItem';
import MarketplaceCategoriesMenuItem from './MarketplaceCategoriesMenuItem';
type Props = {
categories: Array<string>;
......@@ -13,10 +13,10 @@ type Props = {
onSelect: (category: string) => void;
}
const CategoriesMenu = ({ selectedCategoryId, onSelect, categories }: Props) => {
const MarketplaceCategoriesMenu = ({ selectedCategoryId, onSelect, categories }: Props) => {
const options = React.useMemo(() => ([
AppCategory.FAVORITES,
AppCategory.ALL,
MarketplaceCategory.FAVORITES,
MarketplaceCategory.ALL,
...categories,
]), [ categories ]);
......@@ -43,7 +43,7 @@ const CategoriesMenu = ({ selectedCategoryId, onSelect, categories }: Props) =>
<MenuList zIndex={ 3 }>
{ options.map((category: string) => (
<CategoriesMenuItem
<MarketplaceCategoriesMenuItem
key={ category }
id={ category }
onClick={ onSelect }
......@@ -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';
import type { FunctionComponent, SVGAttributes } 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';
......@@ -12,10 +12,10 @@ type Props = {
}
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(() => {
onClick(id);
}, [ id, onClick ]);
......@@ -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 React from 'react';
import type { AppItemPreview } from 'types/client/apps';
import type { MarketplaceAppPreview } from 'types/client/marketplace';
import { apos } from 'lib/html-entities';
import AppCard from 'ui/apps/AppCard';
import EmptySearchResult from 'ui/apps/EmptySearchResult';
import EmptySearchResult from 'ui/shared/EmptySearchResult';
import MarketplaceAppCard from './MarketplaceAppCard';
type Props = {
apps: Array<AppItemPreview>;
apps: Array<MarketplaceAppPreview>;
onAppClick: (id: string) => void;
favoriteApps: Array<string>;
onFavoriteClick: (id: string, isFavorite: boolean) => void;
}
const AppList = ({ apps, onAppClick, favoriteApps, onFavoriteClick }: Props) => {
const MarketplaceList = ({ apps, onAppClick, favoriteApps, onFavoriteClick }: Props) => {
return apps.length > 0 ? (
<Grid
templateColumns={{
......@@ -28,7 +29,7 @@ const AppList = ({ apps, onAppClick, favoriteApps, onFavoriteClick }: Props) =>
<GridItem
key={ app.id }
>
<AppCard
<MarketplaceAppCard
onInfoClick={ onAppClick }
id={ app.id }
external={ app.external }
......@@ -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 React from 'react';
import { AppCardSkeleton } from 'ui/apps/AppCardSkeleton';
import MarketplaceAppCardSkeleton from './MarketplaceAppCardSkeleton';
const applicationStubs = [ ...Array(12) ];
const AppListSkeleton = () => {
const MarketplaceListSkeleton = () => {
return (
<Grid
templateColumns={{
......@@ -19,11 +19,11 @@ const AppListSkeleton = () => {
<GridItem
key={ index }
>
<AppCardSkeleton/>
<MarketplaceAppCardSkeleton/>
</GridItem>
)) }
</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';
import _unique from 'lodash/uniq';
import React, { useCallback, useEffect, useState } from 'react';
import type { AppItemOverview } from 'types/client/apps';
import { AppCategory } from 'types/client/apps';
import type { MarketplaceAppOverview } from 'types/client/marketplace';
import { MarketplaceCategory } from 'types/client/marketplace';
import appConfig from 'configs/app/config';
import type { ResourceError } from 'lib/api/resources';
......@@ -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());
}
function isAppCategoryMatches(category: string, app: AppItemOverview, favoriteApps: Array<string>) {
return category === AppCategory.ALL ||
(category === AppCategory.FAVORITES && favoriteApps.includes(app.id)) ||
function isAppCategoryMatches(category: string, app: MarketplaceAppOverview, favoriteApps: Array<string>) {
return category === MarketplaceCategory.ALL ||
(category === MarketplaceCategory.FAVORITES && favoriteApps.includes(app.id)) ||
app.categories.includes(category);
}
export default function useMarketplaceApps() {
export default function useMarketplace() {
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 [ favoriteApps, setFavoriteApps ] = useState<Array<string>>([]);
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' ],
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) => {
......
ui/pages/Apps.tsx → ui/pages/Marketplace.tsx
View file @ 621f86f5
......@@ -3,15 +3,15 @@ import React from 'react';
import config from 'configs/app/config';
import PlusIcon from 'icons/plus.svg';
import AppList from 'ui/apps/AppList';
import AppListSkeleton from 'ui/apps/AppListSkeleton';
import AppModal from 'ui/apps/AppModal';
import CategoriesMenu from 'ui/apps/CategoriesMenu';
import MarketplaceAppModal from 'ui/marketplace/MarketplaceAppModal';
import MarketplaceCategoriesMenu from 'ui/marketplace/MarketplaceCategoriesMenu';
import MarketplaceList from 'ui/marketplace/MarketplaceList';
import MarketplaceListSkeleton from 'ui/marketplace/MarketplaceListSkeleton';
import FilterInput from 'ui/shared/filters/FilterInput';
import useMarketplaceApps from '../apps/useMarketplaceApps';
import useMarketplace from '../marketplace/useMarketplace';
const Apps = () => {
const Marketplace = () => {
const {
isLoading,
isError,
......@@ -26,7 +26,7 @@ const Apps = () => {
clearSelectedAppId,
favoriteApps,
onFavoriteClick,
} = useMarketplaceApps();
} = useMarketplace();
if (isError) {
throw new Error('Unable to get apps list', { cause: error });
......@@ -40,7 +40,7 @@ const Apps = () => {
display="flex"
flexDirection={{ base: 'column', sm: 'row' }}
>
<CategoriesMenu
<MarketplaceCategoriesMenu
categories={ categories }
selectedCategoryId={ selectedCategoryId }
onSelect={ onCategoryChange }
......@@ -49,8 +49,8 @@ const Apps = () => {
<FilterInput onChange={ onSearchInputChange } marginBottom={{ base: '4', lg: '6' }} placeholder="Find app"/>
</Box>
{ isLoading ? <AppListSkeleton/> : (
<AppList
{ isLoading ? <MarketplaceListSkeleton/> : (
<MarketplaceList
apps={ displayedApps }
onAppClick={ showAppInfo }
favoriteApps={ favoriteApps }
......@@ -59,7 +59,7 @@ const Apps = () => {
) }
{ selectedApp && (
<AppModal
<MarketplaceAppModal
onClose={ clearSelectedAppId }
isFavorite={ favoriteApps.includes(selectedApp.id) }
onFavoriteClick={ onFavoriteClick }
......@@ -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';
import { route } from 'nextjs-routes';
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 type { ResourceError } from 'lib/api/resources';
......@@ -26,15 +26,15 @@ const MarketplaceApp = () => {
const router = useRouter();
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 ],
async() => {
const result = await apiFetch<Array<AppItemOverview>, unknown>(appConfig.marketplaceConfigUrl || '');
const result = await apiFetch<Array<MarketplaceAppOverview>, unknown>(appConfig.marketplaceConfigUrl || '');
if (!Array.isArray(result)) {
throw result;
}
const item = result.find((app: AppItemOverview) => app.id === id);
const item = result.find((app: MarketplaceAppOverview) => app.id === id);
if (!item) {
throw { status: 404 };
}
......
ui/shared/DataListDisplay.tsx
View file @ 621f86f5
import { Box, Text, chakra } from '@chakra-ui/react';
import React from 'react';
import EmptySearchResult from 'ui/apps/EmptySearchResult';
import EmptySearchResult from 'ui/shared/EmptySearchResult';
import DataFetchAlert from './DataFetchAlert';
import SkeletonList from './skeletons/SkeletonList';
......
ui/stats/ChartsWidgetsList.tsx
View file @ 621f86f5
......@@ -5,9 +5,9 @@ import type { StatsChartsSection } from 'types/api/stats';
import type { StatsIntervalIds } from 'types/client/stats';
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 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