v1.0.0-canary.2

app/CHANGELOG.md

@@ -0,0 +1,11 @@
+## 1.0.0-canary.1 - 2019-09-2019
+
+This is basically our (first) public-facing v1.0.0. This section are specifically for internal team.
+For the detailed changes, will write it on our [Medium blog](https://medium.com/evilfactorylabs).
+Stay tune.
+
+### Major Changes
+
+- Create, Read, Update, and Delete Subscription
+- Update user name
+- First version Onboarding scren

app/now.canary.json

@@ -20,9 +20,9 @@
     { "src": "/manifest.json", "dest": "/manifest.json" },
     { "src": "/precache-manifest.(.*)", "dest": "/precache-manifest.$1" },
     {
-      "src": "/service-worker.js",
+      "src": "/sw.js",
       "headers": { "cache-control": "s-maxage=0" },
-      "dest": "/service-worker.js"
+      "dest": "/sw.js"
     },
     {
       "src": "/(.*)",

app/now.json

@@ -20,9 +20,9 @@
     { "src": "/manifest.json", "dest": "/manifest.json" },
     { "src": "/precache-manifest.(.*)", "dest": "/precache-manifest.$1" },
     {
-      "src": "/service-worker.js",
+      "src": "/sw.js",
       "headers": { "cache-control": "s-maxage=0" },
-      "dest": "/service-worker.js"
+      "dest": "/sw.js"
     },
     {
       "src": "/(.*)",

app/public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#2c387e" />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"

app/src/components/Detail.js

@@ -8,13 +8,7 @@ import {
   Menu,
   MenuItem,
   CardHeader,
-  IconButton,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle
+  IconButton
 } from '@material-ui/core'
 
 import MoreVertIcon from '@material-ui/icons/MoreVert'
@@ -38,29 +32,7 @@ const useStyles = makeStyles({
   }
 })
 
-const AlertDialog = ({
-  isDialogOpen,
-  handleClose,
-  subscriptionTitle,
-  handleDelete
-}) => (
-  <div>
-    <Dialog open={isDialogOpen} onClose={handleClose}>
-      <DialogTitle>Hapus {subscriptionTitle}?</DialogTitle>
-      <DialogContent>
-        <DialogContentText id='alert-dialog-description'>
-          Apakah kamu yakin ingin menghapus subscription ini?
-        </DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={handleClose} color='primary' autoFocus>
-          Kembali
-        </Button>
-        <Button onClick={handleDelete}>Hapus</Button>
-      </DialogActions>
-    </Dialog>
-  </div>
-)
+const Dialog = React.lazy(() => import('./Dialog'))
 
 export default ({ subscription, handleDelete }) => {
   const classes = useStyles()
@@ -112,13 +84,17 @@ export default ({ subscription, handleDelete }) => {
           Sejak {dayjs(subscription.firstBill).format('DD MMMM YYYY')}
         </Typography>
       </CardContent>
-      <AlertDialog
-        subscriptionId={subscription._id}
-        subscriptionTitle={subscription.title}
-        handleDelete={handleDelete}
-        handleClose={handleCloseDialog}
-        isDialogOpen={isDialogOpen}
-      />
+      {isDialogOpen && (
+        <Dialog
+          title={`Hapus ${subscription.title}?`}
+          action='Hapus'
+          isDialogOpen={isDialogOpen}
+          handleAction={handleDelete}
+          handleClose={handleCloseDialog}
+        >
+          Apakah kamu yakin ingin menghapus subscription ini?
+        </Dialog>
+      )}
     </Card>
   )
 }

app/src/components/Detail.test.js

@@ -7,13 +7,15 @@ afterAll(async () => {
 describe('Fragments: Detail.js', () => {
   test('It should render Detail screen', () => {
     const subscription = {
-      title: 'Spotify'
+      title: 'Spotify',
+      firstBill: new Date(1565370000000)
     }
     const handleDelete = () => {}
     const { container } = render(
       <Detail handleDelete={handleDelete} subscription={subscription} />
     )
 
     expect(container).toBeInTheDocument()
+    expect(container).toMatchSnapshot()
   })
 })

app/src/components/Dialog.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import {
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions
+} from '@material-ui/core'
+
+export default ({
+  isDialogOpen,
+  handleAction,
+  handleClose,
+  title,
+  action,
+  children
+}) => (
+  <Dialog open={isDialogOpen} onClose={handleClose}>
+    <DialogTitle>{title}</DialogTitle>
+    <DialogContent>
+      <DialogContentText>{children}</DialogContentText>
+    </DialogContent>
+    <DialogActions>
+      <Button onClick={handleClose} color='primary' autoFocus>
+        Batal
+      </Button>
+      <Button onClick={handleAction}>{action}</Button>
+    </DialogActions>
+  </Dialog>
+)

app/src/components/Dialog.test.js

@@ -0,0 +1,16 @@
+import Dialog from './Dialog'
+
+it('should render correctly', () => {
+  const { container } = render(
+    <Dialog
+      isDialogOpen={true}
+      handleAction={() => {}}
+      handleClose={() => {}}
+      title='Dialog title'
+      action={() => {}}
+    />
+  )
+
+  expect(container).toBeInTheDocument()
+  expect(container).toMatchSnapshot()
+})

app/src/components/Edit.test.js

@@ -7,7 +7,7 @@ afterAll(async () => {
 describe('Fragments: Edit.js', () => {
   test('It should render Edit screen', () => {
     const updateSubscription = () => {}
-    const subscription = { title: 'Spotify' }
+    const subscription = { title: 'Spotify', firstBill: 1565370000000 }
     const { container } = render(
       <Edit
         updateSubscription={updateSubscription}
@@ -16,5 +16,6 @@ describe('Fragments: Edit.js', () => {
     )
 
     expect(container).toBeInTheDocument()
+    expect(container).toMatchSnapshot()
   })
 })

app/src/components/Lazy.js

@@ -1,7 +1,7 @@
 import React, { Suspense } from 'react'
 import LinearProgress from '@material-ui/core/LinearProgress'
 
-function Loading() {
+export function Loading() {
   return (
     <LinearProgress
       style={{

app/src/components/Lazy.test.js

@@ -9,5 +9,6 @@ describe('Fragments: Lazy.js', () => {
     const { container } = render(<LazyNavbar component='./Navbar' />)
 
     expect(container).toBeInTheDocument()
+    expect(container).toMatchSnapshot()
   })
 })

app/src/components/Navbar.js

@@ -48,21 +48,25 @@ const useStyles = makeStyles(theme => ({
   },
   logoType: {
     float: 'left',
-    width: 160
+    width: 120
   }
 }))
 
-export default ({ shouldUseBackIcon }) => {
+export default ({ path = '/' }) => {
   const classes = useStyles()
   const userId = getUserIdFromLS()
+
+  const [shouldUseBackIcon, setShouldUseBackButton] = useState(false)
   const [drawerOpen, setDrawerOpen] = useState(false)
   const [user, setUser] = useState({})
 
   useEffect(() => {
     getUser(userId).then(user => {
       setUser(user)
     })
-  }, [userId])
+
+    setShouldUseBackButton(path !== '/')
+  }, [userId, path])
 
   const handleClick = () => {
     if (shouldUseBackIcon) {

app/src/components/Navbar.test.js

@@ -9,5 +9,6 @@ describe('Fragments: Navbar.js', () => {
     const { container } = render(<Navbar />)
 
     expect(container).toBeInTheDocument()
+    expect(container).toMatchSnapshot()
   })
 })

app/src/components/Pick.test.js

@@ -18,5 +18,6 @@ describe('Fragments: Pick.js', () => {
     )
 
     expect(container).toBeInTheDocument()
+    expect(container).toMatchSnapshot()
   })
 })

app/src/components/Setting.js

@@ -16,6 +16,7 @@ import {
 
 import { deepOrange } from '@material-ui/core/colors'
 import { makeStyles } from '@material-ui/core/styles'
+import { deleteAllDatas } from 'services/internal'
 
 const useStyles = makeStyles(theme => ({
   avatar: {
@@ -33,11 +34,17 @@ const useStyles = makeStyles(theme => ({
     marginLeft: 'auto',
     marginRight: theme.spacing(1),
     marginBottom: theme.spacing(1)
+  },
+  button: {
+    marginTop: theme.spacing(2)
   }
 }))
 
+const Dialog = React.lazy(() => import('./Dialog'))
+
 export default ({ user, updateUser }) => {
   const classes = useStyles()
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [snackbarOpen, setSnackbarOpen] = useState(false)
   const [userName, setUserName] = useState('')
 
@@ -51,6 +58,22 @@ export default ({ user, updateUser }) => {
       })
   }
 
+  const handleCloseDialog = () => {
+    setIsDialogOpen(false)
+  }
+
+  const handleDeleteAllDatas = () => {
+    deleteAllDatas()
+      .then(deleted => {
+        if (deleted) {
+          window.location.href = '/'
+        }
+      })
+      .catch(err => {
+        window.alert('Ada kesalahan saat menghapus data', String(err))
+      })
+  }
+
   useEffect(() => {
     setUserName(user.name)
   }, [user])
@@ -91,6 +114,12 @@ export default ({ user, updateUser }) => {
             onChange={e => setUserName(e.target.value)}
             fullWidth={true}
           />
+          <Button
+            onClick={() => setIsDialogOpen(true)}
+            className={classes.button}
+          >
+            Hapus Semua Data
+          </Button>
         </CardContent>
         <CardActions>
           <Button
@@ -124,6 +153,20 @@ export default ({ user, updateUser }) => {
           </IconButton>
         ]}
       />
+      {isDialogOpen && (
+        <Dialog
+          title='Apakah kamu yakin?'
+          action='Hapus Data'
+          isDialogOpen={isDialogOpen}
+          handleAction={handleDeleteAllDatas}
+          handleClose={handleCloseDialog}
+        >
+          <p>
+            Dengan melakukan ini semua data termasuk pengguna dan subscriptions
+            kamu akan dihapus <strong>selamanya</strong>.
+          </p>
+        </Dialog>
+      )}
     </>
   )
 }

app/src/components/Setting.test.js

@@ -15,5 +15,6 @@ describe('Fragments: Setting.js', () => {
     )
 
     expect(container).toBeInTheDocument()
+    expect(container).toMatchSnapshot()
   })
 })