From c1a5e5526064934b86fd5724dc9aeb2303178a20 Mon Sep 17 00:00:00 2001 From: Alan Tai Date: Fri, 16 Sep 2022 15:58:33 +0800 Subject: [PATCH] Update links on header and footer --- README.md | 4 + package.json | 4 +- src/components/ActionBar.tsx | 138 +++++++----------- src/components/PopUpFooter.tsx | 59 ++++++++ .../__snapshots__/ActionBar.test.tsx.snap | 42 ------ src/components/index.ts | 1 + src/screens/Home.tsx | 41 +----- src/screens/__snapshots__/Home.test.tsx.snap | 51 ++----- src/screens/index.ts | 3 + 9 files changed, 136 insertions(+), 207 deletions(-) create mode 100644 src/components/PopUpFooter.tsx diff --git a/README.md b/README.md index 17fa27f..05e0c95 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,10 @@ Possibly the coolest way to install apps and customize your Mac! +## Introduction + +This [article](https://ayltai.medium.com/install-mac-apps-and-tweaks-with-a-single-command-6b1b90c466b5) explains the motivation behind this project. + ## Getting started Try it: [https://brewmymac.sh](https://brewmymac.sh) diff --git a/package.json b/package.json index 1e1c914..4aeb931 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name" : "brew-my-mac", "description" : "Possibly the coolest way to install apps and customize your Mac!", - "version" : "1.0.5", + "version" : "1.0.6", "author" : { "name" : "Alan Tai" }, @@ -64,7 +64,7 @@ "@testing-library/react" : "^13.4.0", "@tsconfig/create-react-app" : "^1.0.2", "@types/ejs" : "^3.1.1", - "@types/jest" : "^29.0.2", + "@types/jest" : "^29.0.3", "@types/node" : "^18.7.18", "@types/react" : "^18.0.20", "@types/react-dom" : "^18.0.6", diff --git a/src/components/ActionBar.tsx b/src/components/ActionBar.tsx index 2e573b6..5aa5f16 100644 --- a/src/components/ActionBar.tsx +++ b/src/components/ActionBar.tsx @@ -1,10 +1,7 @@ -import { GitHub, InfoOutlined, LinkedIn, } from '@mui/icons-material'; -import { AppBar, Box, IconButton, Grid, Link, styled, Toolbar, Tooltip, } from '@mui/material'; +import { GitHub, } from '@mui/icons-material'; +import { AppBar, Box, IconButton, Grid, Link, styled, Toolbar, } from '@mui/material'; import { useGA4React, } from 'ga-4-react'; -import React, { useState, } from 'react'; -import { useTranslation, } from 'react-i18next'; - -import { About, } from '../screens'; +import React from 'react'; const ClickableImage = styled('img')` cursor : pointer; @@ -25,10 +22,6 @@ export const ActionBar = ({ }) => { const ga = useGA4React(process.env.REACT_APP_GA_TAG); - const { t, } = useTranslation(); - - const [ open, setOpen, ] = useState(false); - const handleHomepageClick = () => window.open('/', '_self'); const handleGitHubClick = () => { @@ -37,82 +30,61 @@ export const ActionBar = ({ window.open('https://github.com/ayltai/BrewMyMac', '_blank'); }; - const handleLinkedInClick = () => { - if (ga) ga.event('Click', 'LinkedIn', 'Referral'); - - window.open(t('url_linkedin'), '_blank'); - }; - - const handleAboutClick = () => setOpen(true); - - const handleClose = () => setOpen(false); - return ( - <> - - + + + + + + + {title} + + + + + - + - - - {title} - - - - - - - - - - - - - - - - - {centerComponent} - - - - - {rightComponent} - + flexDirection='row'> + + {centerComponent} + + + + + {rightComponent} - - - {open && } - + + + ); }; diff --git a/src/components/PopUpFooter.tsx b/src/components/PopUpFooter.tsx new file mode 100644 index 0000000..9c3209b --- /dev/null +++ b/src/components/PopUpFooter.tsx @@ -0,0 +1,59 @@ +import { Box, Link, styled, } from '@mui/material'; +import React, { useState, } from 'react'; +import { useTranslation, } from 'react-i18next'; + +import { About, Disclaimer, Privacy, Terms, } from '../screens'; + +import { Footer, } from './Footer'; + +const ClickableLink = styled(Link)` + cursor : pointer; +`; + +export const PopUpFooter = () => { + const [ showTerms, setShowTerms, ] = useState(false); + const [ showPrivacy, setShowPrivacy, ] = useState(false); + const [ showDisclaimer, setShowDisclaimer, ] = useState(false); + const [ showAbout, setShowAbout, ] = useState(false); + + const { t, } = useTranslation(); + + const handleShowTerms = () => setShowTerms(true); + + const handleShowPrivacy = () => setShowPrivacy(true); + + const handleShowDisclaimer = () => setShowDisclaimer(true); + + const handleShowAbout = () => setShowAbout(true); + + const handleCloseTerms = () => setShowTerms(false); + + const handleClosePrivacy = () => setShowPrivacy(false); + + const handleCloseDisclaimer = () => setShowDisclaimer(false); + + const handleCloseAbout = () => setShowAbout(false); + + return ( + <> +
+ + {t('label_terms_title')} + + + {t('label_privacy_title')} + + + {t('label_disclaimer_title')} + + + {t('label_about_title')} + +
+ {showTerms && } + {showPrivacy && } + {showDisclaimer && } + {showAbout && } + + ); +}; diff --git a/src/components/__snapshots__/ActionBar.test.tsx.snap b/src/components/__snapshots__/ActionBar.test.tsx.snap index 6d1cfe5..de696d5 100644 --- a/src/components/__snapshots__/ActionBar.test.tsx.snap +++ b/src/components/__snapshots__/ActionBar.test.tsx.snap @@ -44,48 +44,6 @@ exports[` renders correctly 1`] = ` class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root" /> - -
({ marginLeft : theme.spacing(2), float : 'right', @@ -44,9 +37,6 @@ export const Home = () => { const [ showSelected, setShowSelected, ] = useState(false); const [ savedSession, setSavedSession, ] = useState(); const [ showSessionDetail, setShowSessionDetail, ] = useState(false); - const [ showTerms, setShowTerms, ] = useState(false); - const [ showPrivacy, setShowPrivacy, ] = useState(false); - const [ showDisclaimer, setShowDisclaimer, ] = useState(false); const { t, } = useTranslation(); @@ -86,35 +76,13 @@ export const Home = () => { setSavedSession(undefined); }; - const handleShowTerms = () => setShowTerms(true); - - const handleShowPrivacy = () => setShowPrivacy(true); - - const handleShowDisclaimer = () => setShowDisclaimer(true); - - const handleCloseTerms = () => setShowTerms(false); - - const handleClosePrivacy = () => setShowPrivacy(false); - - const handleCloseDisclaimer = () => setShowDisclaimer(false); - useEffect(() => { if (ga) ga.pageview('/'); }, [ ga, ]); return ( <> -
- - {t('label_terms_title')} - - - {t('label_privacy_title')} - - - {t('label_disclaimer_title')} - -
+ { onClose={handleCloseSession} /> )} {showSessionDetail && !savedSession && } - {showTerms && } - {showPrivacy && } - {showDisclaimer && } ); diff --git a/src/screens/__snapshots__/Home.test.tsx.snap b/src/screens/__snapshots__/Home.test.tsx.snap index 722ab94..71f5f34 100644 --- a/src/screens/__snapshots__/Home.test.tsx.snap +++ b/src/screens/__snapshots__/Home.test.tsx.snap @@ -35,6 +35,15 @@ exports[` renders correctly 1`] = ` label_disclaimer_title
+
+ + label_about_title + +
renders correctly 1`] = ` class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root" /> - -