import React from 'react';
import Layout from '../../components/Layout';
import SettingsVendor from '../../components/Settings/Vendor';
import SettingsUser from '../../components/Settings/User';
import { userTypes } from '../../constants';

const title = 'Settings';

async function action({ fetch }) {
  const resp = await fetch('/graphql', {
    body: JSON.stringify({
      query: '{me{type}}',
    }),
  });
  const { data } = await resp.json();
  if (!data || !data.me) {
    throw new Error('Unable to fetch account data');
  }

  if (data.me.type === userTypes.vendor) {
    return {
      chunks: ['settings'],
      title,
      component: (
        <Layout>
          <SettingsVendor />
        </Layout>
      ),
    };
  } else if (data.me.type === userTypes.user) {
    return {
      chunks: ['settings'],
      title,
      component: (
        <Layout>
          <SettingsUser />
        </Layout>
      ),
    };
  }
  throw new Error('User account type is invalid.  Please contact support.');
}

export default action;

@@ -528,16 +528,28 @@
 );%0A  %7D%0A%0A
+  let page;%0A
   if (da
@@ -591,79 +591,17 @@
     
-return %7B%0A      chunks: %5B'settings'%5D,%0A      title,%0A      component:
+page =
  (%0A
-  
     
@@ -611,34 +611,32 @@
 Layout%3E%0A        
-  
 %3CSettingsVendor 
@@ -636,34 +636,32 @@
 Vendor /%3E%0A      
-  
 %3C/Layout%3E%0A      
@@ -654,34 +654,25 @@
 Layout%3E%0A    
-  ),%0A    %7D
+)
 ;%0A  %7D else i
@@ -717,79 +717,17 @@
     
-return %7B%0A      chunks: %5B'settings'%5D,%0A      title,%0A      component:
+page =
  (%0A
-  
     
@@ -741,26 +741,24 @@
 ut%3E%0A        
-  
 %3CSettingsUse
@@ -764,26 +764,24 @@
 er /%3E%0A      
-  
 %3C/Layout%3E%0A  
@@ -782,28 +782,28 @@
 ut%3E%0A
-  
     )
-,%0A    %7D;
+;%0A  %7D else %7B
 %0A  
-%7D%0A
   th
@@ -875,16 +875,95 @@
 ort.');%0A
+  %7D%0A%0A  return %7B%0A    chunks: %5B'settings'%5D,%0A    title,%0A    component: page,%0A  %7D;%0A
 %7D%0A%0Aexpor

Refactor settings index.js