icon focus, notes update timestamp, loading note

1 files changed, 23 insertions, 3 deletions

diff --git a/pages/index.js b/pages/index.js
index 52421ea..4b420fb 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,5 @@
 import styles from 'styles/Main.module.scss'
-import React, { useState ,useRef } from 'react'
+import React, {useState} from 'react'
 import useUser from 'lib/useUser'
 import {Layout, App} from 'components'
 import {open} from 'helpers/windowActions'
@@ -11,12 +11,30 @@ const appList = {
 
 const Home = () => {
   const [apps, setApps] = useState([])
-  const {mutateUser} = useUser({
+  useUser({
     redirectToLogin: true,
     redirectToVerify: true,
     redirectToApps: true,
   })
 
+  const handleClick = (e, appName) => {
+    switch (e.detail) {
+      case 1:
+        e.currentTarget.focus()
+        break;
+      case 2:
+        open(appName, apps, setApps)
+        e.currentTarget.blur()
+        break;
+    }
+  };
+
+  const handleKey = (e, appName) => {
+    if (e.key === 'Enter') {
+      open(appName, apps, setApps)
+    }
+  }
+
   return (
     <Layout apps={apps} setApps={setApps}>
       <>
@@ -25,7 +43,9 @@ const Home = () => {
             <div
               key={`${appName}_icon`}
               className={styles.icon}
-              onClick={() => open(appName, apps, setApps)}
+              onClick={e => handleClick(e, appName)}
+              onKeyDown={e => handleKey(e, appName)}
+              tabIndex="0"
             >
               <img src={`./${appName.toLowerCase()}.svg`} alt={`${appName} Icon`} />
               <p>{appName}</p>