diff --git a/.eslintrc.yml b/.eslintrc.yml index a782254..c4bb74a 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -7,6 +7,7 @@ root: true extends: - "plugin:react/recommended" - airbnb + - prettier globals: Atomics: readonly SharedArrayBuffer: readonly diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..5e2863a --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "printWidth": 100, + "singleQuote": true, + "trailingComma": "all" +} diff --git a/package.json b/package.json index befd94b..6dfb557 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "@material-ui/icons": "^4.9.1", "add": "^2.0.6", "axios": "^0.21.0", + "eslint-config-prettier": "^9.0.0", "firebase": "^9.9.4", "firebaseui": "^6.0.1", "html-to-pdfmake": "^2.1.2", @@ -41,6 +42,7 @@ "md5": "^2.3.0", "next": "11", "pdfmake": "^0.1.68", + "prettier": "^3.0.3", "prop-types": "^15.7.2", "react": "17.0.2", "react-cookie-consent": "^6.1.0", diff --git a/src/pages/_app.js b/src/pages/_app.js index 995bb09..22fe3c5 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -1,57 +1,57 @@ -import { Box, Button, makeStyles, Typography } from "@material-ui/core"; -import CssBaseline from "@material-ui/core/CssBaseline"; -import LinkUi from "@material-ui/core/Link"; -import { ThemeProvider } from "@material-ui/core/styles"; -import "firebaseui/dist/firebaseui.css"; -import dynamic from "next/dynamic"; -import Link from "next/link"; -import { useRouter } from "next/router"; -import PropTypes from "prop-types"; -import React, { useEffect, useRef, useState } from "react"; -import CookieConsent, { getCookieConsentValue } from "react-cookie-consent"; -import { useAuthState } from "react-firebase-hooks/auth"; -import { hotjar } from "react-hotjar"; -import { Provider } from "react-redux"; -import Head from "../components/Head"; -import Header from "../components/Header"; -import Loading from "../components/Loading"; -import firebase from "../config/firebase"; -import analyticsEvent from "../shared/analyticsEvent"; -import { axiosGet } from "../shared/axios"; -import isBrowser from "../shared/browserCheck"; -import useWindowDimensions from "../shared/dimensions"; -import { useStore } from "../store/store"; -import "../styles/hotjarNPS.css"; -import theme from "../styles/theme"; +import { Box, Button, makeStyles, Typography } from '@material-ui/core'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import LinkUi from '@material-ui/core/Link'; +import { ThemeProvider } from '@material-ui/core/styles'; +import 'firebaseui/dist/firebaseui.css'; +import dynamic from 'next/dynamic'; +import Link from 'next/link'; +import { useRouter } from 'next/router'; +import PropTypes from 'prop-types'; +import React, { useEffect, useRef, useState } from 'react'; +import CookieConsent, { getCookieConsentValue } from 'react-cookie-consent'; +import { useAuthState } from 'react-firebase-hooks/auth'; +import { hotjar } from 'react-hotjar'; +import { Provider } from 'react-redux'; +import Head from '../components/Head'; +import Header from '../components/Header'; +import Loading from '../components/Loading'; +import firebase from '../config/firebase'; +import analyticsEvent from '../shared/analyticsEvent'; +import { axiosGet } from '../shared/axios'; +import isBrowser from '../shared/browserCheck'; +import useWindowDimensions from '../shared/dimensions'; +import { useStore } from '../store/store'; +import '../styles/hotjarNPS.css'; +import theme from '../styles/theme'; -const Footer = dynamic(() => import("../components/Footer"), { ssr: false }); +const Footer = dynamic(() => import('../components/Footer'), { ssr: false }); const useStyles = makeStyles({ screenContainer: { margin: 0, - [theme.breakpoints.up("sm")]: { - height: "100vh", + [theme.breakpoints.up('sm')]: { + height: '100vh', }, }, desktopScreenContainer: {}, backgroundBlue: { background: "url('/backgroundBlue.png')", - backgroundSize: "100% 100%", - backgroundRepeat: "no-repeat", + backgroundSize: '100% 100%', + backgroundRepeat: 'no-repeat', }, backgroundPeach: { background: "url('/backgroundPeach.png')", - backgroundSize: "100% 100%", - backgroundRepeat: "no-repeat", + backgroundSize: '100% 100%', + backgroundRepeat: 'no-repeat', }, cookieContainer: { - position: "static !important", - display: "flex", - flexWrap: "wrap", + position: 'static !important', + display: 'flex', + flexWrap: 'wrap', }, cookieButtonContainer: { - display: "flex", + display: 'flex', }, cookieButton: { margin: 5, @@ -61,9 +61,9 @@ const useStyles = makeStyles({ height: 40, }, cookieContent: { - display: "flex", - justifyContent: "space-between", - width: "100%", + display: 'flex', + justifyContent: 'space-between', + width: '100%', }, }); @@ -73,14 +73,14 @@ function App({ Component, pageProps }) { const { height, width } = useWindowDimensions(); const [user] = isBrowser ? useAuthState(firebase.auth()) : [{}]; const [isLoading, setIsLoading] = useState(false); - const [background, setBackground] = useState("Peach"); + const [background, setBackground] = useState('Peach'); const containerRef = useRef(); const scrollTopRef = useRef(); useEffect(() => { // Remove the server-side injected CSS. - const jssStyles = document.querySelector("#jss-server-side"); + const jssStyles = document.querySelector('#jss-server-side'); if (jssStyles) { jssStyles.parentElement.removeChild(jssStyles); } @@ -91,7 +91,7 @@ function App({ Component, pageProps }) { // or if the router changes (i.e the user navigates) const checkTermsAcceptance = async (u) => { const idToken = await u.getIdToken(); - const serverUser = await axiosGet("/profile", { + const serverUser = await axiosGet('/profile', { headers: { authorization: `Bearer ${idToken}`, }, @@ -102,13 +102,13 @@ function App({ Component, pageProps }) { checkTermsAcceptance(user).then((termsAccepted) => { // If there is a verified user but they haven't accepted the terms, reroute them to sign-in if (!termsAccepted) { - router.push("/sign-in"); + router.push('/sign-in'); } if ( - process.env.NEXT_PUBLIC_ENV === "production" && - getCookieConsentValue("ConsentToCookie") === "true" + process.env.NEXT_PUBLIC_ENV === 'production' && + getCookieConsentValue('ConsentToCookie') === 'true' ) { - hotjar.identify("USER_ID", { userProperty: user.id }); + hotjar.identify('USER_ID', { userProperty: user.id }); } }); } else if (user && !user.emailVerified) { @@ -118,33 +118,31 @@ function App({ Component, pageProps }) { }, [user]); useEffect(() => { - router.events.on("routeChangeStart", () => { + router.events.on('routeChangeStart', () => { setIsLoading(true); }); - router.events.on("routeChangeComplete", () => { - analyticsEvent("page_view"); + router.events.on('routeChangeComplete', () => { + analyticsEvent('page_view'); setIsLoading(false); }); - router.events.on("routeChangeError", () => { + router.events.on('routeChangeError', () => { setIsLoading(false); }); - if (process.env.NEXT_PUBLIC_ENV === "production") { + if (process.env.NEXT_PUBLIC_ENV === 'production') { hotjar.initialize(Number(process.env.NEXT_PUBLIC_HOTJAR_ID), 6); } }, []); useEffect(() => { - const routesWithoutBackgrounds = ["/settings", "/saved", "/themes/[slug]"]; - const routesWithBlueBackgrounds = [ - "/resources/[resourceSlug]/items/[itemId]", - ]; + const routesWithoutBackgrounds = ['/settings', '/saved', '/themes/[slug]']; + const routesWithBlueBackgrounds = ['/resources/[resourceSlug]/items/[itemId]']; if (routesWithoutBackgrounds.includes(router.pathname)) { - setBackground("None"); + setBackground('None'); } else if (routesWithBlueBackgrounds.includes(router.pathname)) { - setBackground("Blue"); + setBackground('Blue'); } else { - setBackground("Peach"); + setBackground('Peach'); } }, [router]); @@ -199,23 +197,18 @@ function App({ Component, pageProps }) { > - We use cookies on YSM for a number of reasons that include - making our sites secure, robust and analysing how our site - is being used, which allows us to create more diverse - content.{" "} + We use cookies on YSM for a number of reasons that include making our sites + secure, robust and analysing how our site is being used, which allows us to + create more diverse content.{' '} - + Learn More. - You can choose to accept or reject this kind of tracking. - We love you either way. + You can choose to accept or reject this kind of tracking. We love you either + way. - {process.env.NEXT_PUBLIC_ENV === "staging" ? ( + {process.env.NEXT_PUBLIC_ENV === 'staging' ? ( You are currently viewing the staging environment. @@ -242,11 +235,7 @@ function App({ Component, pageProps }) { className={classes[`background${background}`]} > - {isLoading ? ( - - ) : ( - - )} + {isLoading ? : }