3088967926

Committed 20 Sep 2022 09:28AM UTC coverage: 42.082% (-0.1%) from 42.192%

Build Type

github

Committed by GitHub

Commit Message

Merge a873499ac into f8d72584b

Pull Request Pull Request #4076: Release/3.31.0

Run Details

1784 of 5226 branches covered (34.14%)

Branch coverage included in aggregate %.

2 of 30 new or added lines in 4 files covered. (6.67%)

19 existing lines in 1 file now uncovered.

4774 of 10358 relevant lines covered (46.09%)

38.96 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/components/Dashboard/SafeApps/index.tsx

import { ReactElement, useMemo } from 'react'
import styled from 'styled-components'
import { Button } from '@gnosis.pm/safe-react-components'
import { generatePath, Link } from 'react-router-dom'
import Skeleton from '@material-ui/lab/Skeleton/Skeleton'
import { Grid } from '@material-ui/core'
import { sampleSize, uniqBy } from 'lodash'

import { screenSm, screenMd } from 'src/theme/variables'
import { useAppList } from 'src/routes/safe/components/Apps/hooks/appList/useAppList'
import { GENERIC_APPS_ROUTE } from 'src/routes/routes'
import SafeAppCard, {
  SAFE_APP_CARD_HEIGHT,
  SAFE_APP_CARD_PADDING,
} from 'src/routes/safe/components/Apps/components/SafeAppCard/SafeAppCard'
import ExploreIcon from 'src/assets/icons/explore.svg'
import { SafeApp } from 'src/routes/safe/components/Apps/types'
import { getAppsUsageData, rankSafeApps } from 'src/routes/safe/components/Apps/trackAppUsageCount'
import { FEATURED_APPS_TAG } from 'src/components/Dashboard/FeaturedApps/FeaturedApps'
import { WidgetTitle, WidgetBody, WidgetContainer, Card } from 'src/components/Dashboard/styled'

export const CARD_PADDING = 24

const SkeletonWrapper = styled.div`
  border-radius: 8px;
  overflow: hidden;
`

const StyledExploreBlock = styled.div`
  background: url(${ExploreIcon}) center top no-repeat;
  padding-top: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`

const StyledLink = styled(Link)`
  text-decoration: none;

  > button {
    width: 200px;
  }
`

const StyledGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  gap: 24px;

  @media (max-width: ${screenMd}px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (max-width: ${screenSm}px) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
`

const StyledAppCard = styled(Card)`
  padding: ${SAFE_APP_CARD_PADDING}px;
`

const useRankedApps = (allApps: SafeApp[], pinnedSafeApps: SafeApp[], size: number): SafeApp[] => {
  return useMemo(() => {
    if (!allApps.length) return []

    const trackData = getAppsUsageData()
    const rankedSafeAppIds = rankSafeApps(trackData, pinnedSafeApps)
    const featuredSafeAppIds = allApps.filter((app) => app.tags?.includes(FEATURED_APPS_TAG)).map((app) => app.id)

    const nonFeaturedApps = allApps.filter((app) => !featuredSafeAppIds.includes(app.id))
    const nonRankedApps = nonFeaturedApps.filter((app) => !rankedSafeAppIds.includes(app.id))

    const topRankedSafeApps: SafeApp[] = []
    rankedSafeAppIds.forEach((id) => {
      const sortedApp = nonFeaturedApps.find((app) => app.id === id)
      if (sortedApp) topRankedSafeApps.push(sortedApp)
    })

    // Get random apps that are not ranked and not featured
    const randomApps = sampleSize(nonRankedApps, size - 1 - topRankedSafeApps.length)

    const resultApps = uniqBy(topRankedSafeApps.concat(pinnedSafeApps, randomApps), 'id')

    // Display size - 1 in order to always display the "Explore Safe Apps" card
    return resultApps.slice(0, size - 1)
  }, [allApps, pinnedSafeApps, size])
}

const SafeApps = ({ size = 6 }: { size?: number }): ReactElement => {
  const { allApps, pinnedSafeApps, isLoading, togglePin } = useAppList()
  const displayedApps = useRankedApps(allApps, pinnedSafeApps, size)
  const allAppsUrl = generatePath(GENERIC_APPS_ROUTE)

  const LoadingState = useMemo(
    () => (
      <Grid container spacing={2}>
        {Array.from(Array(size).keys()).map((key) => (
          <Grid item xs={12} md={4} key={key}>
            <SkeletonWrapper>
              <Skeleton variant="rect" height={SAFE_APP_CARD_HEIGHT + 2 * SAFE_APP_CARD_PADDING} />
            </SkeletonWrapper>
          </Grid>
        ))}
      </Grid>
    ),
    [size],
  )

  if (isLoading) return LoadingState

  return (
    <WidgetContainer id="safe-apps">
      <WidgetTitle>Safe Apps</WidgetTitle>

      <WidgetBody>
        <StyledGrid>
          {displayedApps.map((safeApp) => (
            <SafeAppCard
              key={safeApp.id}
              safeApp={safeApp}
              togglePin={togglePin}
              size="md"
              isPinned={pinnedSafeApps.some((pinnedSafeApp) => pinnedSafeApp.id === safeApp.id)}
            />
          ))}

          <StyledLink to={allAppsUrl}>
            <StyledAppCard>
              <StyledExploreBlock>
                <Button size="md" color="primary" variant="contained">
                  Explore Safe Apps
                </Button>
              </StyledExploreBlock>
            </StyledAppCard>
          </StyledLink>
        </StyledGrid>
      </WidgetBody>
    </WidgetContainer>
  )
}

export default SafeApps

1	import { ReactElement, useMemo } from 'react'
2	import styled from 'styled-components'
3	import { Button } from '@gnosis.pm/safe-react-components'
4	import { generatePath, Link } from 'react-router-dom'
5	import Skeleton from '@material-ui/lab/Skeleton/Skeleton'
6	import { Grid } from '@material-ui/core'
7	import { sampleSize, uniqBy } from 'lodash'
8
9	import { screenSm, screenMd } from 'src/theme/variables'
10	import { useAppList } from 'src/routes/safe/components/Apps/hooks/appList/useAppList'
11	import { GENERIC_APPS_ROUTE } from 'src/routes/routes'
12	import SafeAppCard, {
13	SAFE_APP_CARD_HEIGHT,
14	SAFE_APP_CARD_PADDING,
15	} from 'src/routes/safe/components/Apps/components/SafeAppCard/SafeAppCard'
16	import ExploreIcon from 'src/assets/icons/explore.svg'
17	import { SafeApp } from 'src/routes/safe/components/Apps/types'
18	import { getAppsUsageData, rankSafeApps } from 'src/routes/safe/components/Apps/trackAppUsageCount'
19	import { FEATURED_APPS_TAG } from 'src/components/Dashboard/FeaturedApps/FeaturedApps'
20	import { WidgetTitle, WidgetBody, WidgetContainer, Card } from 'src/components/Dashboard/styled'
21
22	export const CARD_PADDING = 24	×
23
UNCOV 24	const SkeletonWrapper = styled.div`	×
25	border-radius: 8px;
26	overflow: hidden;
27	`
28
UNCOV 29	const StyledExploreBlock = styled.div`	×
30	background: url(${ExploreIcon}) center top no-repeat;
31	padding-top: 120px;
32	display: flex;
33	flex-direction: column;
34	align-items: center;
35	justify-content: center;
36	`
37
UNCOV 38	const StyledLink = styled(Link)`	×
39	text-decoration: none;
40
41	> button {
42	width: 200px;
43	}
44	`
45
UNCOV 46	const StyledGrid = styled.div`	×
47	display: grid;
48	grid-template-columns: repeat(3, minmax(0, 1fr));
49	grid-template-rows: repeat(2, 1fr);
50	gap: 24px;
51
52	@media (max-width: ${screenMd}px) {
53	grid-template-columns: repeat(2, minmax(0, 1fr));
54	}
55
56	@media (max-width: ${screenSm}px) {
57	grid-template-columns: repeat(1, minmax(0, 1fr));
58	}
59	`
60
UNCOV 61	const StyledAppCard = styled(Card)`	×
62	padding: ${SAFE_APP_CARD_PADDING}px;
63	`
64
UNCOV 65	const useRankedApps = (allApps: SafeApp[], pinnedSafeApps: SafeApp[], size: number): SafeApp[] => {	×
66	return useMemo(() => {	×
67	if (!allApps.length) return []	×
68
UNCOV 69	const trackData = getAppsUsageData()	×
70	const rankedSafeAppIds = rankSafeApps(trackData, pinnedSafeApps)	×
71	const featuredSafeAppIds = allApps.filter((app) => app.tags?.includes(FEATURED_APPS_TAG)).map((app) => app.id)	×
72
UNCOV 73	const nonFeaturedApps = allApps.filter((app) => !featuredSafeAppIds.includes(app.id))	×
74	const nonRankedApps = nonFeaturedApps.filter((app) => !rankedSafeAppIds.includes(app.id))	×
75
UNCOV 76	const topRankedSafeApps: SafeApp[] = []	×
77	rankedSafeAppIds.forEach((id) => {	×
78	const sortedApp = nonFeaturedApps.find((app) => app.id === id)	×
79	if (sortedApp) topRankedSafeApps.push(sortedApp)	×
80	})
81
82	// Get random apps that are not ranked and not featured
UNCOV 83	const randomApps = sampleSize(nonRankedApps, size - 1 - topRankedSafeApps.length)	×
84
UNCOV 85	const resultApps = uniqBy(topRankedSafeApps.concat(pinnedSafeApps, randomApps), 'id')	×
86
87	// Display size - 1 in order to always display the "Explore Safe Apps" card
NEW 88	return resultApps.slice(0, size - 1)	×
89	}, [allApps, pinnedSafeApps, size])
90	}
91
UNCOV 92	const SafeApps = ({ size = 6 }: { size?: number }): ReactElement => {	×
UNCOV 93	const { allApps, pinnedSafeApps, isLoading, togglePin } = useAppList()	×
NEW 94	const displayedApps = useRankedApps(allApps, pinnedSafeApps, size)	×
UNCOV 95	const allAppsUrl = generatePath(GENERIC_APPS_ROUTE)	×
96
UNCOV 97	const LoadingState = useMemo(	×
98	() => (
99	<Grid container spacing={2}>	×
100	{Array.from(Array(size).keys()).map((key) => (
101	<Grid item xs={12} md={4} key={key}>	×
102	<SkeletonWrapper>
103	<Skeleton variant="rect" height={SAFE_APP_CARD_HEIGHT + 2 * SAFE_APP_CARD_PADDING} />
104	</SkeletonWrapper>
105	</Grid>
106	))}
107	</Grid>
108	),
109	[size],
110	)
111
UNCOV 112	if (isLoading) return LoadingState	×
113
UNCOV 114	return (	×
115	<WidgetContainer id="safe-apps">
116	<WidgetTitle>Safe Apps</WidgetTitle>
117
118	<WidgetBody>
119	<StyledGrid>
120	{displayedApps.map((safeApp) => (
UNCOV 121	<SafeAppCard	×
122	key={safeApp.id}
123	safeApp={safeApp}
124	togglePin={togglePin}
125	size="md"
UNCOV 126	isPinned={pinnedSafeApps.some((pinnedSafeApp) => pinnedSafeApp.id === safeApp.id)}	×
127	/>
128	))}
129
130	<StyledLink to={allAppsUrl}>
131	<StyledAppCard>
132	<StyledExploreBlock>
133	<Button size="md" color="primary" variant="contained">
134	Explore Safe Apps
135	</Button>
136	</StyledExploreBlock>
137	</StyledAppCard>
138	</StyledLink>
139	</StyledGrid>
140	</WidgetBody>
141	</WidgetContainer>
142	)
143	}
144
145	export default SafeApps

safe-global / safe-react / 3088967926

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous