refactor: adjust code style (#442)

.prettierrc.yaml

@@ -3,4 +3,4 @@
 semi: false
 tabWidth: 4
 trailingComma: "all"
-printWidth: 100
+printWidth: 140

.vscode/settings.json

@@ -9,7 +9,7 @@
         "source.fixAll.eslint": true,
     },
     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
-    "editor.rulers": [100],
+    "editor.rulers": [140],
     "typescript.tsdk": "node_modules/typescript/lib",
     "python.pythonPath": ".venv/bin/python",
     "eslint.codeActionsOnSave.mode": "problems",

packages/common/src/cookie.ts

@@ -1,8 +1,4 @@
-export function setCookie(
-    name: string,
-    value: string,
-    option?: { days?: number; domain?: string },
-): void {
+export function setCookie(name: string, value: string, option?: { days?: number; domain?: string }): void {
     let expires = ""
     if (option?.days) {
         const date = new Date()

packages/home/src/components/appbar-auth.tsx

@@ -20,22 +20,13 @@ const useStyles = makeStyles(
     }),
 )
 
-const SignInAndSignUp: React.FC<{ signInLink: string; signUpLink: string }> = ({
-    signInLink,
-    signUpLink,
-}) => (
+const SignInAndSignUp: React.FC<{ signInLink: string; signUpLink: string }> = ({ signInLink, signUpLink }) => (
     <>
         <Button animation href={signInLink} testid="homepage_signin_btn" ariaLabel="Sign in">
             Sign in
         </Button>
         <span style={{ width: "8px" }} />
-        <Button
-            animation
-            href={signUpLink}
-            testid="homepage_signup_btn"
-            ariaLabel="Sign up"
-            primary
-        >
+        <Button animation href={signUpLink} testid="homepage_signup_btn" ariaLabel="Sign up" primary>
             Sign up
         </Button>
     </>

packages/home/src/components/appbar-mobile-menu.tsx

@@ -71,11 +71,7 @@ export const MobileMenu: React.FC<{
     const authInfo = useAuthInfo()
 
     return (
-        <div
-            className={animationClassName + " " + classes.root}
-            hidden={hidden}
-            data-testid="homepage_appbar_mobile_menu"
-        >
+        <div className={animationClassName + " " + classes.root} hidden={hidden} data-testid="homepage_appbar_mobile_menu">
             <div
                 style={{
                     borderRadius: "0.5rem",
@@ -126,14 +122,7 @@ export const MobileMenu: React.FC<{
                             paddingRight: "1.25rem",
                         }}
                     >
-                        <Button
-                            href={authInfo.signUpLink}
-                            ariaLabel="Sign up"
-                            testid=""
-                            primary
-                            shadow
-                            fullWidth
-                        >
+                        <Button href={authInfo.signUpLink} ariaLabel="Sign up" testid="" primary shadow fullWidth>
                             Sign up
                         </Button>
                         <p

packages/home/src/components/button.tsx

@@ -109,16 +109,7 @@ const useTextButtonStyles = makeStyles(
     }),
 )
 
-export const Button: React.FC<ButtonProps> = ({
-    ariaLabel,
-    testid,
-    primary,
-    children,
-    fullWidth,
-    shadow,
-    animation,
-    ...extra
-}) => {
+export const Button: React.FC<ButtonProps> = ({ ariaLabel, testid, primary, children, fullWidth, shadow, animation, ...extra }) => {
     const classes = useTextButtonStyles()
     const [show, setShow] = useState(false)
     React.useEffect(() => {
@@ -138,13 +129,7 @@ export const Button: React.FC<ButtonProps> = ({
     }
 
     return (
-        <a
-            {...extra}
-            className={className}
-            type="button"
-            aria-label={ariaLabel}
-            data-testid={testid}
-        >
+        <a {...extra} className={className} type="button" aria-label={ariaLabel} data-testid={testid}>
             {children}
         </a>
     )
@@ -153,13 +138,7 @@ export const Button: React.FC<ButtonProps> = ({
 export const IconButton: React.FC<IconButtonProps> = ({ onClick, ariaLabel, testid, children }) => {
     const classes = useIconButtonStyles()
     return (
-        <button
-            className={classes.btn}
-            type="button"
-            aria-label={ariaLabel}
-            onClick={onClick}
-            data-testid={testid}
-        >
+        <button className={classes.btn} type="button" aria-label={ariaLabel} onClick={onClick} data-testid={testid}>
             {children}
         </button>
     )
@@ -168,18 +147,8 @@ export const IconButton: React.FC<IconButtonProps> = ({ onClick, ariaLabel, test
 export const CloseIconButton: React.FC<IconButtonProps> = (props) => {
     return (
         <IconButton {...props}>
-            <svg
-                style={{ height: "1.5rem", width: "1.5rem" }}
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-            >
-                <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M6 18L18 6M6 6l12 12"
-                ></path>
+            <svg style={{ height: "1.5rem", width: "1.5rem" }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
             </svg>
         </IconButton>
     )
@@ -188,18 +157,8 @@ export const CloseIconButton: React.FC<IconButtonProps> = (props) => {
 export const MoreIconButton: React.FC<IconButtonProps> = (props) => {
     return (
         <IconButton {...props}>
-            <svg
-                style={{ height: "1.5rem", width: "1.5rem" }}
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-            >
-                <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M4 6h16M4 12h16M4 18h16"
-                ></path>
+            <svg style={{ height: "1.5rem", width: "1.5rem" }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path>
             </svg>
         </IconButton>
     )

packages/home/src/components/cta.tsx

@@ -39,12 +39,7 @@ export const CTA: React.FC = () => {
         <div className={classes.cta}>
             <Logo className={classes.logo} />
             <h2 className={classes.header}>Get started with Rino</h2>
-            <Button
-                href={authInfo.signUpLink}
-                testid="homepage_signup_btn"
-                ariaLabel="create_an_account"
-                primary
-            >
+            <Button href={authInfo.signUpLink} testid="homepage_signup_btn" ariaLabel="create_an_account" primary>
                 Create an account
             </Button>
         </div>

packages/home/src/components/features.tsx

@@ -143,11 +143,7 @@ export const Features: React.FC = () => {
             <div style={{ marginTop: "2.5rem" }}>
                 <ul className={classes.blockContainer}>
                     <FeatureBlock title="What you see is what you get" desc="" svg={wysiwygSvg} />
-                    <FeatureBlock
-                        title="Sync across all your devices"
-                        desc=""
-                        svg={cloudUploadSvg}
-                    />
+                    <FeatureBlock title="Sync across all your devices" desc="" svg={cloudUploadSvg} />
                     <FeatureBlock title="Work offline" desc="" svg={offlineSvg} />
                     <FeatureBlock title="Free and open source" desc="" svg={githubSvg} />
                 </ul>

packages/home/src/components/homepage.tsx

@@ -1,5 +1,4 @@
 import { createStyles, makeStyles } from "@material-ui/styles"
-import { getSignInState } from "@rino.app/common"
 import React from "react"
 
 import { breakpoints } from "../styles/breakpoint"
@@ -70,12 +69,6 @@ export function Homepage(props: HomepageProps) {
 
     const [mobileMenuActivity, setMobileMenuActivity] = React.useState(false)
 
-    if (typeof window !== "undefined") {
-        // client-side-only code
-        // TODO: use https://github.com/vercel/next.js/issues/2473#issuecomment-587551234
-        console.log(`sign in state: ${getSignInState()}`)
-    }
-
     return (
         <div className={classes.root} data-testid="homepage_root">
             <div className={classes.container}>

packages/home/src/pages/_app.tsx

@@ -3,13 +3,7 @@ import "../remedy.css"
 import { BaseApp } from "@rino.app/next/dist/app"
 import React from "react"
 
-export default function MyApp<T>({
-    Component,
-    pageProps,
-}: {
-    Component: React.FC<T>
-    pageProps: T
-}) {
+export default function MyApp<T>({ Component, pageProps }: { Component: React.FC<T>; pageProps: T }) {
     return (
         <BaseApp>
             <Component {...pageProps} />

packages/next/next.base.config.js

@@ -12,11 +12,7 @@ function getEnvs() {
     }
     const exported = {}
     for (const key of Object.keys(allEnvs)) {
-        if (
-            key === "FIREBASE_DATABASE_EMULATOR_HOST" ||
-            key === "FIRESTORE_EMULATOR_HOST" ||
-            key.startsWith("REACT_APP")
-        ) {
+        if (key === "FIREBASE_DATABASE_EMULATOR_HOST" || key === "FIRESTORE_EMULATOR_HOST" || key.startsWith("REACT_APP")) {
             exported[key] = allEnvs[key]
         }
     }

packages/next/src/document.tsx

@@ -53,10 +53,7 @@ export function getNextDocument({ host, hasManifest }: { host: string; hasManife
             </Head>
             <body>
                 <noscript>
-                    <strong>
-                        We're sorry but Rino doesn't work properly without JavaScript enabled.
-                        Please enable it to continue.
-                    </strong>
+                    <strong>We're sorry but Rino doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
                 </noscript>
                 <Main />
                 <NextScript />

packages/server/api/server.ts

@@ -13,9 +13,7 @@ const WEB_HOST = "rino.app"
 const HOME_HOST = "www.rino.app"
 
 function isIndexPage(req: IncomingMessage) {
-    return (
-        req.url === "/" || req.url === "" || req.url === "/index.html" || req.url === "index.html"
-    )
+    return req.url === "/" || req.url === "" || req.url === "/index.html" || req.url === "index.html"
 }
 
 function serveHTML(res: NowResponse, filePath: string) {

packages/web/jest.config.js

@@ -12,11 +12,7 @@ module.exports = {
     testMatch: ["**/__test__/**/*.spec.(js|ts|jsx|tsx)"],
 
     // A list of paths to modules that run some code to configure or set up the testing framework before each test
-    setupFilesAfterEnv: [
-        "jest-extended",
-        "jest-prosemirror/environment",
-        "jest-remirror/environment",
-    ],
+    setupFilesAfterEnv: ["jest-extended", "jest-prosemirror/environment", "jest-remirror/environment"],
 
     // Required for dom jest-prosemirror and jest-remirror
     testEnvironment: "jsdom",

packages/web/src/components/AboutDialog.tsx

@@ -1,11 +1,4 @@
-import {
-    Box,
-    Dialog,
-    DialogContent,
-    DialogContentText,
-    DialogTitle,
-    Typography,
-} from "@material-ui/core"
+import { Box, Dialog, DialogContent, DialogContentText, DialogTitle, Typography } from "@material-ui/core"
 import React from "react"
 
 import logo from "src/assets/logo.png"
@@ -29,9 +22,7 @@ export const AboutDialog: React.FC<{
                 <DialogContentText align="center">
                     <span data-testid="about_dialog_version">Version {version}</span>
                     <br />
-                    <span data-testid="about_dialog_copyright">
-                        Copyright © 2020 Ocavue. All rights reserved.
-                    </span>
+                    <span data-testid="about_dialog_copyright">Copyright © 2020 Ocavue. All rights reserved.</span>
                 </DialogContentText>
             </DialogContent>
         </Dialog>

packages/web/src/components/Auth/Auth.tsx

@@ -111,14 +111,7 @@ const StyledButton = withStyles(
     }),
 )(Button)
 export const SubmitButton: React.FC<ButtonProps> = (props) => (
-    <StyledButton
-        type="submit"
-        fullWidth
-        variant="contained"
-        color="primary"
-        size="large"
-        {...props}
-    />
+    <StyledButton type="submit" fullWidth variant="contained" color="primary" size="large" {...props} />
 )
 
 type OnSubmit = (event: React.FormEvent<HTMLFormElement>) => void

packages/web/src/components/Auth/PasswordResetForm.tsx

@@ -14,14 +14,7 @@ type PasswordResetProps = {
     setError: (val: string) => void
 }
 
-export default function PasswordReset({
-    email,
-    setEmail,
-    progressing,
-    setProgressing,
-    setProgressed,
-    setError,
-}: PasswordResetProps) {
+export default function PasswordReset({ email, setEmail, progressing, setProgressing, setProgressed, setError }: PasswordResetProps) {
     const disableSubmit = useMemo(() => !email || progressing, [email, progressing])
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault()

packages/web/src/components/Auth/SignInForm.tsx

@@ -3,12 +3,7 @@ import firebase from "firebase"
 import { useRouter } from "next/router"
 import React, { useMemo, useState } from "react"
 
-import {
-    AuthForm,
-    PasswordTextField,
-    SubmitButton,
-    UsernameTextField,
-} from "src/components/Auth/Auth"
+import { AuthForm, PasswordTextField, SubmitButton, UsernameTextField } from "src/components/Auth/Auth"
 import { signInWithEmailAndPassword } from "src/controller/auth/actions"
 import { AuthContainer } from "src/controller/auth/hook"
 
@@ -22,11 +17,7 @@ export default function SignInForm({ progressing, setProgressing, setError }: Si
     const router = useRouter()
     const [email, setEmail] = useState("")
     const [password, setPassword] = useState("")
-    const disableSubmit = useMemo(() => !email || !password || progressing, [
-        email,
-        password,
-        progressing,
-    ])
+    const disableSubmit = useMemo(() => !email || !password || progressing, [email, password, progressing])
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         setProgressing(true)
         setError("")

packages/web/src/components/Auth/SignUpForm.tsx

@@ -3,12 +3,7 @@ import firebase from "firebase"
 import { useRouter } from "next/router"
 import React, { useMemo, useState } from "react"
 
-import {
-    AuthForm,
-    PasswordTextField,
-    SubmitButton,
-    UsernameTextField,
-} from "src/components/Auth/Auth"
+import { AuthForm, PasswordTextField, SubmitButton, UsernameTextField } from "src/components/Auth/Auth"
 import { createUserWithEmailAndPassword } from "src/controller/auth/actions"
 import { AuthContainer } from "src/controller/auth/hook"
 
@@ -22,11 +17,7 @@ export default function SignUpForm({ progressing, setProgressing, setError }: Si
     const router = useRouter()
     const [email, setEmail] = useState("")
     const [password, setPassword] = useState("")
-    const disableSubmit = useMemo(() => !email || !password || progressing, [
-        email,
-        password,
-        progressing,
-    ])
+    const disableSubmit = useMemo(() => !email || !password || progressing, [email, password, progressing])
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         setProgressing(true)
         setError("")