groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Extend Apps page with search and data

Browse Source
This commit is contained in:
Ali BARIN
2021-10-09 00:16:24 +02:00
parent e0ab059744
commit c9079db77a
13 changed files with 198 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/web/public/index.html
View File

@@ -25,6 +25,11 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Automatisch</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

19
packages/web/src/components/AppBar/index.tsx
View File

@@ -4,20 +4,16 @@ import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';
import HideOnScroll from 'components/HideOnScroll';
import { FormattedMessage } from 'react-intl';
import useFormatMessage from 'hooks/useFormatMessage';
import { Search, SearchIconWrapper, InputBase } from './style';
import SearchInput from 'components/SearchInput';
type AppBarProps = {
onMenuClick: () => void;
};
export default function AppBar({ onMenuClick }: AppBarProps) {
const formatMessage = useFormatMessage();
return (
<Box sx={{ flexGrow: 1 }}>
<HideOnScroll>
@@ -41,19 +37,10 @@ export default function AppBar({ onMenuClick }: AppBarProps) {
component="div"
sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
>
<FormattedMessage id="automatisch" />
<FormattedMessage id="brandText" />
</Typography>
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
<InputBase
placeholder={formatMessage('searchPlaceholder')}
inputProps={{ 'aria-label': 'search' }}
/>
</Search>
<SearchInput />
</Toolbar>
</MuiAppBar>
</HideOnScroll>

50
packages/web/src/components/AppRow/index.tsx
View File

@@ -1,28 +1,64 @@
import { Link } from 'react-router-dom';
import Card from '@mui/material/Card';
import Box from '@mui/material/Box';
import Avatar from '@mui/material/Avatar';
import CardActionArea from '@mui/material/CardActionArea';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import useFormatMessage from 'hooks/useFormatMessage';
import { CardContent, Typography, DesktopOnlyBreakline } from './style';
type AppRowProps = {
icon?: React.ReactNode;
name: string;
connectionNumber?: number;
flowNumber?: number;
to: string;
}
export default function AppRow(props: AppRowProps) {
const { name } = props;
const countTranslation = (value: React.ReactNode) => (<><strong>{value}</strong><DesktopOnlyBreakline /></>);
function AppRow(props: AppRowProps) {
const formatMessage = useFormatMessage();
const { name, to } = props;
return (
<Card sx={{ my: 1 }}>
<Link to={to}>
<Card sx={{ my: 2 }}>
<CardActionArea>
<CardContent>
<Typography gutterBottom variant="h6" component="div">
<Box>
<Avatar variant="square">
{name[0].toUpperCase()}
</Avatar>
</Box>
<Box>
<Typography variant="h6">
{name}
</Typography>
</Box>
<Box sx={{ px: 2 }}>
<Typography variant="body2">
{formatMessage('app.connections', { count: countTranslation(Math.round(Math.random() * 100)) })}
</Typography>
</Box>
<Box sx={{ px: 2 }}>
<Typography variant="body2">
{formatMessage('app.flows', { count: countTranslation(Math.round(Math.random() * 100)) })}
</Typography>
</Box>
<Box>
<ChevronRightIcon />
</Box>
</CardContent>
</CardActionArea>
</Card>
</Link>
);
}
export default AppRow;

26
packages/web/src/components/AppRow/style.ts Normal file
View File

@@ -0,0 +1,26 @@
import { styled } from '@mui/material/styles';
import MuiCardContent from '@mui/material/CardContent';
import MuiTypography from '@mui/material/Typography';
export const CardContent = styled(MuiCardContent)(({ theme }) => ({
display: 'grid',
gridTemplateRows: 'auto',
gridTemplateColumns: 'auto 1fr auto auto auto',
gridColumnGap: theme.spacing(2),
alignItems: 'center',
}));
export const Typography = styled(MuiTypography)(({ theme }) => ({
'&.MuiTypography-h6': {
textTransform: 'capitalize',
},
textAlign: 'center',
display: 'inline-block',
}));
export const DesktopOnlyBreakline = styled('br')(({ theme }) => ({
[theme.breakpoints.down('md')]: {
display: 'none',
}
}));

26
packages/web/src/components/SearchInput/index.tsx Normal file
View File

@@ -0,0 +1,26 @@
import SearchIcon from '@mui/icons-material/Search';
import useFormatMessage from 'hooks/useFormatMessage';
import { Search, SearchIconWrapper, InputBase } from './style';
type SearchInputProps = {
onChange?: (event: React.ChangeEvent) => void;
};
export default function SearchInput({ onChange }: SearchInputProps) {
const formatMessage = useFormatMessage();
return (
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
<InputBase
placeholder={formatMessage('searchPlaceholder')}
inputProps={{ 'aria-label': 'search' }}
onChange={onChange}
/>
</Search>
);
}

11
packages/web/src/components/AppBar/style.ts → packages/web/src/components/SearchInput/style.ts
View File

@@ -1,5 +1,5 @@
import { styled, alpha } from '@mui/material/styles';
import MuiInputBase from '@mui/material/InputBase';
import MuiInput from '@mui/material/Input';
export const Search = styled('div')(({ theme }) => ({
position: 'relative',
@@ -10,6 +10,7 @@ export const Search = styled('div')(({ theme }) => ({
},
marginLeft: 0,
width: '100%',
maxWidth: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(1),
width: 'auto',
@@ -26,14 +27,16 @@ export const SearchIconWrapper = styled('div')(({ theme }) => ({
justifyContent: 'center',
}));
export const InputBase = styled(MuiInputBase)(({ theme }) => ({
export const InputBase = styled(MuiInput)(({ theme }) => ({
color: 'inherit',
'& .MuiInputBase-input': {
width: '100%',
maxWidth: '100%',
'& .MuiInput-input': {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create('width'),
width: '100%',
width: '200',
[theme.breakpoints.up('sm')]: {
width: '12ch',
'&:focus': {

2
packages/web/src/config/urls.ts
View File

@@ -2,3 +2,5 @@ export const DASHBOARD = '/dashboard';
export const APPS = '/apps';
export const FLOWS = '/flows';
export const EXPLORE = '/explore';
export const APP_PATH = (appSlug: string) => `/app/${appSlug}`;
export const APP_PATH_PATTERN = '/app/:slug';

7
packages/web/src/graphql/queries/get-apps.ts Normal file
View File

@@ -0,0 +1,7 @@
import { gql } from '@apollo/client';
export const GET_APPS = gql`
query GetApps($name: String) {
getApps(name: $name)
}
`;

4
packages/web/src/locales/en.json
View File

@@ -5,5 +5,7 @@
"drawer.dashboard": "Dashboard",
"drawer.flows": "Flows",
"drawer.apps": "My Apps",
"drawer.explore": "Explore"
"drawer.explore": "Explore",
"app.connections": "{count} connections",
"app.flows": "{count} flows"
}

26
packages/web/src/pages/Application/index.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { useCallback, useState } from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Container from 'components/Container';
import PageTitle from 'components/PageTitle';
import SearchInput from 'components/SearchInput';
export default function Applications() {
return (
<Box sx={{ py: 3 }}>
<Container>
<Grid container sx={{ mb: 3 }}>
<Grid item xs={6}>
<PageTitle>Application!</PageTitle>
</Grid>
<Grid container item xs={6} justifyContent="flex-end">
</Grid>
</Grid>
</Container>
</Box>
);
};

30
packages/web/src/pages/Applications/index.tsx
View File

@@ -1,18 +1,40 @@
import { useCallback, useState } from 'react';
import { useQuery } from '@apollo/client';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Container from 'components/Container';
import PageTitle from 'components/PageTitle';
import AppRow from 'components/AppRow';
import SearchInput from 'components/SearchInput';
import * as URLS from 'config/urls';
import { GET_APPS } from 'graphql/queries/get-apps';
export default function Applications() {
const [appName, setAppName] = useState(null);
const { data } = useQuery(GET_APPS, { variables: {name: appName } });
const onSearchChange = useCallback((event) => {
setAppName(event.target.value);
}, []);
return (
<Box sx={{ py: 3 }}>
<Container>
<Grid container sx={{ mb: 3 }}>
<Grid item xs={6}>
<PageTitle>Applications</PageTitle>
</Grid>
<AppRow name="Google Calendar" />
<AppRow name="Slack" />
<AppRow name="Twitch" />
<AppRow name="Twitter" />
<Grid container item xs={6} justifyContent="flex-end">
<SearchInput onChange={onSearchChange} />
</Grid>
</Grid>
{data?.getApps?.map((name: string) => (
<AppRow key={name} name={name} to={URLS.APP_PATH(name)} />
))}
</Container>
</Box>
);

5
packages/web/src/routes.tsx
View File

@@ -1,6 +1,7 @@
import { Route, Switch, Redirect } from "react-router";
import Dashboard from 'pages/Dashboard';
import Applications from 'pages/Applications';
import Application from 'pages/Application';
import Flows from 'pages/Flows';
import Explore from 'pages/Explore';
import * as URLS from 'config/urls';
@@ -23,6 +24,10 @@ export default (
<Explore />
</Route>
<Route path={URLS.APP_PATH_PATTERN}>
<Application />
</Route>
<Route exact path="/">
<Redirect to={URLS.DASHBOARD} />
</Route>

12
packages/web/src/styles/theme.ts
View File

@@ -1,5 +1,15 @@
import { createTheme } from '@mui/material/styles';
const theme = createTheme();
const theme = createTheme({
components: {
MuiCssBaseline: {
styleOverrides: {
a: {
textDecoration: 'none',
},
},
},
}
});
export default theme;