Setup ES and TS versions of project

Author: modularcoder

package-lock.json

@@ -6,12 +6,19 @@
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
-    "eject": "react-scripts eject",
     "deploy": "npm run build-preview && npm run build-docs && gh-pages -d build --repo git@github.com:modularcode/modular-admin-react.git --branch gh-pages",
+
     "build-preview": "cross-env PUBLIC_PATH='/' npm run build && echo modular-admin-react.modularcode.io > ./build/CNAME",
     "build-docs": "build-storybook --docs -s ./public -o build/docs",
     "build-storybook": "build-storybook",
-    "storybook": "start-storybook -p 6060"
+    "storybook": "start-storybook -p 6060",
+
+    "es:init": "npm run es:clean && npm run es:build && npm run es:prettify",
+    "es:clean": "rimraf src-es/",
+    "es:build": "tsc --project ./tsconfig.to-es.json",
+    "es:prettify": "prettier --config ./.prettierrc.js --write \"src-es/**/*.(js|jsx)\"",
+
+    "eject": "react-scripts eject"
   },
   "homepage": "http://modular-admin-react.modularcode.io",
   "dependencies": {
@@ -63,6 +70,7 @@
     "prettier": "2.2.1",
     "react-app-rewired": "^2.1.8",
     "react-docgen-typescript-loader": "^3.7.2",
+    "rimraf": "^3.0.2",
     "ts-loader": "^9.1.1"
   },
   "eslintConfig": {

package.json

@@ -0,0 +1 @@
+src-ts

src

@@ -0,0 +1 @@
+'use strict'

src-es/Account/Account.js

@@ -0,0 +1,4 @@
+const ProfileModule = {
+  init() {},
+}
+export default ProfileModule

src-es/Account/Profile/index.js

@@ -0,0 +1,4 @@
+const AccountModule = {
+  init() {},
+}
+export default AccountModule

src-es/Account/index.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Route } from 'react-router-dom'
+import UsersList from './Users/UsersList'
+import UserEditor from './Users/UsersEditor/UsersEditor'
+const Administration = ({ match }) => {
+  return (
+    <>
+      <Route exact path={`${match.path}/users`} component={UsersList} />
+      <Route
+        path={`${match.path}/users/new`}
+        render={(props) => <UserEditor {...props} />}
+      />
+      <Route
+        path={`${match.path}/users/:userId/edit`}
+        render={(props) => (
+          <UserEditor {...props} userId={parseInt(props.match.params.userId)} />
+        )}
+      />
+    </>
+  )
+}
+Administration.propTypes = {}
+export default Administration

src-es/Administration/Administration.js

@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import api from '@/_api'
+import BasePageContainer from '@/_common/BasePageContainer'
+import BasePageToolbar from '@/_common/BasePageToolbar'
+import { Save as SaveIcon } from '@material-ui/icons/'
+import {
+  Input,
+  Select,
+  MenuItem,
+  Paper,
+  Button,
+  FormControl,
+  InputLabel,
+  makeStyles,
+  Grid,
+} from '@material-ui/core'
+const UserEditor = (props) => {
+  const classes = useStyles()
+  const { userId } = props
+  const [user, setUser] = useState({
+    avatarUrl: '',
+    email: '',
+    firstName: '',
+    globalRole: '',
+    lastName: '',
+    userToOrganizations: [{}],
+    username: '',
+  })
+  useEffect(() => {
+    if (!userId) {
+      return
+    }
+    async function fetchUser() {
+      try {
+        const userDataRes = await api.users.getOne(userId)
+        setUser(userDataRes)
+      } catch (err) {
+        console.log('error', err.message)
+      }
+    }
+    fetchUser()
+  }, [userId])
+  const onChangeHandler = (e) =>
+    setUser({
+      ...user,
+      [e.target.name]: e.target.value,
+    })
+  const setGlobalRole = (e) =>
+    setUser({
+      ...user,
+      globalRole: e.target.value,
+    })
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    try {
+      if (userId) {
+        await api.users.update(userId, user)
+      } else {
+        await api.users.create(user)
+      }
+    } catch (e) {
+      console.log(e)
+    }
+  }
+  return (
+    <BasePageContainer>
+      <BasePageToolbar title={'Edit user'}></BasePageToolbar>
+      <Grid container xs={12} component={Paper} className={classes.box}>
+        <form onSubmit={handleSubmit}>
+          <FormControl className={classes.control}>
+            <InputLabel>First Name</InputLabel>
+            <Input
+              value={user.firstName}
+              name="firstName"
+              className={classes.width}
+              onChange={(e) => onChangeHandler(e)}
+            />
+          </FormControl>
+          <FormControl className={classes.control}>
+            <InputLabel>Last Name</InputLabel>
+            <Input
+              value={user.lastName}
+              name="lastName"
+              className={classes.width}
+              onChange={(e) => onChangeHandler(e)}
+            />
+          </FormControl>
+          <FormControl className={classes.control}>
+            <InputLabel>User Name</InputLabel>
+            <Input
+              value={user.username}
+              name="username"
+              className={classes.width}
+              onChange={(e) => onChangeHandler(e)}
+            />
+          </FormControl>
+          <FormControl className={classes.control}>
+            <InputLabel>Email</InputLabel>
+            <Input
+              value={user.email}
+              name="email"
+              className={classes.width}
+              onChange={(e) => onChangeHandler(e)}
+            />
+          </FormControl>
+          <FormControl className={classes.control}>
+            <InputLabel>Global Role</InputLabel>
+            <Select
+              labelId="Set Global Role"
+              id="globalRole"
+              value={user.globalRole}
+              onChange={setGlobalRole}
+              className={classes.width}
+            >
+              <MenuItem value={user.globalRole}>{user.globalRole}</MenuItem>
+              <MenuItem value="user">user</MenuItem>
+              <MenuItem value="support">support</MenuItem>
+            </Select>
+          </FormControl>
+          <Button
+            variant="contained"
+            color="primary"
+            type="submit"
+            className={`${classes.margin} ${classes.width}`}
+            startIcon={<SaveIcon />}
+          >
+            Edit User
+          </Button>
+        </form>
+      </Grid>
+    </BasePageContainer>
+  )
+}
+UserEditor.propTypes = {
+  userId: PropTypes.number,
+}
+const useStyles = makeStyles((theme) => ({
+  box: {
+    padding: 16,
+  },
+  control: {
+    display: 'block',
+    marginTop: 16,
+  },
+  margin: {
+    marginTop: 16,
+  },
+  width: {
+    minWidth: 200,
+  },
+}))
+export default UserEditor

src-es/Administration/Users/UsersEditor/UsersEditor.js

@@ -0,0 +1 @@
+'use strict'