change function to anonymous function

Author: osamu38

README.md

@@ -76,7 +76,7 @@ import SubTitle from 'components/SubTitle';
 import UserList from 'components/UserList';
 import { fetchUsers } from 'actions/user';
 
-function HomePage(props) {
+const HomePage = (props) => {
   const {
     state: {
       user: { userList },
@@ -91,7 +91,7 @@ function HomePage(props) {
       <UserList userList={userList} />
     </>
   );
-}
+};
 
 HomePage.loadData = async (ctx) => {
   const {

src/actions/ui.js

@@ -1,14 +1,14 @@
-export function openMenu() {
+export const openMenu = () => {
   return (dispatch) => {
     dispatch({ type: 'OPEN_MENU' });
   };
-}
-export function closeMenu() {
+};
+export const closeMenu = () => {
   return (dispatch) => {
     dispatch({ type: 'CLOSE_MENU' });
   };
-}
-export function showError(error) {
+};
+export const showError = (error) => {
   return (dispatch) => {
     dispatch({
       type: 'SHOW_ERROR',
@@ -17,9 +17,9 @@ export function showError(error) {
       },
     });
   };
-}
-export function hideError() {
+};
+export const hideError = () => {
   return (dispatch) => {
     dispatch({ type: 'HIDE_ERROR' });
   };
-}
+};

src/actions/user.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-export function fetchUser(id) {
+export const fetchUser = (id) => {
   return (dispatch) =>
     axios
       .get(`https://jsonplaceholder.typicode.com/users/${id}`)
@@ -14,8 +14,8 @@ export function fetchUser(id) {
         // eslint-disable-next-line no-console
         console.error(err);
       });
-}
-export function fetchUsers() {
+};
+export const fetchUsers = () => {
   return (dispatch) =>
     axios
       .get('https://jsonplaceholder.typicode.com/users')
@@ -29,4 +29,4 @@ export function fetchUsers() {
         // eslint-disable-next-line no-console
         console.error(err);
       });
-}
+};

src/components/App/index.js

@@ -85,18 +85,18 @@ class App extends React.PureComponent {
     );
   }
 }
-function mapStateToProps(state) {
+const mapStateToProps = (state) => {
   return { state };
-}
-function mapDispatchToProps() {
+};
+const mapDispatchToProps = () => {
   return (dispatch) => ({
     dispatch,
     actions: {
       userActions: bindActionCreators(userActions, dispatch),
       uiActions: bindActionCreators(uiActions, dispatch),
     },
   });
-}
+};
 
 const enhancers = [
   withExtendRouter,

src/components/Container/index.js

@@ -7,8 +7,10 @@ const ContainerUI = styled.div`
   min-height: 100vh;
 `;
 
-export default function Container(props) {
+const Container = (props) => {
   const { children } = props;
 
   return <ContainerUI>{children}</ContainerUI>;
-}
+};
+
+export default Container;

src/components/Error/index.js

@@ -24,7 +24,7 @@ const ErrorUI = styled.div`
   animation: ${flash} 4s ease;
 `;
 
-export default function Error(props) {
+const Error = (props) => {
   const { hideError, children } = props;
 
   return (
@@ -36,4 +36,6 @@ export default function Error(props) {
       {children}
     </ErrorUI>
   );
-}
+};
+
+export default Error;

src/components/Footer/index.js

@@ -16,6 +16,8 @@ const FooterUI = styled.div`
   line-height: 32px;
 `;
 
-export default function Footer() {
+const Footer = () => {
   return <FooterUI>© 2018 osamu38</FooterUI>;
-}
+};
+
+export default Footer;

src/components/Header/index.js

@@ -34,7 +34,7 @@ const StyledOctIcon = styled(OctIcon)`
   margin-right: 12px;
 `;
 
-export default function Header(props) {
+const Header = (props) => {
   const { isOpenMenu, openMenu, closeMenu } = props;
 
   return (
@@ -55,4 +55,6 @@ export default function Header(props) {
       </HeaderUI>
     </HeaderContainer>
   );
-}
+};
+
+export default Header;

src/components/Logo/index.js

@@ -11,10 +11,12 @@ const LogoUI = styled.a`
   line-height: 32px;
 `;
 
-export default function Logo() {
+const Logo = () => {
   return (
     <PreloadLink href={endpoint.home}>
       <LogoUI>React SSR Starter</LogoUI>
     </PreloadLink>
   );
-}
+};
+
+export default Logo;

src/components/Main/index.js

@@ -9,8 +9,10 @@ const MainUI = styled.div`
   max-width: ${sizes.width.main + spaces.main * 2}px;
 `;
 
-export default function Main(props) {
+const Main = (props) => {
   const { children } = props;
 
   return <MainUI>{children}</MainUI>;
-}
+};
+
+export default Main;

src/components/Menu/index.js

@@ -42,7 +42,7 @@ const MenuLinkList = [
   },
 ];
 
-export default function Menu(props) {
+const Menu = (props) => {
   const { isOpenMenu } = props;
 
   return isOpenMenu ? (
@@ -54,4 +54,6 @@ export default function Menu(props) {
       ))}
     </MenuUI>
   ) : null;
-}
+};
+
+export default Menu;

src/components/MenuIcon/index.js

@@ -9,7 +9,7 @@ const MenuIconUI = styled.img`
   width: 32px;
 `;
 
-export default function MenuIcon(props) {
+const MenuIcon = (props) => {
   const { isOpenMenu, openMenu, closeMenu } = props;
 
   return (
@@ -25,4 +25,6 @@ export default function MenuIcon(props) {
       <MenuIconUI src="/static/images/svg/menu-icon.svg" alt="menu-icon" />
     </MenuIconWrapper>
   );
-}
+};
+
+export default MenuIcon;

src/components/OctIcon/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function OctIcon(props) {
+const OctIcon = (props) => {
   const { className } = props;
 
   return (
@@ -13,4 +13,6 @@ export default function OctIcon(props) {
       <img src="/static/images/svg/oct-icon.svg" alt="oct-icon" />
     </a>
   );
-}
+};
+
+export default OctIcon;

src/components/PreloadLink/index.js

@@ -4,16 +4,16 @@ import { connect } from 'react-redux';
 import withExtendRouter from 'components/withExtendRouter';
 import customPush from 'utils/customPush';
 
-function mapStateToProps(state) {
+const mapStateToProps = (state) => {
   return { state };
-}
-function mapDispatchToProps() {
+};
+const mapDispatchToProps = () => {
   return (dispatch) => ({
     dispatch,
   });
-}
+};
 
-function PreloadLink(props) {
+const PreloadLink = (props) => {
   const {
     href,
     children,
@@ -29,7 +29,7 @@ function PreloadLink(props) {
       await customPush(href, push, dispatch, state);
     },
   });
-}
+};
 
 const enhancers = [
   withExtendRouter,

src/components/StackList/index.js

@@ -90,7 +90,7 @@ const stackData = [
   },
 ];
 
-export default function StackList() {
+const StackList = () => {
   return (
     <StackListUI>
       {stackData.map((item, i) => (
@@ -102,4 +102,6 @@ export default function StackList() {
       ))}
     </StackListUI>
   );
-}
+};
+
+export default StackList;

src/components/SubTitle/index.js

@@ -9,8 +9,10 @@ const SubTitleUI = styled.div`
   color: ${colors.darkGray};
 `;
 
-export default function SubTitle(props) {
+const SubTitle = (props) => {
   const { children } = props;
 
   return <SubTitleUI>{children}</SubTitleUI>;
-}
+};
+
+export default SubTitle;

src/components/Title/index.js

@@ -9,8 +9,10 @@ const TitleUI = styled.h1`
   color: ${colors.accent};
 `;
 
-export default function Title(props) {
+const Title = (props) => {
   const { children } = props;
 
   return <TitleUI>{children}</TitleUI>;
-}
+};
+
+export default Title;

src/components/UserDetail/index.js

@@ -12,7 +12,7 @@ const UserDetailInner = styled.div`
   border: 1px ${colors.superLightGray} solid;
 `;
 
-export default function UserDetail(props) {
+const UserDetail = (props) => {
   const {
     user: {
       id,
@@ -55,4 +55,6 @@ export default function UserDetail(props) {
       </UserDetailInner>
     </UserDetailUI>
   );
-}
+};
+
+export default UserDetail;

src/components/UserList/index.js

@@ -60,7 +60,7 @@ const UserListLink = styled.a`
   }
 `;
 
-export default function UserList(props) {
+const UserList = (props) => {
   const { userList } = props;
 
   return (
@@ -74,4 +74,6 @@ export default function UserList(props) {
       ))}
     </UserListUI>
   );
-}
+};
+
+export default UserList;

src/components/withExtendRouter/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { parse } from 'query-string';
 
-function withExtendRouter(Component) {
+const withExtendRouter = (Component) => {
   const HOC = (props) => {
     const { location } = props;
     const { search } = location;
@@ -13,6 +13,6 @@ function withExtendRouter(Component) {
     return <Component {...props} location={location} />;
   };
   return withRouter(HOC);
-}
+};
 
 export default withExtendRouter;

src/pages/about/index.js

@@ -4,7 +4,7 @@ import Title from 'components/Title';
 import SubTitle from 'components/SubTitle';
 import StackList from 'components/StackList';
 
-export default function AboutPage() {
+const AboutPage = () => {
   return (
     <>
       <Helmet title="About" />
@@ -13,4 +13,6 @@ export default function AboutPage() {
       <StackList />
     </>
   );
-}
+};
+
+export default AboutPage;

src/pages/home/index.js

@@ -5,7 +5,7 @@ import SubTitle from 'components/SubTitle';
 import UserList from 'components/UserList';
 import { fetchUsers } from 'actions/user';
 
-function HomePage(props) {
+const HomePage = (props) => {
   const {
     state: {
       user: { userList },
@@ -20,7 +20,7 @@ function HomePage(props) {
       <UserList userList={userList} />
     </>
   );
-}
+};
 
 HomePage.loadData = (ctx) => {
   const {