From a9d3686ccc496044cfdee013ccfbece955793052 Mon Sep 17 00:00:00 2001
From: piotrruss <mail@pruss.it>
Date: Sat, 21 Aug 2021 00:24:01 +0200
Subject: icon focus, notes update timestamp, loading note

---
 pages/index.js  | 26 +++++++++++++++++++++++---
 pages/verify.js |  4 +---
 2 files changed, 24 insertions(+), 6 deletions(-)

(limited to 'pages')

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>
diff --git a/pages/verify.js b/pages/verify.js
index 9d92390..7161d67 100644
--- a/pages/verify.js
+++ b/pages/verify.js
@@ -1,12 +1,10 @@
 import styles from 'styles/Main.module.scss'
-import {useState, useEffect} from 'react'
-import {useRouter} from 'next/router'
+import {useState} from 'react'
 import useUser from 'lib/useUser'
 import fetchJson from 'lib/fetchJson'
 import {Layout} from 'components'
 
 const Verify = () => {
-  const router = useRouter()
   const {user, mutateUser} = useUser({
     redirectToLogin: true,
     redirectToApps: true,
-- 
cgit v1.2.3