4
0
forked from crowetic/commerce

use FC instead of FunctionalComponent

This commit is contained in:
Luis Alvarez 2020-10-01 21:30:52 -05:00
parent cf7c85e3ba
commit 44a41eb3e1
17 changed files with 34 additions and 52 deletions

View File

@ -1,10 +1,10 @@
import React, { FunctionComponent } from 'react' import React, { FC } from 'react'
import { UserNav } from '@components/core' import { UserNav } from '@components/core'
import { Button } from '@components/ui' import { Button } from '@components/ui'
import { Trash, Cross } from '@components/icon' import { Trash, Cross } from '@components/icon'
import { useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
const CartSidebarView: FunctionComponent = () => { const CartSidebarView: FC = () => {
const { closeSidebar } = useUI() const { closeSidebar } = useUI()
return ( return (
<> <>

View File

@ -1,5 +1,5 @@
import cn from 'classnames' import cn from 'classnames'
import React, { FunctionComponent } from 'react' import React, { FC } from 'react'
import s from './Avatar.module.css' import s from './Avatar.module.css'
interface Props { interface Props {
@ -7,7 +7,7 @@ interface Props {
children?: any children?: any
} }
const Avatar: FunctionComponent<Props> = ({ className }) => { const Avatar: FC<Props> = ({ className }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
return ( return (
<div className={rootClassName}> <div className={rootClassName}>

View File

@ -1,5 +1,5 @@
import cn from 'classnames' import cn from 'classnames'
import { FunctionComponent } from 'react' import { FC } from 'react'
import s from './Featurebar.module.css' import s from './Featurebar.module.css'
interface Props { interface Props {
@ -8,11 +8,7 @@ interface Props {
description: string description: string
} }
const Featurebar: FunctionComponent<Props> = ({ const Featurebar: FC<Props> = ({ title, description, className }) => {
title,
description,
className,
}) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
return ( return (
<div className={rootClassName}> <div className={rootClassName}>

View File

@ -1,5 +1,5 @@
import cn from 'classnames' import cn from 'classnames'
import React, { FunctionComponent } from 'react' import React, { FC } from 'react'
import s from './Footer.module.css' import s from './Footer.module.css'
import { Container } from '@components/ui' import { Container } from '@components/ui'
@ -8,7 +8,7 @@ interface Props {
children?: any children?: any
} }
const Footer: FunctionComponent<Props> = ({ className }) => { const Footer: FC<Props> = ({ className }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
return ( return (
<footer className={rootClassName}> <footer className={rootClassName}>

View File

@ -1,5 +1,5 @@
import cn from 'classnames' import cn from 'classnames'
import { FunctionComponent } from 'react' import { FC } from 'react'
import s from './Layout.module.css' import s from './Layout.module.css'
import { Navbar, Featurebar } from '@components/core' import { Navbar, Featurebar } from '@components/core'
import { Container, Sidebar } from '@components/ui' import { Container, Sidebar } from '@components/ui'
@ -11,7 +11,7 @@ interface Props {
children?: any children?: any
} }
const CoreLayout: FunctionComponent<Props> = ({ className, children }) => { const CoreLayout: FC<Props> = ({ className, children }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
const { displaySidebar } = useUI() const { displaySidebar } = useUI()
@ -34,7 +34,7 @@ const CoreLayout: FunctionComponent<Props> = ({ className, children }) => {
) )
} }
const Layout: FunctionComponent<Props> = (props) => ( const Layout: FC<Props> = (props) => (
<UIProvider> <UIProvider>
<CoreLayout {...props} /> <CoreLayout {...props} />
</UIProvider> </UIProvider>

View File

@ -1,5 +1,5 @@
import cn from 'classnames' import cn from 'classnames'
import React, { FunctionComponent } from 'react' import React, { FC } from 'react'
import s from './Navbar.module.css' import s from './Navbar.module.css'
import { Logo, Container } from '@components/ui' import { Logo, Container } from '@components/ui'
import { Searchbar } from '@components/core' import { Searchbar } from '@components/core'
@ -8,7 +8,7 @@ interface Props {
className?: string className?: string
} }
const Navbar: FunctionComponent<Props> = ({ className }) => { const Navbar: FC<Props> = ({ className }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
return ( return (
<Container className={rootClassName}> <Container className={rootClassName}>

View File

@ -1,5 +1,5 @@
import cn from 'classnames' import cn from 'classnames'
import React, { FunctionComponent } from 'react' import React, { FC } from 'react'
import s from './Searchbar.module.css' import s from './Searchbar.module.css'
interface Props { interface Props {
@ -7,7 +7,7 @@ interface Props {
children?: any children?: any
} }
const Searchbar: FunctionComponent<Props> = ({ className }) => { const Searchbar: FC<Props> = ({ className }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
return ( return (
<div className={rootClassName}> <div className={rootClassName}>

View File

@ -1,5 +1,5 @@
import cn from 'classnames' import cn from 'classnames'
import React, { FunctionComponent } from 'react' import React, { FC } from 'react'
import s from './UserNav.module.css' import s from './UserNav.module.css'
import { Avatar } from '@components/core' import { Avatar } from '@components/core'
import { Heart, Bag } from '@components/icon' import { Heart, Bag } from '@components/icon'
@ -9,7 +9,7 @@ interface Props {
className?: string className?: string
} }
const UserNav: FunctionComponent<Props> = ({ className }) => { const UserNav: FC<Props> = ({ className }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
const { openSidebar } = useUI() const { openSidebar } = useUI()

View File

@ -1,13 +1,13 @@
import cn from 'classnames' import cn from 'classnames'
import s from './ProductCard.module.css' import s from './ProductCard.module.css'
import React, { FunctionComponent } from 'react' import React, { FC } from 'react'
import { Heart } from '@components/icon' import { Heart } from '@components/icon'
interface Props { interface Props {
className?: string className?: string
children?: any children?: any
} }
const ProductCard: FunctionComponent<Props> = ({ className }) => { const ProductCard: FC<Props> = ({ className }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
return ( return (
<div className={rootClassName}> <div className={rootClassName}>

View File

@ -1,5 +1,5 @@
import cn from 'classnames' import cn from 'classnames'
import React, { FunctionComponent } from 'react' import React, { FC } from 'react'
import s from './ProductGrid.module.css' import s from './ProductGrid.module.css'
import ProductCard from '@components/ProductCard' import ProductCard from '@components/ProductCard'
interface Props { interface Props {
@ -8,7 +8,7 @@ interface Props {
products: [any] products: [any]
} }
const ProductView: FunctionComponent<Props> = ({ products, className }) => { const ProductView: FC<Props> = ({ products, className }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
return ( return (
<div className={rootClassName}> <div className={rootClassName}>

View File

@ -1,5 +1,5 @@
import cn from 'classnames' import cn from 'classnames'
import React, { FunctionComponent } from 'react' import React, { FC } from 'react'
import s from './ProductView.module.css' import s from './ProductView.module.css'
import { Button } from '@components/ui' import { Button } from '@components/ui'
import { Swatch } from '@components/product' import { Swatch } from '@components/product'
@ -10,7 +10,7 @@ interface Props {
productData: ProductData productData: ProductData
} }
const ProductView: FunctionComponent<Props> = ({ productData, className }) => { const ProductView: FC<Props> = ({ productData, className }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
console.log(productData) console.log(productData)
return ( return (

View File

@ -1,5 +1,5 @@
import cn from 'classnames' import cn from 'classnames'
import React, { FunctionComponent } from 'react' import React, { FC } from 'react'
import s from './Swatch.module.css' import s from './Swatch.module.css'
import { Colors } from '@components/ui/types' import { Colors } from '@components/ui/types'
@ -11,12 +11,7 @@ interface Props {
size?: string size?: string
} }
const Swatch: FunctionComponent<Props> = ({ const Swatch: FC<Props> = ({ className, size, color, active }) => {
className,
size,
color,
active,
}) => {
const rootClassName = cn( const rootClassName = cn(
s.root, s.root,
{ {

View File

@ -1,9 +1,4 @@
import React, { import React, { FC, MutableRefObject, useEffect, useRef } from 'react'
FunctionComponent,
MutableRefObject,
useEffect,
useRef,
} from 'react'
import { Component } from 'react' import { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'

View File

@ -1,5 +1,5 @@
import cn from 'classnames' import cn from 'classnames'
import { FunctionComponent } from 'react' import { FC } from 'react'
import s from './Container.module.css' import s from './Container.module.css'
interface Props { interface Props {
@ -8,11 +8,7 @@ interface Props {
el?: HTMLElement el?: HTMLElement
} }
const Container: FunctionComponent<Props> = ({ const Container: FC<Props> = ({ children, className, el = 'div' }) => {
children,
className,
el = 'div',
}) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
let Component: React.ComponentType<React.HTMLAttributes< let Component: React.ComponentType<React.HTMLAttributes<

View File

@ -1,5 +1,5 @@
import cn from 'classnames' import cn from 'classnames'
import React, { FunctionComponent } from 'react' import React, { FC } from 'react'
import s from './Sidebar.module.css' import s from './Sidebar.module.css'
interface Props { interface Props {
@ -7,7 +7,7 @@ interface Props {
children?: any children?: any
} }
const Sidebar: FunctionComponent<Props> = ({ className, children }) => { const Sidebar: FC<Props> = ({ className, children }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
return ( return (
<div className={rootClassName}> <div className={rootClassName}>

View File

@ -1,5 +1,5 @@
import cn from 'classnames' import cn from 'classnames'
import { FunctionComponent } from 'react' import { FC } from 'react'
import s from './Featurebar.module.css' import s from './Featurebar.module.css'
interface Props { interface Props {
@ -7,7 +7,7 @@ interface Props {
children?: any children?: any
} }
const Featurebar: FunctionComponent<Props> = ({ children, className }) => { const Featurebar: FC<Props> = ({ children, className }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
return <div className={rootClassName}>{children}</div> return <div className={rootClassName}>{children}</div>
} }

View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react' import React, { FC } from 'react'
export interface UIState { export interface UIState {
displaySidebar: boolean displaySidebar: boolean
@ -15,7 +15,7 @@ const initialState = {
export const UIContext = React.createContext(initialState) export const UIContext = React.createContext(initialState)
UIContext.displayName = 'UIContext' UIContext.displayName = 'UIContext'
export const UIProvider: FunctionComponent = (props) => { export const UIProvider: FC = (props) => {
const [state, dispatch] = React.useReducer(uiReducer, initialState) const [state, dispatch] = React.useReducer(uiReducer, initialState)
const openSidebar = () => dispatch('OPEN_SIDEBAR') const openSidebar = () => dispatch('OPEN_SIDEBAR')