├── .gitignore
├── public
    ├── _redirects
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── space_kitty_pattern.png
    ├── manifest.json
    └── index.html
├── src
    ├── assets
    │   ├── cat_logo.png
    │   ├── cat_logo@2x.png
    │   ├── space_cat_logo.png
    │   ├── space_cat_logo@2x.png
    │   └── space_kitty_pattern.svg
    ├── components
    │   ├── index.js
    │   ├── content-section.js
    │   ├── __tests__
    │   │   ├── query-result.js
    │   │   ├── track-detail.js
    │   │   ├── module-detail.js
    │   │   └── modules-navigation.js
    │   ├── md-content.js
    │   ├── footer.js
    │   ├── query-result.js
    │   ├── layout.js
    │   ├── module-detail.js
    │   ├── header.js
    │   ├── modules-navigation.js
    │   └── track-detail.js
    ├── pages
    │   ├── index.js
    │   ├── tracks.js
    │   ├── track.js
    │   ├── module.js
    │   └── __tests__
    │   │   └── tracks.js
    ├── index.js
    ├── utils
    │   ├── helpers.js
    │   ├── useWindowDimensions.js
    │   └── test-utils.js
    ├── containers
    │   ├── __tests__
    │   │   └── track-card.js
    │   └── track-card.js
    └── styles.js
├── README.md
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | .env


--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | /*    /index.html   200
2 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NansD/odyssey-lift-off-part5-client/main/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NansD/odyssey-lift-off-part5-client/main/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NansD/odyssey-lift-off-part5-client/main/public/logo512.png


--------------------------------------------------------------------------------
/src/assets/cat_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NansD/odyssey-lift-off-part5-client/main/src/assets/cat_logo.png


--------------------------------------------------------------------------------
/src/assets/cat_logo@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NansD/odyssey-lift-off-part5-client/main/src/assets/cat_logo@2x.png


--------------------------------------------------------------------------------
/public/space_kitty_pattern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NansD/odyssey-lift-off-part5-client/main/public/space_kitty_pattern.png


--------------------------------------------------------------------------------
/src/assets/space_cat_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NansD/odyssey-lift-off-part5-client/main/src/assets/space_cat_logo.png


--------------------------------------------------------------------------------
/src/assets/space_cat_logo@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NansD/odyssey-lift-off-part5-client/main/src/assets/space_cat_logo@2x.png


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | export { default as Footer } from './footer';
2 | export { default as Header } from './header';
3 | export { default as Layout } from './layout';
4 | export { default as ModuleDetail } from './module-detail';
5 | export { default as QueryResult } from './query-result';
6 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Fragment } from 'react';
 2 | import { Router } from '@reach/router';
 3 | /** importing our pages */
 4 | import Tracks from './tracks';
 5 | import Track from './track';
 6 | import Module from './module';
 7 | 
 8 | export default function Pages() {
 9 |   return (
10 |     <Router primary={false} component={Fragment}>
11 |       <Tracks path="/" />
12 |       <Track path="/track/:trackId" />
13 |       <Module path="/track/:trackId/module/:moduleId" />
14 |     </Router>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import GlobalStyles from './styles';
 4 | import Pages from './pages';
 5 | import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';
 6 | 
 7 | const client = new ApolloClient({
 8 |   uri: 'http://localhost:4000',
 9 |   cache: new InMemoryCache(),
10 | });
11 | 
12 | ReactDOM.render(
13 |   <ApolloProvider client={client}>
14 |     <GlobalStyles />
15 |     <Pages />
16 |   </ApolloProvider>,
17 |   document.getElementById('root')
18 | );
19 | 


--------------------------------------------------------------------------------
/src/utils/helpers.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Format seconds to human readable text in a compact form:
 3 |  * s, m or H:m (not m:s or H:m:s)
 4 |  */
 5 | export const humanReadableTimeFromSeconds = (seconds) => {
 6 |   if (seconds < 60) {
 7 |     return `${seconds}s`;
 8 |   }
 9 |   const totalMinutes = Math.floor(seconds / 60);
10 |   let hours = Math.floor(totalMinutes / 60) || 0;
11 |   const minutestoDisplay = totalMinutes % 60;
12 |   let timeStr = ``;
13 |   if (hours > 0) {
14 |     timeStr += `${hours}h `;
15 |   }
16 |   timeStr += `${minutestoDisplay}m`;
17 | 
18 |   return timeStr;
19 | };
20 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/content-section.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from '@emotion/styled';
 3 | import { widths, colors } from '../styles';
 4 | 
 5 | /**
 6 |  * Content Section component renders content (mainly text/mdown based)
 7 |  * for track and module details
 8 |  */
 9 | const ContentSection = ({ children }) => {
10 |   return <ContentDiv>{children}</ContentDiv>;
11 | };
12 | 
13 | export default ContentSection;
14 | 
15 | /** ContentSection styled component */
16 | const ContentDiv = styled.div({
17 |   marginTop: 10,
18 |   display: 'flex',
19 |   flexDirection: 'column',
20 |   maxWidth: widths.textPageWidth,
21 |   width: '100%',
22 |   alignSelf: 'center',
23 |   backgroundColor: colors.background,
24 | });
25 | 


--------------------------------------------------------------------------------
/src/utils/useWindowDimensions.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | 
 3 | function getWindowDimensions() {
 4 |   const { innerWidth: width, innerHeight: height } = window;
 5 |   return {
 6 |     width,
 7 |     height,
 8 |   };
 9 | }
10 | 
11 | export default function useWindowDimensions() {
12 |   const [windowDimensions, setWindowDimensions] = useState(
13 |     getWindowDimensions()
14 |   );
15 | 
16 |   useEffect(() => {
17 |     function handleResize() {
18 |       setWindowDimensions(getWindowDimensions());
19 |     }
20 | 
21 |     window.addEventListener('resize', handleResize);
22 |     return () => window.removeEventListener('resize', handleResize);
23 |   }, []);
24 | 
25 |   return windowDimensions;
26 | }
27 | 


--------------------------------------------------------------------------------
/src/utils/test-utils.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from '@testing-library/react';
 3 | import '@testing-library/jest-dom/extend-expect';
 4 | import { MockedProvider } from '@apollo/client/testing';
 5 | 
 6 | const renderApollo = (
 7 |   node,
 8 |   { mocks, addTypename, defaultOptions, cache, resolvers, ...options }
 9 | ) => {
10 |   return render(
11 |     <MockedProvider
12 |       mocks={mocks}
13 |       addTypename={addTypename}
14 |       defaultOptions={defaultOptions}
15 |       cache={cache}
16 |       resolvers={resolvers}
17 |       removeTypename
18 |     >
19 |       {node}
20 |     </MockedProvider>,
21 |     options
22 |   );
23 | };
24 | 
25 | export * from '@testing-library/react';
26 | export { renderApollo };
27 | 


--------------------------------------------------------------------------------
/src/components/__tests__/query-result.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render, cleanup } from '../../utils/test-utils';
 3 | import QueryResult from '../query-result';
 4 | 
 5 | describe('Query Result', () => {
 6 |   // automatically unmount and cleanup DOM after the test is finished.
 7 |   afterEach(cleanup);
 8 | 
 9 |   it('renders loading state', async () => {
10 |     const { getByTestId } = render(<QueryResult loading={true} />);
11 |     getByTestId(/spinner/i);
12 |   });
13 | 
14 |   it('renders No Data message', async () => {
15 |     // passing no error and no data
16 |     const { getByText } = render(<QueryResult loading={false} />);
17 |     getByText(/nothing to show/i);
18 |   });
19 | 
20 |   it('renders Error', async () => {
21 |     const { getByText } = render(<QueryResult error={new Error('you lose')} />);
22 |     getByText(/you lose/i);
23 |   });
24 | });
25 | 


--------------------------------------------------------------------------------
/src/components/md-content.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from '@emotion/styled';
 3 | import { colors } from '../styles';
 4 | import ReactMarkdown from 'react-markdown';
 5 | 
 6 | /**
 7 |  * Markdown component is a simple style wrapper for markdown content used across our app
 8 |  */
 9 | const MarkDown = ({ content }) => {
10 |   return <StyledMarkdown children={content} />;
11 | };
12 | 
13 | export default MarkDown;
14 | 
15 | /** Markdown styled components */
16 | const StyledMarkdown = styled(ReactMarkdown)({
17 |   color: colors.grey.darker,
18 | 
19 |   h1: {
20 |     fontSize: '1.7em',
21 |   },
22 |   h2: {
23 |     fontSize: '1.4em',
24 |   },
25 |   h3: {
26 |     fontSize: '1.2em',
27 |   },
28 |   a: {
29 |     color: colors.pink.base,
30 |   },
31 |   pre: {
32 |     padding: 20,
33 |     borderRadius: 4,
34 |     border: `solid 1px ${colors.silver.dark}`,
35 |     backgroundColor: colors.silver.base,
36 |     code: {
37 |       fontSize: '0.9em',
38 |     },
39 |   },
40 | });
41 | 


--------------------------------------------------------------------------------
/src/components/footer.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from '@emotion/styled';
 3 | import { colors, ApolloIcon } from '../styles';
 4 | 
 5 | /**
 6 |  * Footer is useless component to make our app look a little closer to a real website!
 7 |  */
 8 | const Footer = ({ children }) => {
 9 |   return (
10 |     <FooterContainer>
11 |       2021 ©{' '}
12 |       <LogoContainer>
13 |         <ApolloIcon width="100px" height="40px" />
14 |       </LogoContainer>
15 |     </FooterContainer>
16 |   );
17 | };
18 | 
19 | export default Footer;
20 | 
21 | /** Footer styled components */
22 | const FooterContainer = styled.div({
23 |   display: 'flex',
24 |   flexDirection: 'row',
25 |   justifyContent: 'center',
26 |   alignItems: 'center',
27 |   color: colors.pink.base,
28 |   marginTop: 30,
29 |   height: 200,
30 |   padding: 20,
31 |   backgroundColor: 'white',
32 |   borderTop: `solid 1px ${colors.pink.light}`,
33 | });
34 | 
35 | const LogoContainer = styled.div({
36 |   height: 40,
37 |   marginLeft: 5,
38 |   svg: {
39 |     height: 40,
40 |   },
41 | });
42 | 


--------------------------------------------------------------------------------
/src/components/query-result.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from '@emotion/styled';
 3 | import { LoadingSpinner } from '@apollo/space-kit/Loaders/LoadingSpinner';
 4 | 
 5 | /**
 6 |  * Query Results conditionally renders Apollo useQuery hooks states:
 7 |  * loading, error or its children when data is ready
 8 |  */
 9 | const QueryResult = ({ loading, error, data, children }) => {
10 |   if (error) {
11 |     return <p>ERROR: {error.message}</p>;
12 |   }
13 |   if (loading) {
14 |     return (
15 |       <SpinnerContainer>
16 |         <LoadingSpinner data-testid="spinner" size="large" theme="grayscale" />
17 |       </SpinnerContainer>
18 |     );
19 |   }
20 |   if (!data) {
21 |     return <p>Nothing to show...</p>;
22 |   }
23 |   if (data) {
24 |     return children;
25 |   }
26 | };
27 | 
28 | export default QueryResult;
29 | 
30 | /** Query Result styled components */
31 | const SpinnerContainer = styled.div({
32 |   display: 'flex',
33 |   justifyContent: 'center',
34 |   alignItems: 'center',
35 |   width: '100%',
36 |   height: '100vh',
37 | });
38 | 


--------------------------------------------------------------------------------
/src/components/layout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Header, Footer } from '../components';
 3 | import styled from '@emotion/styled';
 4 | import { widths, unit } from '../styles';
 5 | 
 6 | /**
 7 |  * Layout renders the full page content:
 8 |  * with header, Page container and footer
 9 |  */
10 | const Layout = ({ fullWidth, children, grid }) => {
11 |   return (
12 |     <>
13 |       <Header />
14 |       <PageContainer fullWidth={fullWidth} grid={grid}>
15 |         {children}
16 |       </PageContainer>
17 |       <Footer />
18 |     </>
19 |   );
20 | };
21 | 
22 | export default Layout;
23 | 
24 | /** Layout styled components */
25 | const PageContainer = styled.div((props) => ({
26 |   display: 'flex',
27 |   justifyContent: props.grid ? 'center' : 'top',
28 |   flexDirection: props.grid ? 'row' : 'column',
29 |   flexWrap: 'wrap',
30 |   alignSelf: 'center',
31 |   flexGrow: 1,
32 |   maxWidth: props.fullWidth ? null : `${widths.regularPageWidth}px`,
33 |   width: '100%',
34 |   padding: props.fullWidth ? 0 : unit * 2,
35 |   paddingBottom: unit * 5,
36 | }));
37 | 


--------------------------------------------------------------------------------
/src/pages/tracks.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { useQuery, gql } from '@apollo/client';
 3 | import TrackCard from '../containers/track-card';
 4 | import { Layout, QueryResult } from '../components';
 5 | 
 6 | /** TRACKS gql query to retreive all tracks */
 7 | export const TRACKS = gql`
 8 |   query getTracks {
 9 |     tracksForHome {
10 |       id
11 |       title
12 |       thumbnail
13 |       length
14 |       modulesCount
15 |       author {
16 |         name
17 |         photo
18 |       }
19 |     }
20 |   }
21 | `;
22 | 
23 | /**
24 |  * Tracks Page is the Catstronauts home page.
25 |  * We display a grid of tracks fetched with useQuery with the TRACKS query
26 |  */
27 | const Tracks = () => {
28 |   const { loading, error, data } = useQuery(TRACKS);
29 | 
30 |   return (
31 |     <Layout grid>
32 |       <QueryResult error={error} loading={loading} data={data}>
33 |         {data?.tracksForHome?.map((track, index) => (
34 |           <TrackCard key={track.id} track={track} />
35 |         ))}
36 |       </QueryResult>
37 |     </Layout>
38 |   );
39 | };
40 | 
41 | export default Tracks;
42 | 


--------------------------------------------------------------------------------
/src/containers/__tests__/track-card.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { renderApollo, cleanup, waitForElement } from '../../utils/test-utils';
 3 | import TrackCard from '../track-card';
 4 | 
 5 | const mockTrackCardData = {
 6 |   id: 'c_0',
 7 |   title: 'Cat-stronomy, an introduction',
 8 |   thumbnail:
 9 |     'https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg',
10 |   length: 2377,
11 |   author: {
12 |     name: 'Henri, le Chat Noir',
13 |     photo:
14 |       'https://images.unsplash.com/photo-1442291928580-fb5d0856a8f1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
15 |   },
16 | };
17 | 
18 | describe('Track Card', () => {
19 |   // automatically unmount and cleanup DOM after the test is finished.
20 |   afterEach(cleanup);
21 | 
22 |   it('renders track Card', async () => {
23 |     const mocks = [];
24 |     const { getByText } = await renderApollo(
25 |       <TrackCard track={mockTrackCardData} />,
26 |       {
27 |         mocks,
28 |         resolvers: {},
29 |         addTypename: false,
30 |       }
31 |     );
32 |     await waitForElement(() => getByText(/cat-stronomy/i));
33 |   });
34 | });
35 | 


--------------------------------------------------------------------------------
/src/components/__tests__/track-detail.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render, cleanup } from '../../utils/test-utils';
 3 | import TrackDetail from '../track-detail';
 4 | 
 5 | const mockTrack = {
 6 |   track: {
 7 |     id: 'c_0',
 8 |     title: 'Cat-stronomy, an introduction',
 9 |     description: '# Pulchra vehi vidit misera sola armenta secabatur\n\n',
10 |     thumbnail:
11 |       'https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg',
12 |     length: 2377,
13 |     modulesCount: 10,
14 |     numberOfViews: 51,
15 |     author: {
16 |       name: 'Henri, le Chat Noir',
17 |       photo:
18 |         'https://images.unsplash.com/photo-1442291928580-fb5d0856a8f1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
19 |     },
20 |     modules: [
21 |       {
22 |         id: 'l_0',
23 |         title: 'Exploring Time and Space',
24 |         length: 258,
25 |       },
26 |     ],
27 |   },
28 | };
29 | 
30 | describe('Module Detail View', () => {
31 |   // automatically unmount and cleanup DOM after the test is finished.
32 |   afterEach(cleanup);
33 | 
34 |   it('renders without error', () => {
35 |     render(<TrackDetail {...mockTrack} />);
36 |   });
37 | });
38 | 


--------------------------------------------------------------------------------
/src/pages/track.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { useQuery, gql } from '@apollo/client';
 3 | import { Layout, QueryResult } from '../components';
 4 | import TrackDetail from '../components/track-detail';
 5 | 
 6 | /** GET_TRACK gql query to retrieve a specific track by its ID */
 7 | export const GET_TRACK = gql`
 8 |   query getTrack($trackId: ID!) {
 9 |     track(id: $trackId) {
10 |       id
11 |       title
12 |       author {
13 |         id
14 |         name
15 |         photo
16 |       }
17 |       thumbnail
18 |       length
19 |       modulesCount
20 |       numberOfViews
21 |       modules {
22 |         id
23 |         title
24 |         length
25 |       }
26 |       description
27 |     }
28 |   }
29 | `;
30 | 
31 | /**
32 |  * Track Page fetches a track's data from the gql query GET_TRACK
33 |  * and provides it to the TrackDetail component to display
34 |  */
35 | const Track = ({ trackId }) => {
36 |   const { loading, error, data } = useQuery(GET_TRACK, {
37 |     variables: { trackId },
38 |   });
39 | 
40 |   return (
41 |     <Layout>
42 |       <QueryResult error={error} loading={loading} data={data}>
43 |         <TrackDetail track={data?.track} />
44 |       </QueryResult>
45 |     </Layout>
46 |   );
47 | };
48 | 
49 | export default Track;
50 | 


--------------------------------------------------------------------------------
/src/pages/module.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { useQuery, gql } from '@apollo/client';
 3 | import { Layout, ModuleDetail, QueryResult } from '../components';
 4 | 
 5 | /**
 6 |  * GET_MODULE_AND_PARENT_TRACK gql query to retrieve a specific module and its parent track,
 7 |  * both needed for the ModuleDetail component
 8 |  */
 9 | export const GET_MODULE_AND_PARENT_TRACK = gql`
10 |   query getModuleAndParentTrack($moduleId: ID!, $trackId: ID!) {
11 |     module(id: $moduleId) {
12 |       id
13 |       title
14 |       content
15 |       videoUrl
16 |     }
17 |     track(id: $trackId) {
18 |       id
19 |       title
20 |       modules {
21 |         id
22 |         title
23 |         length
24 |       }
25 |     }
26 |   }
27 | `;
28 | 
29 | /**
30 |  * Module page fetches both parent track and module's data from the gql query GET_MODULE_AND_PARENT_TRACK
31 |  * and feeds them to the ModuleDetail component
32 |  */
33 | const Module = ({ moduleId, trackId }) => {
34 |   const { loading, error, data } = useQuery(GET_MODULE_AND_PARENT_TRACK, {
35 |     variables: { moduleId, trackId },
36 |   });
37 | 
38 |   return (
39 |     <Layout fullWidth>
40 |       <QueryResult error={error} loading={loading} data={data}>
41 |         <ModuleDetail track={data?.track} module={data?.module} />
42 |       </QueryResult>
43 |     </Layout>
44 |   );
45 | };
46 | 
47 | export default Module;
48 | 


--------------------------------------------------------------------------------
/src/components/__tests__/module-detail.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render, cleanup } from '../../utils/test-utils';
 3 | import ModuleDetail from '../module-detail';
 4 | 
 5 | const mockModule = {
 6 |   id: 'l_1',
 7 |   title: 'The Night Sky',
 8 |   content:
 9 |     '# Et tempus voces tigride remisso fer coimus\n\n## Montibus arbusta detrectas haud\n\n',
10 |   thumbnail: null,
11 |   videoUrl: 'https://youtu.be/dlKzlksOUtU',
12 |   topic: 'Cat-stronomy',
13 |   length: 164,
14 | };
15 | 
16 | const mockParentTrack = {
17 |   id: 'c_0',
18 |   title: 'Cat-stronomy, an introduction',
19 |   description: '# Pulchra vehi vidit misera sola armenta secabatur\n\n',
20 |   thumbnail:
21 |     'https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg',
22 |   trackLength: 2377,
23 |   modulesCount: 10,
24 |   numberOfViews: 51,
25 |   author: {
26 |     name: 'Henri, le Chat Noir',
27 |     photo:
28 |       'https://images.unsplash.com/photo-1442291928580-fb5d0856a8f1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
29 |   },
30 |   modules: [
31 |     {
32 |       id: 'l_0',
33 |       title: 'Exploring Time and Space',
34 |       length: 258,
35 |     },
36 |   ],
37 | };
38 | 
39 | describe('Module Detail View', () => {
40 |   // automatically unmount and cleanup DOM after the test is finished.
41 |   afterEach(cleanup);
42 | 
43 |   it('renders without error', () => {
44 |     render(<ModuleDetail module={mockModule} track={mockParentTrack} />);
45 |   });
46 | });
47 | 


--------------------------------------------------------------------------------
/src/components/__tests__/modules-navigation.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render, cleanup } from '../../utils/test-utils';
 3 | import ModuleNav from '../modules-navigation';
 4 | 
 5 | const mockModule = {
 6 |   id: 'l_1',
 7 |   title: 'The Night Sky',
 8 |   content:
 9 |     '# Et tempus voces tigride remisso fer coimus\n\n## Montibus arbusta detrectas haud\n\n',
10 |   thumbnail: null,
11 |   videoUrl: 'https://youtu.be/dlKzlksOUtU',
12 |   topic: 'Cat-stronomy',
13 |   length: 164,
14 | };
15 | 
16 | const mockParentTrack = {
17 |   id: 'c_0',
18 |   title: 'Cat-stronomy, an introduction',
19 |   description: '# Pulchra vehi vidit misera sola armenta secabatur\n\n',
20 |   thumbnail:
21 |     'https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg',
22 |   trackLength: 2377,
23 |   modulesCount: 10,
24 |   numberOfViews: 51,
25 |   author: {
26 |     name: 'Henri, le Chat Noir',
27 |     photo:
28 |       'https://images.unsplash.com/photo-1442291928580-fb5d0856a8f1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
29 |   },
30 |   modules: [
31 |     {
32 |       id: 'l_0',
33 |       title: 'Exploring Time and Space',
34 |       length: 258,
35 |     },
36 |   ],
37 | };
38 | 
39 | describe('Modules Navigation View', () => {
40 |   // automatically unmount and cleanup DOM after the test is finished.
41 |   afterEach(cleanup);
42 | 
43 |   it('renders without error', () => {
44 |     render(<ModuleNav module={mockModule} track={mockParentTrack} />);
45 |   });
46 | });
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Odyssey Lift-off V (Client): Road to production
 2 | 
 3 | Welcome to the companion app of Odyssey Lift-off V (client)! You can [find the course lessons and instructions on Odyssey](https://odyssey.apollographql.com/lift-off-part5), Apollo's learning platform.
 4 | 
 5 | You can [preview the completed demo app here](https://lift-off-client-demo.netlify.app/).
 6 | 
 7 | You can [find the server counterpart here](https://github.com/apollographql/odyssey-lift-off-part5-server).
 8 | 
 9 | ## How to use this repo
10 | 
11 | The course will walk you step by step on how to implement the features you see in the demo app. This codebase is the starting point of your journey!
12 | 
13 | This repo is the starting point of our React client application.
14 | 
15 | To get started:
16 | 
17 | 1. Run `npm install`.
18 | 1. Run `npm start`.
19 | 
20 | This will start the React application and open up `localhost:3000` in your web browser.
21 | 
22 | > Note that the client will show an `ERROR: Failed to fetch` message unless you have the [counterpart GraphQL server](https://github.com/apollographql/odyssey-lift-off-part5-server) running locally on `localhost:4000`.
23 | 
24 | To check the **final** stage of the client, with all of the steps and code completed, checkout the `final` branch by running the following command in your terminal:
25 | 
26 | ```bash
27 | git checkout final
28 | ```
29 | 
30 | ## Getting Help
31 | 
32 | For any issues or problems concerning the course content, please refer to the [Odyssey topic in our community forums](https://community.apollographql.com/tags/c/help/6/odyssey).
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "catstronauts-client-complete",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "description": "front-end demo app for Apollo's lift-off IV course",
 6 |   "dependencies": {
 7 |     "@apollo/client": "^3.3.6",
 8 |     "@apollo/space-kit": "^9.3.1",
 9 |     "@emotion/cache": "^11.4.0",
10 |     "@emotion/core": "^10.1.1",
11 |     "@emotion/react": "^11.4.0",
12 |     "@emotion/styled": "^11.3.0",
13 |     "@reach/router": "^1.3.4",
14 |     "framer-motion": "^4.1.17",
15 |     "graphql": "^15.3.0",
16 |     "react": "^16.13.1",
17 |     "react-dom": "^16.13.1",
18 |     "react-emotion": "^10.0.0",
19 |     "react-markdown": "^6.0.2",
20 |     "react-player": "^2.6.0",
21 |     "react-scripts": "^4.0.3"
22 |   },
23 |   "scripts": {
24 |     "start": "react-scripts start",
25 |     "build": "react-scripts build",
26 |     "test": "react-scripts test",
27 |     "eject": "react-scripts eject"
28 |   },
29 |   "eslintConfig": {
30 |     "extends": "react-app"
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   },
44 |   "devDependencies": {
45 |     "@testing-library/jest-dom": "^4.2.4",
46 |     "@testing-library/react": "^9.3.2",
47 |     "@testing-library/user-event": "^7.1.2",
48 |     "apollo": "^2.30.2"
49 |   },
50 |   "main": "src/index.js",
51 |   "author": "Raphael Terrier @R4ph-t",
52 |   "license": "MIT"
53 | }
54 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta name="description" content="Apollo Lift-Off Demo App" />
 9 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
10 |     <!--
11 |       manifest.json provides metadata used when your web app is installed on a
12 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
13 |     -->
14 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15 |     <!--
16 |       Notice the use of %PUBLIC_URL% in the tags above.
17 |       It will be replaced with the URL of the `public` folder during the build.
18 |       Only files inside the `public` folder can be referenced from the HTML.
19 | 
20 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
21 |       work correctly both with client-side routing and a non-root public URL.
22 |       Learn how to configure a non-root public URL by running `npm run build`.
23 |     -->
24 |     <title>Catstronauts</title>
25 |   </head>
26 |   <body>
27 |     <noscript>You need to enable JavaScript to run this app.</noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/src/components/module-detail.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from '@emotion/styled';
 3 | import { colors, widths } from '../styles';
 4 | import useWindowDimensions from '../utils/useWindowDimensions';
 5 | import ContentSection from './content-section';
 6 | import ReactPlayer from 'react-player/youtube';
 7 | import ModulesNav from './modules-navigation';
 8 | import MarkDown from './md-content';
 9 | 
10 | /**
11 |  * Module Detail renders content of a given module:
12 |  * Video player, modules navigation and markdown content
13 |  */
14 | const ModuleDetail = ({ track, module }) => {
15 |   const { videoUrl, title, content } = module;
16 |   const { width } = useWindowDimensions();
17 | 
18 |   return (
19 |     <>
20 |       <TopSection>
21 |         <TopContainer totalWidth={width}>
22 |           <PlayerContainer>
23 |             <ReactPlayer url={videoUrl} width="100%" height="100%" />
24 |           </PlayerContainer>
25 |           <ModulesNav track={track} module={module}></ModulesNav>
26 |         </TopContainer>
27 |       </TopSection>
28 |       <ContentSection>
29 |         <ModuleTitle>{title}</ModuleTitle>
30 |         <MarkDown content={content} />
31 |       </ContentSection>
32 |     </>
33 |   );
34 | };
35 | 
36 | export default ModuleDetail;
37 | 
38 | /** Module Detail styled components */
39 | const TopSection = styled.div({
40 |   display: 'flex',
41 |   justifyContent: 'center',
42 |   backgroundColor: colors.black.base,
43 |   padding: 20,
44 |   borderBottom: `solid 1px ${colors.pink.base}`,
45 | });
46 | 
47 | const TopContainer = styled.div(({ totalWidth }) => ({
48 |   display: 'flex',
49 |   flexDirection: 'row',
50 |   alignSelf: 'center',
51 |   width: '100%',
52 |   maxWidth: widths.largePageWidth,
53 |   // 60 below removes 3 * 20 horizontal paddings (sides and inner between player and list)
54 |   height: ((totalWidth - 60) * (2 / 3)) / (16 / 9),
55 |   maxHeight: (widths.largePageWidth * (2 / 3)) / (16 / 9),
56 | }));
57 | 
58 | const PlayerContainer = styled.div({
59 |   width: '66%',
60 | });
61 | 
62 | const ModuleTitle = styled.h1({
63 |   marginTop: 10,
64 |   marginBottom: 30,
65 |   paddingBottom: 10,
66 |   color: colors.black.lighter,
67 |   borderBottom: `solid 1px ${colors.pink.base}`,
68 | });
69 | 


--------------------------------------------------------------------------------
/src/components/header.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { colors, widths } from '../styles';
 3 | import styled from '@emotion/styled';
 4 | import { Link } from '@reach/router';
 5 | import logo from '../assets/space_cat_logo.png';
 6 | 
 7 | /**
 8 |  * Header renders the top navigation
 9 |  * for this particular tutorial level, it only holds the home button
10 |  */
11 | const Header = ({ children }) => {
12 |   return (
13 |     <HeaderBar>
14 |       <Container>
15 |         <HomeButtonContainer>
16 |           <HomeLink to="/">
17 |             <HomeButton>
18 |               <LogoContainer>
19 |                 <Logo src={logo} />
20 |               </LogoContainer>
21 |               <Title>
22 |                 <h3>Catstronaut</h3>
23 |                 <div>Kitty space academy</div>
24 |               </Title>
25 |             </HomeButton>
26 |           </HomeLink>
27 |         </HomeButtonContainer>
28 |         {children}
29 |       </Container>
30 |     </HeaderBar>
31 |   );
32 | };
33 | 
34 | export default Header;
35 | 
36 | /** Header styled components */
37 | const HeaderBar = styled.div({
38 |   display: 'flex',
39 |   flexDirection: 'row',
40 |   alignItems: 'center',
41 |   justifyContent: 'center',
42 |   borderBottom: `solid 1px ${colors.pink.light}`,
43 |   boxShadow: '0px 1px 5px 0px rgba(0,0,0,0.15)',
44 |   padding: '5px 30px',
45 |   minHeight: 80,
46 |   backgroundColor: 'white',
47 | });
48 | 
49 | const Container = styled.div({
50 |   width: `${widths.regularPageWidth}px`,
51 | });
52 | 
53 | const HomeLink = styled(Link)({
54 |   textDecoration: 'none',
55 | });
56 | 
57 | const HomeButtonContainer = styled.div({
58 |   display: 'flex',
59 |   flex: 1,
60 | });
61 | 
62 | const HomeButton = styled.div({
63 |   display: 'flex',
64 |   flexDirection: 'row',
65 |   color: colors.accent,
66 |   alignItems: 'center',
67 |   ':hover': {
68 |     color: colors.pink.dark,
69 |   },
70 | });
71 | 
72 | const LogoContainer = styled.div({ display: 'flex', alignSelf: 'center' });
73 | 
74 | const Logo = styled.img({
75 |   height: 60,
76 |   width: 60,
77 |   marginRight: 8,
78 | });
79 | 
80 | const Title = styled.div({
81 |   display: 'flex',
82 |   flexDirection: 'column',
83 |   h3: {
84 |     lineHeight: '1em',
85 |     marginBottom: 0,
86 |   },
87 |   div: {
88 |     fontSize: '0.9em',
89 |     lineHeight: '0.8em',
90 |     paddingLeft: 2,
91 |   },
92 | });
93 | 


--------------------------------------------------------------------------------
/src/styles.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import '@apollo/space-kit/reset.css';
 3 | import { colors as SKColors } from '@apollo/space-kit/colors';
 4 | import { Global } from '@emotion/core';
 5 | 
 6 | const breakpoints = [480, 768, 992, 1200];
 7 | export const mq = breakpoints.map((bp) => `@media (min-width: ${bp}px)`);
 8 | 
 9 | export const unit = 8;
10 | export const widths = {
11 |   largePageWidth: 1600,
12 |   regularPageWidth: 1100,
13 |   textPageWidth: 800,
14 | };
15 | export const colors = {
16 |   primary: SKColors.indigo.base,
17 |   secondary: SKColors.teal.base,
18 |   accent: SKColors.pink.base,
19 |   background: SKColors.silver.light,
20 |   grey: SKColors.silver.dark,
21 |   text: SKColors.black.base,
22 |   textSecondary: SKColors.grey.dark,
23 |   ...SKColors,
24 | };
25 | 
26 | const GlobalStyles = () => (
27 |   <Global
28 |     styles={{
29 |       [['html', 'body']]: {
30 |         height: '100%',
31 |       },
32 |       body: {
33 |         margin: 0,
34 |         padding: 0,
35 |         fontFamily: "'Source Sans Pro', sans-serif",
36 |         backgroundColor: colors.background,
37 |         color: colors.text,
38 |       },
39 |       '#root': {
40 |         display: 'flex',
41 |         flexDirection: 'column',
42 |         minHeight: '100%',
43 |         backgroundImage: 'url("/space_kitty_pattern.png")',
44 |       },
45 |       '*': {
46 |         boxSizing: 'border-box',
47 |       },
48 |       [['h1', 'h2', 'h3', 'h4', 'h5', 'h6']]: {
49 |         margin: 0,
50 |         fontWeight: 600,
51 |       },
52 |       h1: {
53 |         fontSize: 40,
54 |         lineHeight: 1,
55 |       },
56 |       h2: {
57 |         fontSize: 36,
58 |       },
59 |       h3: {
60 |         fontSize: 30,
61 |       },
62 |       h5: {
63 |         fontSize: 16,
64 |         textTransform: 'uppercase',
65 |         letterSpacing: 4,
66 |       },
67 |     }}
68 |   />
69 | );
70 | 
71 | export default GlobalStyles;
72 | 
73 | export { IconRun } from '@apollo/space-kit/icons/IconRun';
74 | export { IconView } from '@apollo/space-kit/icons/IconView';
75 | export { IconTime } from '@apollo/space-kit/icons/IconTime';
76 | export { IconBook } from '@apollo/space-kit/icons/IconBook';
77 | export { IconYoutube } from '@apollo/space-kit/icons/IconYoutube';
78 | export { IconArrowRight } from '@apollo/space-kit/icons/IconArrowRight';
79 | export { IconDoubleArrowRight } from '@apollo/space-kit/icons/IconDoubleArrowRight';
80 | export { ApolloIcon } from '@apollo/space-kit/icons/ApolloIcon';
81 | export { Button } from '@apollo/space-kit/Button';
82 | 


--------------------------------------------------------------------------------
/src/pages/__tests__/tracks.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | // this adds custom jest matchers from jest-dom
 3 | import '@testing-library/jest-dom/extend-expect';
 4 | import { InMemoryCache } from '@apollo/client';
 5 | import { renderApollo, cleanup, waitForElement } from '../../utils/test-utils';
 6 | import Tracks, { TRACKS } from '../tracks';
 7 | 
 8 | const mockTrack = {
 9 |   id: 'c_0',
10 |   title: 'Nap, the hard way',
11 |   thumbnail:
12 |     'https://images.unsplash.com/photo-1542403810-74c578300013?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
13 |   length: 1420,
14 |   modulesCount: 6,
15 |   author: {
16 |     name: 'Cheshire Cat',
17 |     photo:
18 |       'https://images.unsplash.com/photo-1593627010886-d34828365da7?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
19 |   },
20 | };
21 | 
22 | describe('Tracks Page', () => {
23 |   afterEach(cleanup);
24 |   const cache = new InMemoryCache({ addTypename: false });
25 | 
26 |   it('renders tracks', async () => {
27 |     const mocks = [
28 |       {
29 |         request: { query: TRACKS },
30 |         result: {
31 |           data: {
32 |             tracksForHome: [mockTrack],
33 |           },
34 |         },
35 |       },
36 |     ];
37 | 
38 |     const { getByText } = await renderApollo(<Tracks />, {
39 |       mocks,
40 |       cache,
41 |     });
42 | 
43 |     await waitForElement(() => getByText(/nap, the hard way/i));
44 |   });
45 | });
46 | 
47 | /*
48 | import React from 'react';
49 | import { renderApollo, cleanup, waitForElement } from '../../test-utils';
50 | import { InMemoryCache } from '@apollo/client';
51 | 
52 | import Tracks, { TRACKS } from '../tracks';
53 | const mockTrack = {
54 |   id: 'c_0',
55 |   title: 'Nap, the hard way',
56 |   thumbnail:
57 |     'https://images.unsplash.com/photo-1542403810-74c578300013?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0',
58 |   trackLength: 1420,
59 |   author: {
60 |     name: 'Cheshire Cat',
61 |   },
62 | };
63 | 
64 | describe('Tracks Page', () => {
65 |   // automatically unmount and cleanup DOM after the test is finished.
66 |   afterEach(cleanup);
67 | 
68 |   it('renders tracks', async () => {
69 |     const cache = new InMemoryCache({ addTypename: false });
70 |     const mocks = [
71 |       {
72 |         request: { query: TRACKS },
73 |         result: {
74 |           data: {
75 |             tracks: [mockTrack],
76 |           },
77 |         },
78 |       },
79 |     ];
80 |     const { getByText } = await renderApollo(<Tracks />, {
81 |       mocks,
82 |       cache,
83 |     });
84 |     await waitForElement(() => getByText(/nap, the hard way/i));
85 |   });
86 | });*/
87 | 


--------------------------------------------------------------------------------
/src/components/modules-navigation.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import styled from '@emotion/styled';
  3 | import { Link } from '@reach/router';
  4 | import { colors, IconArrowRight, IconDoubleArrowRight } from '../styles';
  5 | import { humanReadableTimeFromSeconds } from '../utils/helpers';
  6 | 
  7 | /**
  8 |  * Module Navigation: displays a list of modules titles
  9 |  * from a track and navigates to the modules page
 10 |  */
 11 | const ModulesNav = ({ module, track }) => {
 12 |   return (
 13 |     <ModulesNavContainer>
 14 |       <ModuleTitle>
 15 |         <h4>
 16 |           <Link to="../..">{track.title}</Link>
 17 |         </h4>
 18 |       </ModuleTitle>
 19 |       <ModulesList>
 20 |         {track.modules.map((navModule) => (
 21 |           <ModuleListItem key={`module_${navModule.id}`}>
 22 |             <div>
 23 |               <ModuleNavStyledLink to={`../${navModule.id}`}>
 24 |                 <ModuleListItemContent isActive={navModule.id === module.id}>
 25 |                   {navModule.id === module.id ? (
 26 |                     <IconDoubleArrowRight width="14px" />
 27 |                   ) : (
 28 |                     <IconArrowRight width="14px" weight="thin" />
 29 |                   )}
 30 |                   <div>{navModule.title}</div>
 31 |                   <div>{humanReadableTimeFromSeconds(navModule.length)}</div>
 32 |                 </ModuleListItemContent>
 33 |               </ModuleNavStyledLink>
 34 |             </div>
 35 |           </ModuleListItem>
 36 |         ))}
 37 |       </ModulesList>
 38 |     </ModulesNavContainer>
 39 |   );
 40 | };
 41 | 
 42 | export default ModulesNav;
 43 | 
 44 | /** Module Navigation styled components */
 45 | const ModulesNavContainer = styled.div({
 46 |   width: '33%',
 47 |   position: 'relative',
 48 |   marginLeft: 20,
 49 |   backgroundColor: colors.black.light,
 50 |   borderRadius: 4,
 51 |   border: `solid 1px ${colors.black.lighter}`,
 52 |   overflow: 'auto',
 53 | });
 54 | 
 55 | const trackTitleHeight = 70;
 56 | 
 57 | const ModuleTitle = styled.div({
 58 |   display: 'flex',
 59 |   position: 'sticky',
 60 |   fontSize: '1.6em',
 61 |   fontWeight: '400',
 62 |   height: trackTitleHeight,
 63 |   alignItems: 'center',
 64 |   justifyContent: 'center',
 65 |   textAlign: 'center',
 66 |   backgroundColor: 'colors.pink.base',
 67 |   borderBottom: `solid 1px ${colors.pink.base}`,
 68 | 
 69 |   a: {
 70 |     textDecoration: 'none',
 71 |     color: colors.silver.base,
 72 |   },
 73 |   ':hover': {
 74 |     backgroundColor: colors.black.base,
 75 |   },
 76 | });
 77 | 
 78 | const ModulesList = styled.ul({
 79 |   listStyle: 'none',
 80 |   margin: 0,
 81 |   padding: 0,
 82 |   overflowY: 'scroll',
 83 |   height: `calc(100% - ${trackTitleHeight}px)`,
 84 | });
 85 | 
 86 | const ModuleListItem = styled.li((props) => ({
 87 |   borderBottom: `solid 1px ${colors.grey.darker}`,
 88 |   ':last-child': {
 89 |     borderBottom: 'none',
 90 |   },
 91 | }));
 92 | 
 93 | const ModuleNavStyledLink = styled(Link)({
 94 |   textDecoration: 'none',
 95 |   display: 'flex',
 96 |   alignItems: 'center',
 97 | });
 98 | 
 99 | const ModuleListItemContent = styled.div((props) => ({
100 |   backgroundColor: props.isActive ? colors.black.base : colors.black.light,
101 |   color: props.isActive ? colors.silver.lighter : colors.silver.darker,
102 |   minHeight: 80,
103 |   padding: '10px 20px',
104 |   display: 'flex',
105 |   alignItems: 'center',
106 |   justifyContent: 'space-between',
107 |   fontSize: '1.1em',
108 |   flex: 1,
109 |   ':hover': {
110 |     backgroundColor: props.isActive ? colors.black.dark : colors.black.base,
111 |     color: 'white',
112 |   },
113 | }));
114 | 


--------------------------------------------------------------------------------
/src/containers/track-card.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import styled from '@emotion/styled';
  3 | import { colors, mq } from '../styles';
  4 | import { humanReadableTimeFromSeconds } from '../utils/helpers';
  5 | import { Link } from '@reach/router';
  6 | import { gql, useMutation } from '@apollo/client';
  7 | 
  8 | /**
  9 |  * Mutation to increment a track's number of views
 10 |  * (exported for tests)
 11 |  */
 12 | export const INCREMENT_TRACK_VIEWS = gql`
 13 |   mutation IncrementTrackViewsMutation($incrementTrackViewsId: ID!) {
 14 |     incrementTrackViews(id: $incrementTrackViewsId) {
 15 |       code
 16 |       success
 17 |       message
 18 |       track {
 19 |         id
 20 |         numberOfViews
 21 |       }
 22 |     }
 23 |   }
 24 | `;
 25 | 
 26 | /**
 27 |  * Track Card component renders basic info in a card format
 28 |  * for each track populating the tracks grid homepage.
 29 |  */
 30 | const TrackCard = ({ track }) => {
 31 |   const { title, thumbnail, author, length, modulesCount, id } = track;
 32 | 
 33 |   const [incrementTrackViews] = useMutation(INCREMENT_TRACK_VIEWS, {
 34 |     variables: { incrementTrackViewsId: id },
 35 |     // to observe what the mutation response returns
 36 |     onCompleted: (data) => {
 37 |       console.log(data);
 38 |     },
 39 |   });
 40 | 
 41 |   return (
 42 |     <CardContainer to={`/track/${id}`} onClick={incrementTrackViews}>
 43 |       <CardContent>
 44 |         <CardImageContainer>
 45 |           <CardImage src={thumbnail} alt={title} />
 46 |         </CardImageContainer>
 47 |         <CardBody>
 48 |           <CardTitle>{title || ''}</CardTitle>
 49 |           <CardFooter>
 50 |             <AuthorImage src={author.photo} />
 51 |             <AuthorAndTrack>
 52 |               <AuthorName>{author.name}</AuthorName>
 53 |               <TrackLength>
 54 |                 {modulesCount} modules - {humanReadableTimeFromSeconds(length)}
 55 |               </TrackLength>
 56 |             </AuthorAndTrack>
 57 |           </CardFooter>
 58 |         </CardBody>
 59 |       </CardContent>
 60 |     </CardContainer>
 61 |   );
 62 | };
 63 | 
 64 | export default TrackCard;
 65 | 
 66 | /** Track Card styled components */
 67 | const CardContainer = styled(Link)({
 68 |   borderRadius: 6,
 69 |   color: colors.text,
 70 |   backgroundSize: 'cover',
 71 |   backgroundColor: 'white',
 72 |   boxShadow: '0px 1px 5px 0px rgba(0,0,0,0.15)',
 73 |   backgroundPosition: 'center',
 74 |   display: 'flex',
 75 |   flexDirection: 'column',
 76 |   justifyContent: 'space-between',
 77 |   [mq[0]]: {
 78 |     width: '90%',
 79 |   },
 80 |   [mq[1]]: {
 81 |     width: '47%',
 82 |   },
 83 |   [mq[2]]: {
 84 |     width: '31%',
 85 |   },
 86 |   height: 380,
 87 |   margin: 10,
 88 |   overflow: 'hidden',
 89 |   position: 'relative',
 90 |   ':hover': {
 91 |     backgroundColor: colors.pink.lightest,
 92 |   },
 93 |   cursor: 'pointer',
 94 |   textDecoration: 'none',
 95 | });
 96 | 
 97 | const CardContent = styled.div({
 98 |   display: 'flex',
 99 |   flexDirection: 'column',
100 |   justifyContent: 'space-around',
101 |   height: '100%',
102 | });
103 | 
104 | const CardTitle = styled.h3({
105 |   textAlign: 'center',
106 |   fontSize: '1.4em',
107 |   lineHeight: '1em',
108 |   fontWeight: 700,
109 |   color: colors.text,
110 |   flex: 1,
111 | });
112 | 
113 | const CardImageContainer = styled.div({
114 |   height: 220,
115 |   position: 'relative',
116 |   '::after': {
117 |     content: '""',
118 |     position: 'absolute',
119 |     top: 0,
120 |     bottom: 0,
121 |     left: 0,
122 |     right: 0,
123 |     background: 'rgba(250,0,150,0.20)',
124 |   },
125 | });
126 | 
127 | const CardImage = styled.img({
128 |   objectFit: 'cover',
129 |   width: '100%',
130 |   height: '100%',
131 |   filter: 'grayscale(60%)',
132 | });
133 | 
134 | const CardBody = styled.div({
135 |   padding: 18,
136 |   flex: 1,
137 |   display: 'flex',
138 |   color: colors.textSecondary,
139 |   flexDirection: 'column',
140 |   justifyContent: 'space-around',
141 | });
142 | 
143 | const CardFooter = styled.div({
144 |   display: 'flex',
145 |   flexDirection: 'Row',
146 | });
147 | 
148 | const AuthorImage = styled.img({
149 |   height: 30,
150 |   width: 30,
151 |   marginRight: 8,
152 |   borderRadius: '50%',
153 |   objectFit: 'cover',
154 | });
155 | 
156 | const AuthorAndTrack = styled.div({
157 |   display: 'flex',
158 |   flexDirection: 'column',
159 |   justifyContent: 'space-between',
160 | });
161 | 
162 | const AuthorName = styled.div({
163 |   lineHeight: '1em',
164 |   fontSize: '1.1em',
165 | });
166 | 
167 | const TrackLength = styled.div({
168 |   fontSize: '0.8em',
169 | });
170 | 


--------------------------------------------------------------------------------
/src/components/track-detail.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import styled from '@emotion/styled';
  3 | import {
  4 |   colors,
  5 |   Button,
  6 |   IconRun,
  7 |   IconView,
  8 |   IconTime,
  9 |   IconBook,
 10 | } from '../styles';
 11 | import { humanReadableTimeFromSeconds } from '../utils/helpers';
 12 | import { Link } from '@reach/router';
 13 | import ContentSection from './content-section';
 14 | import MarkDown from './md-content';
 15 | 
 16 | /**
 17 |  * Track Detail component renders the main content of a given track:
 18 |  * author, length, number of views, modules list, among other things.
 19 |  * It provides access to the first module of the track.
 20 |  */
 21 | const TrackDetail = ({ track }) => {
 22 |   const {
 23 |     title,
 24 |     description,
 25 |     thumbnail,
 26 |     author,
 27 |     length,
 28 |     modulesCount,
 29 |     modules,
 30 |     numberOfViews,
 31 |   } = track;
 32 | 
 33 |   return (
 34 |     <ContentSection>
 35 |       <CoverImage src={thumbnail} alt="" />
 36 |       <TrackDetails>
 37 |         <DetailRow>
 38 |           <h1>{title}</h1>
 39 |         </DetailRow>
 40 |         <DetailRow>
 41 |           <DetailItem>
 42 |             <h4>Track details</h4>
 43 |             <IconAndLabel>
 44 |               <IconView width="16px" />
 45 |               <div id="viewCount">{numberOfViews} view(s)</div>
 46 |             </IconAndLabel>
 47 |             <IconAndLabel>
 48 |               <IconBook width="14px" height="14px" />
 49 |               <div>{modulesCount} modules</div>
 50 |             </IconAndLabel>
 51 |             <IconAndLabel>
 52 |               <IconTime width="14px" />
 53 |               <div>{humanReadableTimeFromSeconds(length)}</div>
 54 |             </IconAndLabel>
 55 |           </DetailItem>
 56 |           <DetailItem>
 57 |             <h4>Author</h4>
 58 |             <AuthorImage src={author.photo} />
 59 |             <AuthorName>{author.name}</AuthorName>
 60 |           </DetailItem>
 61 |           <div>
 62 |             <StyledLink to={`./module/${modules[0]['id']}`}>
 63 |               <Button
 64 |                 icon={<IconRun width="20px" />}
 65 |                 color={colors.pink.base}
 66 |                 size="large"
 67 |               >
 68 |                 Start Track
 69 |               </Button>
 70 |             </StyledLink>
 71 |           </div>
 72 |         </DetailRow>
 73 |         <ModuleListContainer>
 74 |           <DetailItem>
 75 |             <h4>Modules</h4>
 76 |             <ul>
 77 |               {modules.map((module) => (
 78 |                 <li key={module.title}>
 79 |                   <div>{module.title}</div>
 80 |                   <ModuleLength>
 81 |                     {humanReadableTimeFromSeconds(module.length)}
 82 |                   </ModuleLength>
 83 |                 </li>
 84 |               ))}
 85 |             </ul>
 86 |           </DetailItem>
 87 |         </ModuleListContainer>
 88 |       </TrackDetails>
 89 |       <MarkDown content={description} />
 90 |     </ContentSection>
 91 |   );
 92 | };
 93 | 
 94 | export default TrackDetail;
 95 | 
 96 | /** Track detail styled components */
 97 | const CoverImage = styled.img({
 98 |   objectFit: 'cover',
 99 |   maxHeight: 400,
100 |   borderRadius: 4,
101 |   marginBottom: 30,
102 | });
103 | 
104 | const StyledLink = styled(Link)({
105 |   textDecoration: 'none',
106 |   color: 'white',
107 | });
108 | 
109 | const TrackDetails = styled.div({
110 |   display: 'flex',
111 |   flexDirection: 'column',
112 |   alignItems: 'center',
113 |   padding: 20,
114 |   borderRadius: 4,
115 |   marginBottom: 30,
116 |   border: `solid 1px ${colors.silver.dark}`,
117 |   backgroundColor: colors.silver.lighter,
118 |   h1: {
119 |     width: '100%',
120 |     textAlign: 'center',
121 |     marginBottom: 5,
122 |   },
123 |   h4: {
124 |     fontSize: '1.2em',
125 |     marginBottom: 5,
126 |     color: colors.text,
127 |   },
128 | });
129 | 
130 | const DetailRow = styled.div({
131 |   display: 'flex',
132 |   flexDirection: 'row',
133 |   justifyContent: 'space-between',
134 |   alignItems: 'center',
135 |   width: '100%',
136 |   paddingBottom: 20,
137 |   marginBottom: 20,
138 |   borderBottom: `solid 1px ${colors.silver.dark}`,
139 | });
140 | 
141 | const DetailItem = styled.div({
142 |   display: 'flex',
143 |   flexDirection: 'column',
144 |   alignItems: 'center',
145 |   justifyContent: 'space-between',
146 |   color: colors.textSecondary,
147 |   alignSelf: 'center',
148 | });
149 | 
150 | const AuthorImage = styled.img({
151 |   height: 30,
152 |   width: 30,
153 |   marginBottom: 8,
154 |   borderRadius: '50%',
155 |   objectFit: 'cover',
156 | });
157 | 
158 | const AuthorName = styled.div({
159 |   lineHeight: '1em',
160 |   fontSize: '1em',
161 | });
162 | 
163 | const IconAndLabel = styled.div({
164 |   display: 'flex',
165 |   flex: 'row',
166 |   alignItems: 'center',
167 |   maxHeight: 20,
168 |   width: '100%',
169 |   div: {
170 |     marginLeft: 8,
171 |   },
172 |   svg: {
173 |     maxHeight: 16,
174 |   },
175 |   '#viewCount': {
176 |     color: colors.pink.base,
177 |   },
178 | });
179 | 
180 | const ModuleListContainer = styled.div({
181 |   width: '100%',
182 |   ul: {
183 |     listStyle: 'none',
184 |     padding: 0,
185 |     margin: 0,
186 |     marginTop: 5,
187 |     li: {
188 |       fontSize: '1em',
189 |       display: 'flex',
190 |       justifyContent: 'space-between',
191 |       paddingBottom: 2,
192 |     },
193 |   },
194 | });
195 | 
196 | const ModuleLength = styled.div({
197 |   marginLeft: 30,
198 |   color: colors.grey.light,
199 | });
200 | 


--------------------------------------------------------------------------------
/src/assets/space_kitty_pattern.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:fi="http://pattern.flaticon.com/" x="0" y="0" width="700" height="350" viewBox="0 0 700 350"><rect x="0px" y="0px" width="100%" height="100%" opacity="0" fill="#ffffff"/><defs><g transform="matrix(0.09496202146658489 0.017493003703064697 -0.017493003703064697 0.09496202146658489 215.84477146984858 71.1779132504656)" id="L1_0"><path d="m495.513 424.878a81.368 81.368 0 0 0 .487-8.878 80.091 80.091 0 0 0 -80-80h-8a24 24 0 0 1 0-48h32a28 28 0 0 0 0-56h-32a80.133 80.133 0 0 0 -76.585 56.9 225.667 225.667 0 0 0 -19.729-34.366 223.259 223.259 0 0 0 -106.452-82.184 8.03 8.03 0 0 1 -5.234-7.507v-140.843a8 8 0 0 0 -9.94-7.761l-7.46 1.861a53.8 53.8 0 0 0 -36.036 29.9h-61.128a53.8 53.8 0 0 0 -36.036-29.9l-7.46-1.861a8 8 0 0 0 -9.94 7.761v64h16v-53.665a37.883 37.883 0 0 1 24.41 24.2 8 8 0 0 0 7.59 5.465h72a8 8 0 0 0 7.59-5.47 37.886 37.886 0 0 1 24.41-24.196v130.509a24.091 24.091 0 0 0 15.7 22.521 208.309 208.309 0 0 1 136.3 195.467v97.169h-182.987a32.057 32.057 0 0 1 30.987-24h24a8 8 0 0 0 8-8v-40a72.081 72.081 0 0 1 72-72v-16a88.1 88.1 0 0 0 -88 88v32h-16a47.8 47.8 0 0 0 -32 12.261v-148.261h-16v176h-56v-6.111a20.832 20.832 0 0 1 11.578-18.734 8 8 0 0 0 4.422-7.155v-144h-16v139.446a36.709 36.709 0 0 0 -16 30.443v6.111h-32v-6.111a20.832 20.832 0 0 1 11.578-18.734 8 8 0 0 0 4.422-7.155v-344h-16v339.446a36.709 36.709 0 0 0 -16 30.443v14.111a8 8 0 0 0 8 8h392a80.139 80.139 0 0 0 75.446-53.334l-15.086-5.332a64.113 64.113 0 0 1 -60.36 42.666h-64v-24h64a40 40 0 0 0 0-80h-8a64 64 0 0 1 0-128h32a12 12 0 0 1 0 24h-32a40 40 0 0 0 0 80h8a64.072 64.072 0 0 1 64 64 65.03 65.03 0 0 1 -.392 7.122zm-87.513-32.878h8a24 24 0 0 1 0 48h-64v-57.169q0-7.132-.452-14.2a79.749 79.749 0 0 0 56.452 23.369z" fill="#cfcfcf"/><circle cx="80" cy="96" r="16" fill="#cfcfcf"/><circle cx="152" cy="96" r="16" fill="#cfcfcf"/><path d="m88 160h8a23.9 23.9 0 0 0 16-6.126 23.9 23.9 0 0 0 16 6.126h8a24.027 24.027 0 0 0 24-24h-16a8.009 8.009 0 0 1 -8 8h-8a8.009 8.009 0 0 1 -8-8c0-.232-.015-.46-.035-.687a11.992 11.992 0 0 0 -3.965-23.313h-8a11.992 11.992 0 0 0 -3.965 23.313c-.02.227-.035.455-.035.687a8.009 8.009 0 0 1 -8 8h-8a8.009 8.009 0 0 1 -8-8h-16a24.027 24.027 0 0 0 24 24z" fill="#cfcfcf"/></g><g transform="matrix(-0.024977943364550337 -0.08855815536434979 0.08855815536434979 -0.024977943364550337 218.67010590089325 165.9926586600161)" id="L1_5"><circle cx="10" cy="500" r="10" fill="#cfcfcf"/><circle cx="267" cy="245" r="10" fill="#cfcfcf"/><path d="M398.479,118.032c-8.071-8.072-18.802-12.516-30.216-12.516c-11.414,0-22.146,4.446-30.216,12.516    c-16.661,16.662-16.661,43.772,0,60.433c8.332,8.331,19.272,12.495,30.216,12.495c10.941,0,21.886-4.166,30.216-12.495    C415.14,161.803,415.14,134.693,398.479,118.032z M384.282,164.266c-8.833,8.832-23.206,8.832-32.037,0    c-8.833-8.832-8.833-23.204,0-32.037c4.279-4.279,9.967-6.635,16.018-6.635c6.051,0,11.739,2.356,16.018,6.635    C393.114,141.062,393.114,155.434,384.282,164.266z" fill="#cfcfcf"/><path d="M125.409,411.45c-4.964-2.472-10.99-0.451-13.462,4.512l-11.958,24.015c-5.2,10.441-15.658,17.423-27.296,18.219    l-13.908,0.952c-2.351,0.157-3.897-1.014-4.612-1.729s-1.889-2.264-1.729-4.613l0.952-13.907    c0.797-11.637,7.779-22.096,18.219-27.296l24.014-11.958c4.964-2.472,6.984-8.499,4.512-13.462    c-2.471-4.963-8.498-6.984-13.462-4.512l-24.014,11.958c-16.792,8.362-28.02,25.182-29.302,43.898l-0.952,13.907    c-0.514,7.507,2.242,14.863,7.562,20.183c4.898,4.898,11.523,7.624,18.403,7.624c0.591,0,1.186-0.02,1.78-0.061l13.908-0.952    c18.716-1.281,35.536-12.508,43.898-29.302l11.958-24.014C132.392,419.948,130.372,413.922,125.409,411.45z" fill="#cfcfcf"/><path d="M505.07,8.18c-4.711-4.641-11.201-7.068-17.793-6.639l-9.348,0.596c-83.819,5.351-162.262,45.81-215.215,111.004    L240.71,140.23l-57.583-1.691c-0.098-0.003-0.197-0.004-0.294-0.004c-45.668,0-88.603,17.784-120.896,50.076L2.959,247.59    c-2.805,2.805-3.696,7-2.272,10.702c1.424,3.703,4.894,6.221,8.856,6.423l124.844,6.414l-5.09,6.267    c-2.565,3.159-2.971,7.553-1.026,11.127c1.956,3.596,4.006,7.135,6.144,10.617l-29.606,35.147    c-2.531,3.005-3.076,7.211-1.397,10.763c6.467,13.665,15.05,25.943,25.514,36.493c10.718,10.808,23.251,19.646,37.249,26.271    c1.368,0.648,2.835,0.965,4.293,0.965c2.261,0,4.503-0.764,6.327-2.243c6.378-5.174,13.731-11.311,20.843-17.245    c5.069-4.23,10.255-8.557,15.102-12.547c2.893,1.741,5.822,3.429,8.795,5.046c1.504,0.818,3.153,1.221,4.796,1.221    c2.186,0,4.358-0.712,6.156-2.108l6.843-5.31l6.442,125.37c0.204,3.962,2.721,7.432,6.423,8.856c1.172,0.45,2.39,0.67,3.6,0.67    c2.615,0,5.183-1.023,7.101-2.942l58.979-58.979c32.293-32.293,50.076-75.227,50.076-120.896v-54.995l23.267-18.055    c69.729-54.11,112.196-135.704,116.512-223.862l0.239-4.886C512.295,19.27,509.779,12.822,505.07,8.18z M33.123,245.822    l43.012-43.012c28.465-28.465,66.303-44.157,106.553-44.196l42.085,1.236l-74.71,91.98L33.123,245.822z M184.774,373.874    c-5.241,4.372-10.614,8.856-15.6,12.957c-9.644-5.223-18.368-11.74-25.992-19.428c-7.384-7.445-13.669-15.922-18.737-25.26    l21.676-25.733c6.554,8.793,13.728,17.122,21.478,24.925c0.006,0.006,0.012,0.011,0.018,0.017    c0.002,0.002,0.004,0.005,0.006,0.007c0.003,0.003,0.006,0.005,0.009,0.008c8.593,8.648,17.836,16.584,27.641,23.761    C191.811,368.002,188.264,370.962,184.774,373.874z M351.875,327.672c0,40.305-15.695,78.197-44.196,106.698l-43.012,43.012    l-6.002-116.792l93.209-72.33V327.672z M491.678,29.779c-4.029,82.297-43.673,158.467-108.767,208.98l-157.46,122.189    c-13.058-7.63-25.229-16.639-36.368-26.846l53.086-53.086c3.92-3.92,3.92-10.278,0-14.199c-3.921-3.921-10.278-3.921-14.199,0    l-53.036,53.036c-9.751-10.795-18.387-22.541-25.74-35.104L278.3,125.8C327.732,64.941,400.96,27.171,479.207,22.177l9.348-0.596    c1.225-0.076,2.045,0.532,2.423,0.904c0.377,0.371,1,1.178,0.94,2.409L491.678,29.779z" fill="#cfcfcf"/></g><g transform="matrix(-0.08572983577887992 0.029393086643328827 0.029393086643328827 0.08572983577887992 42.98460330273765 243.5191723890403)"><path d="m495.513 424.878a81.368 81.368 0 0 0 .487-8.878 80.091 80.091 0 0 0 -80-80h-8a24 24 0 0 1 0-48h32a28 28 0 0 0 0-56h-32a80.133 80.133 0 0 0 -76.585 56.9 225.667 225.667 0 0 0 -19.729-34.366 223.259 223.259 0 0 0 -106.452-82.184 8.03 8.03 0 0 1 -5.234-7.507v-140.843a8 8 0 0 0 -9.94-7.761l-7.46 1.861a53.8 53.8 0 0 0 -36.036 29.9h-61.128a53.8 53.8 0 0 0 -36.036-29.9l-7.46-1.861a8 8 0 0 0 -9.94 7.761v64h16v-53.665a37.883 37.883 0 0 1 24.41 24.2 8 8 0 0 0 7.59 5.465h72a8 8 0 0 0 7.59-5.47 37.886 37.886 0 0 1 24.41-24.196v130.509a24.091 24.091 0 0 0 15.7 22.521 208.309 208.309 0 0 1 136.3 195.467v97.169h-182.987a32.057 32.057 0 0 1 30.987-24h24a8 8 0 0 0 8-8v-40a72.081 72.081 0 0 1 72-72v-16a88.1 88.1 0 0 0 -88 88v32h-16a47.8 47.8 0 0 0 -32 12.261v-148.261h-16v176h-56v-6.111a20.832 20.832 0 0 1 11.578-18.734 8 8 0 0 0 4.422-7.155v-144h-16v139.446a36.709 36.709 0 0 0 -16 30.443v6.111h-32v-6.111a20.832 20.832 0 0 1 11.578-18.734 8 8 0 0 0 4.422-7.155v-344h-16v339.446a36.709 36.709 0 0 0 -16 30.443v14.111a8 8 0 0 0 8 8h392a80.139 80.139 0 0 0 75.446-53.334l-15.086-5.332a64.113 64.113 0 0 1 -60.36 42.666h-64v-24h64a40 40 0 0 0 0-80h-8a64 64 0 0 1 0-128h32a12 12 0 0 1 0 24h-32a40 40 0 0 0 0 80h8a64.072 64.072 0 0 1 64 64 65.03 65.03 0 0 1 -.392 7.122zm-87.513-32.878h8a24 24 0 0 1 0 48h-64v-57.169q0-7.132-.452-14.2a79.749 79.749 0 0 0 56.452 23.369z" fill="#cfcfcf"/><circle cx="80" cy="96" r="16" fill="#cfcfcf"/><circle cx="152" cy="96" r="16" fill="#cfcfcf"/><path d="m88 160h8a23.9 23.9 0 0 0 16-6.126 23.9 23.9 0 0 0 16 6.126h8a24.027 24.027 0 0 0 24-24h-16a8.009 8.009 0 0 1 -8 8h-8a8.009 8.009 0 0 1 -8-8c0-.232-.015-.46-.035-.687a11.992 11.992 0 0 0 -3.965-23.313h-8a11.992 11.992 0 0 0 -3.965 23.313c-.02.227-.035.455-.035.687a8.009 8.009 0 0 1 -8 8h-8a8.009 8.009 0 0 1 -8-8h-16a24.027 24.027 0 0 0 24 24z" fill="#cfcfcf"/></g><g transform="matrix(0.08311941197781797 0.01572529460686508 -0.01572529460686508 0.08311941197781797 16.72698823122436 278.6968786619945)"><circle cx="10" cy="500" r="10" fill="#cfcfcf"/><circle cx="267" cy="245" r="10" fill="#cfcfcf"/><path d="M398.479,118.032c-8.071-8.072-18.802-12.516-30.216-12.516c-11.414,0-22.146,4.446-30.216,12.516    c-16.661,16.662-16.661,43.772,0,60.433c8.332,8.331,19.272,12.495,30.216,12.495c10.941,0,21.886-4.166,30.216-12.495    C415.14,161.803,415.14,134.693,398.479,118.032z M384.282,164.266c-8.833,8.832-23.206,8.832-32.037,0    c-8.833-8.832-8.833-23.204,0-32.037c4.279-4.279,9.967-6.635,16.018-6.635c6.051,0,11.739,2.356,16.018,6.635    C393.114,141.062,393.114,155.434,384.282,164.266z" fill="#cfcfcf"/><path d="M125.409,411.45c-4.964-2.472-10.99-0.451-13.462,4.512l-11.958,24.015c-5.2,10.441-15.658,17.423-27.296,18.219    l-13.908,0.952c-2.351,0.157-3.897-1.014-4.612-1.729s-1.889-2.264-1.729-4.613l0.952-13.907    c0.797-11.637,7.779-22.096,18.219-27.296l24.014-11.958c4.964-2.472,6.984-8.499,4.512-13.462    c-2.471-4.963-8.498-6.984-13.462-4.512l-24.014,11.958c-16.792,8.362-28.02,25.182-29.302,43.898l-0.952,13.907    c-0.514,7.507,2.242,14.863,7.562,20.183c4.898,4.898,11.523,7.624,18.403,7.624c0.591,0,1.186-0.02,1.78-0.061l13.908-0.952    c18.716-1.281,35.536-12.508,43.898-29.302l11.958-24.014C132.392,419.948,130.372,413.922,125.409,411.45z" fill="#cfcfcf"/><path d="M505.07,8.18c-4.711-4.641-11.201-7.068-17.793-6.639l-9.348,0.596c-83.819,5.351-162.262,45.81-215.215,111.004    L240.71,140.23l-57.583-1.691c-0.098-0.003-0.197-0.004-0.294-0.004c-45.668,0-88.603,17.784-120.896,50.076L2.959,247.59    c-2.805,2.805-3.696,7-2.272,10.702c1.424,3.703,4.894,6.221,8.856,6.423l124.844,6.414l-5.09,6.267    c-2.565,3.159-2.971,7.553-1.026,11.127c1.956,3.596,4.006,7.135,6.144,10.617l-29.606,35.147    c-2.531,3.005-3.076,7.211-1.397,10.763c6.467,13.665,15.05,25.943,25.514,36.493c10.718,10.808,23.251,19.646,37.249,26.271    c1.368,0.648,2.835,0.965,4.293,0.965c2.261,0,4.503-0.764,6.327-2.243c6.378-5.174,13.731-11.311,20.843-17.245    c5.069-4.23,10.255-8.557,15.102-12.547c2.893,1.741,5.822,3.429,8.795,5.046c1.504,0.818,3.153,1.221,4.796,1.221    c2.186,0,4.358-0.712,6.156-2.108l6.843-5.31l6.442,125.37c0.204,3.962,2.721,7.432,6.423,8.856c1.172,0.45,2.39,0.67,3.6,0.67    c2.615,0,5.183-1.023,7.101-2.942l58.979-58.979c32.293-32.293,50.076-75.227,50.076-120.896v-54.995l23.267-18.055    c69.729-54.11,112.196-135.704,116.512-223.862l0.239-4.886C512.295,19.27,509.779,12.822,505.07,8.18z M33.123,245.822    l43.012-43.012c28.465-28.465,66.303-44.157,106.553-44.196l42.085,1.236l-74.71,91.98L33.123,245.822z M184.774,373.874    c-5.241,4.372-10.614,8.856-15.6,12.957c-9.644-5.223-18.368-11.74-25.992-19.428c-7.384-7.445-13.669-15.922-18.737-25.26    l21.676-25.733c6.554,8.793,13.728,17.122,21.478,24.925c0.006,0.006,0.012,0.011,0.018,0.017    c0.002,0.002,0.004,0.005,0.006,0.007c0.003,0.003,0.006,0.005,0.009,0.008c8.593,8.648,17.836,16.584,27.641,23.761    C191.811,368.002,188.264,370.962,184.774,373.874z M351.875,327.672c0,40.305-15.695,78.197-44.196,106.698l-43.012,43.012    l-6.002-116.792l93.209-72.33V327.672z M491.678,29.779c-4.029,82.297-43.673,158.467-108.767,208.98l-157.46,122.189    c-13.058-7.63-25.229-16.639-36.368-26.846l53.086-53.086c3.92-3.92,3.92-10.278,0-14.199c-3.921-3.921-10.278-3.921-14.199,0    l-53.036,53.036c-9.751-10.795-18.387-22.541-25.74-35.104L278.3,125.8C327.732,64.941,400.96,27.171,479.207,22.177l9.348-0.596    c1.225-0.076,2.045,0.532,2.423,0.904c0.377,0.371,1,1.178,0.94,2.409L491.678,29.779z" fill="#cfcfcf"/></g></defs><g fi:class="KUsePattern"><pattern id="pattern_L1_0" width="350" height="350" patternUnits="userSpaceOnUse"><use xlink:href="#L1_0" x="-350" y="-350"/><use xlink:href="#L1_0" x="0" y="-350"/><use xlink:href="#L1_0" x="350" y="-350"/><use xlink:href="#L1_0" x="-350" y="0"/><use xlink:href="#L1_0" x="0" y="0"/><use xlink:href="#L1_0" x="350" y="0"/><use xlink:href="#L1_0" x="-350" y="350"/><use xlink:href="#L1_0" x="0" y="350"/><use xlink:href="#L1_0" x="350" y="350"/></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern_L1_0)"/></g><g fi:class="KUsePattern"><pattern id="pattern_L1_5" width="350" height="350" patternUnits="userSpaceOnUse"><use xlink:href="#L1_5" x="-350" y="-350"/><use xlink:href="#L1_5" x="0" y="-350"/><use xlink:href="#L1_5" x="350" y="-350"/><use xlink:href="#L1_5" x="-350" y="0"/><use xlink:href="#L1_5" x="0" y="0"/><use xlink:href="#L1_5" x="350" y="0"/><use xlink:href="#L1_5" x="-350" y="350"/><use xlink:href="#L1_5" x="0" y="350"/><use xlink:href="#L1_5" x="350" y="350"/></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern_L1_5)"/></g><g fi:class="KUsePattern" transform="matrix(1 0 0 1 20 20)"><pattern id="pattern_UNKNOWN" width="350" height="350" patternUnits="userSpaceOnUse"><use xlink:href="#UNKNOWN" x="-350" y="-350"/><use xlink:href="#UNKNOWN" x="0" y="-350"/><use xlink:href="#UNKNOWN" x="350" y="-350"/><use xlink:href="#UNKNOWN" x="-350" y="0"/><use xlink:href="#UNKNOWN" x="0" y="0"/><use xlink:href="#UNKNOWN" x="350" y="0"/><use xlink:href="#UNKNOWN" x="-350" y="350"/><use xlink:href="#UNKNOWN" x="0" y="350"/><use xlink:href="#UNKNOWN" x="350" y="350"/></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern_UNKNOWN)"/></g><g fi:class="KUsePattern" transform="matrix(1 0 0 1 20 20)"><pattern id="pattern_UNKNOWN" width="350" height="350" patternUnits="userSpaceOnUse"><use xlink:href="#UNKNOWN" x="-350" y="-350"/><use xlink:href="#UNKNOWN" x="0" y="-350"/><use xlink:href="#UNKNOWN" x="350" y="-350"/><use xlink:href="#UNKNOWN" x="-350" y="0"/><use xlink:href="#UNKNOWN" x="0" y="0"/><use xlink:href="#UNKNOWN" x="350" y="0"/><use xlink:href="#UNKNOWN" x="-350" y="350"/><use xlink:href="#UNKNOWN" x="0" y="350"/><use xlink:href="#UNKNOWN" x="350" y="350"/></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern_UNKNOWN)"/></g></svg>


--------------------------------------------------------------------------------