Skip to content

Commit

Permalink
fix: avoid top level fat arrow
Browse files Browse the repository at this point in the history
fast refresh doesn't work well with anonymous functions

related: vercel/next.js#12891 (comment)
  • Loading branch information
Kikobeats committed May 20, 2020
1 parent f890d43 commit 68cc11c
Show file tree
Hide file tree
Showing 15 changed files with 28 additions and 44 deletions.
2 changes: 1 addition & 1 deletion packages/app/src/components/icons/github.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Svg from './svg'
import { Svg } from './svg'

export const GitHubIcon = ({ size = '20', ...props }) => (
<Svg
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/icons/info.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Svg from './svg'
import { Svg } from './svg'

export const InfoIcon = ({ size = '24', ...props }) => (
<Svg
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/icons/keyboard.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Svg from './svg'
import { Svg } from './svg'

export const KeyboardIcon = ({ size = '24', ...props }) => (
<Svg
Expand Down
6 changes: 3 additions & 3 deletions packages/app/src/components/icons/svg.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import styled from 'styled-components'

const Svg = styled('svg')``
const StyledSvg = styled('svg')``

export default ({ color, size, ...props }) => (
<Svg
export const Svg = ({ color, size, ...props }) => (
<StyledSvg
xmlns='http://www.w3.org/2000/svg'
fill={color}
stroke={color}
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/icons/theme.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Svg from './svg'
import { Svg } from './svg'

export const ThemeIcon = ({ size = '24', ...props }) => (
<Svg
Expand Down
4 changes: 1 addition & 3 deletions packages/app/src/containers/overlays/overlay-about.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { useContext } from 'react'
import { AppContext } from '@/context'
import pkg from '@/package.json'

const OverlayAbout = () => {
export default function OverlayAbout () {
const { theme } = useContext(AppContext)
const { color, contrast } = theme

Expand Down Expand Up @@ -51,5 +51,3 @@ const OverlayAbout = () => {
</>
)
}

export default OverlayAbout
6 changes: 2 additions & 4 deletions packages/app/src/containers/overlays/overlay-key-bindings.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { isMac } from '@/lib'

const ctrl = isMac ? 'cmd' : 'ctrl'

const OverlayKeyBindings = () => {
export default function OverlayKeyBindings () {
const { theme } = useContext(AppContext)
const { borderColor, color } = theme

Expand Down Expand Up @@ -67,7 +67,7 @@ const OverlayKeyBindings = () => {
borderRadius: 4
}}
>
{combination.map((key) => (
{combination.map(key => (
<Text
sx={{
fontSize: 0,
Expand All @@ -88,5 +88,3 @@ const OverlayKeyBindings = () => {
</>
)
}

export default OverlayKeyBindings
14 changes: 6 additions & 8 deletions packages/app/src/containers/overlays/overlay-preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const toClipboard = async (text, name) => {
notification(`Copied ${name} to clipboard`)
}

const OverlayPreview = () => {
export default function OverlayPreview () {
const { query, screenshotUrl, theme } = useContext(AppContext)
const { borderColor, color, contrast } = theme

Expand Down Expand Up @@ -49,7 +49,7 @@ const OverlayPreview = () => {
borderColor,
color: contrast
}}
onClick={(e) => toClipboard(e.target.textContent, 'SEO Tags')}
onClick={e => toClipboard(e.target.textContent, 'SEO Tags')}
children={shareCode.seo(screenshotUrl)}
/>
</TabPanel>
Expand All @@ -60,7 +60,7 @@ const OverlayPreview = () => {
color: contrast
}}
children={shareCode.html(screenshotUrl)}
onClick={(e) => toClipboard(e.target.textContent, 'HTML')}
onClick={e => toClipboard(e.target.textContent, 'HTML')}
/>
</TabPanel>
<TabPanel>
Expand All @@ -70,7 +70,7 @@ const OverlayPreview = () => {
color: contrast
}}
children={shareCode.markdown(screenshotUrl)}
onClick={(e) => toClipboard(e.target.textContent, 'Markdown')}
onClick={e => toClipboard(e.target.textContent, 'Markdown')}
/>
</TabPanel>
<TabPanel>
Expand All @@ -80,7 +80,7 @@ const OverlayPreview = () => {
color: contrast
}}
children={shareCode.javascript(query)}
onClick={(e) => toClipboard(e.target.textContent, 'Javascript')}
onClick={e => toClipboard(e.target.textContent, 'Javascript')}
/>
</TabPanel>
<TabPanel>
Expand All @@ -90,13 +90,11 @@ const OverlayPreview = () => {
color: contrast
}}
children={screenshotUrl}
onClick={(e) => toClipboard(e.target.textContent, 'URL')}
onClick={e => toClipboard(e.target.textContent, 'URL')}
/>
</TabPanel>
</Tabs>
</Box>
</>
)
}

export default OverlayPreview
8 changes: 3 additions & 5 deletions packages/app/src/context/editor-context.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const updateQuery = debounce(({ setQuery, code, queryVariables }) => {
setQuery(newQuery)
})

const editorContext = (presetRef, query, setQuery) => {
export default function EditorContext (presetRef, query, setQuery) {
const [code, setCode] = useState(() => {
if (isEmpty(query)) return presetRef.current.code
const { p } = query
Expand All @@ -26,7 +26,7 @@ const editorContext = (presetRef, query, setQuery) => {
})

const handleCode = useCallback(
(newCode) => {
newCode => {
setCode(newCode)
const updateQueryOpts = { code: newCode, setQuery }

Expand All @@ -40,7 +40,7 @@ const editorContext = (presetRef, query, setQuery) => {
)

const handleQueryVariables = useCallback(
(newJSON) => {
newJSON => {
setQueryVariables(newJSON)
updateQuery({
setQuery,
Expand All @@ -60,5 +60,3 @@ const editorContext = (presetRef, query, setQuery) => {
setQueryVariables
}
}

export default editorContext
4 changes: 1 addition & 3 deletions packages/app/src/context/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import themeContext from './theme-context'

export const AppContext = createContext({})

const AppContextProvider = ({ children }) => {
export default function AppContextProvider ({ children }) {
const [query, setQuery] = useQueryState()

const presetRef = useRef(presets[(query && query.preset) || DEFAULT_PRESET])
Expand Down Expand Up @@ -93,5 +93,3 @@ const AppContextProvider = ({ children }) => {
</AppContext.Provider>
)
}

export default AppContextProvider
6 changes: 2 additions & 4 deletions packages/app/src/context/overlay-context.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { useCallback, useState } from 'react'
import defer from 'tickedoff'

const overlayContext = (onShow) => {
export default function OverlayContext (onShow) {
const [isOverlay, setOverlay] = useState('')

const showOverlay = useCallback(
(state) => () => {
state => () => {
if (onShow) {
onShow()
}
Expand All @@ -19,5 +19,3 @@ const overlayContext = (onShow) => {

return { isOverlay, showOverlay, hideOverlay }
}

export default overlayContext
8 changes: 3 additions & 5 deletions packages/app/src/context/presets-context.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import { useCallback } from 'react'

import { presets } from '@/components'

const presetOptions = Object.keys(presets).map((key) => ({
const presetOptions = Object.keys(presets).map(key => ({
value: key,
label: presets[key].name
}))

const presetsContext = (onChange) => {
const handlePresetChange = useCallback((presetName) => {
export default function PresetsContext (onChange) {
const handlePresetChange = useCallback(presetName => {
const newPreset = presets[presetName]
if (onChange) {
onChange(presetName, newPreset)
Expand All @@ -20,5 +20,3 @@ const presetsContext = (onChange) => {
presetOptions
}
}

export default presetsContext
4 changes: 1 addition & 3 deletions packages/app/src/context/theme-context.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { theme as themeBase, editorThemes } from '@/theme'
const cycledMode = new Cycled(Object.keys(themeBase.colors.modes))
const nextMode = () => cycledMode.next()

const themeContext = () => {
export default function ThemeContext () {
const { colorMode, setColorMode } = useThemeUI()

const changeTheme = useCallback(() => setColorMode(nextMode()), [])
Expand All @@ -27,5 +27,3 @@ const themeContext = () => {

return { colorMode, changeTheme, theme }
}

export default themeContext
2 changes: 1 addition & 1 deletion packages/app/src/pages/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { setImageMeta } from '@/lib'
import { OVERLAY_STATE } from '@/constants'
import { AppContext } from '@/context'

export default () => {
export default function Editor () {
const [render, setRender] = useState(false)
const {
changeTheme,
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
import { PreviewArea } from '@/containers'
import { AppFrame, Spinner } from '@/components'

export default () => {
export default function Index () {
const router = useRouter()
const [isLoading, setIsLoading] = useState(true)

Expand Down

1 comment on commit 68cc11c

@vercel
Copy link

@vercel vercel bot commented on 68cc11c May 20, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.