cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

use FC instead of FunctionalComponent

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/cart/CartSidebarView/CartSidebarView.tsx
View File

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

4
components/core/Avatar/Avatar.tsx
View File

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

8
components/core/Featurebar/Featurebar.tsx
View File

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

4
components/core/Footer/Footer.tsx
View File

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

6
components/core/Layout/Layout.tsx
View File

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

4
components/core/Navbar/Navbar.tsx
View File

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

4
components/core/Searchbar/Searchbar.tsx
View File

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

4
components/core/UserNav/UserNav.tsx
View File

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

4
components/product/ProductCard/ProductCard.tsx
View File

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

4
components/product/ProductGrid/ProductGrid.tsx
View File

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

4
components/product/ProductView/ProductView.tsx
View File

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

9
components/product/Swatch/Swatch.tsx
View File

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

7
components/ui/ClickOutside/ClickOutside.tsx
View File

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

8
components/ui/Container/Container.tsx
View File

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

4
components/ui/Sidebar/Sidebar.tsx
View File

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

4
components/ui/_BLANK/Featurebar.tsx
View File

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

4
components/ui/context.tsx
View File

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