cleaned up code, added babel styled-component due to vercel/next.js#7322

ikendoit · Jan 2, 2022 · f1dc855 · f1dc855
1 parent a66a3bc
commit f1dc855
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 11 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+    "presets": ["next/babel"],
+    "plugins": [["styled-components", { "ssr": true }]]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "@ant-design/icons": "^4.7.0",
     "antd": "^4.17.2",
     "aws-amplify": "^4.3.10",
+    "babel-plugin-styled-components": "^2.0.2",
     "next": "12.0.4",
     "phaser": "^3.55.2",
     "react": "17.0.2",

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,8 +1,5 @@
 import React from 'react'
 import { Button, message } from 'antd'
-import {
-  CopyOutlined, TeamOutlined, UserOutlined
-} from '@ant-design/icons';
 import Head from 'next/head'
 import Image from 'next/image'
 import styles from '../styles/Home.module.css'

diff --git a/ui-components/Constants.tsx b/ui-components/Constants.tsx
@@ -33,7 +33,7 @@ export const DEFAULT_TAB_GROUP: HydratedTabGroupUnLocked = {
     ]
   },
   {
-    tabTitle: "Cost tracking",
+    tabTitle: "Cost-tracking",
     tabContent: [{
         link: 'https://github.com/ikendoit',
         title: 'Water Report',

diff --git a/ui-components/HeaderBarComponent.tsx b/ui-components/HeaderBarComponent.tsx
@@ -1,4 +1,4 @@
-import React, { MutableRefObject, Ref } from 'react'
+import React, { Ref } from 'react'
 import styles from '../styles/Home.module.css'
 import { Input, Button, message, Modal } from 'antd'
 import {

diff --git a/ui-components/TabGroupShowWindowOrganization.tsx b/ui-components/TabGroupShowWindowOrganization.tsx
@@ -57,6 +57,7 @@ const TabGroupShowWindowOrganization: React.FC<TabGroupShowWindowOrganizationPro
                   style={{width: '60%'}}
                   id={`${ID_INPUT_FIELD_ATTRIBUTE_EDIT}__${record.key}`}
                   defaultValue={text}
+                  onPressEnter={() => onEdit(null, 'updateRecordAttribute')}
                   prefix={
                     <div> 
                       <span 
@@ -92,6 +93,7 @@ const TabGroupShowWindowOrganization: React.FC<TabGroupShowWindowOrganizationPro
                 <Input 
                   style={{width: '60%'}}
                   id={`${ID_INPUT_FIELD_ATTRIBUTE_EDIT}__${record.key}`}
+                  onPressEnter={() => onEdit(null, 'updateRecordAttribute')}
                   defaultValue={text}
                   prefix={
                     <div> 
@@ -242,6 +244,7 @@ const TabGroupShowWindowOrganization: React.FC<TabGroupShowWindowOrganizationPro
                 <Input 
                   style={{width: '60%'}}
                   id={`${ID_INPUT_TAB_PANE_ATTRIBUTE_EDIT}__${paneIndex}`}
+                  onPressEnter={() => onEdit(null, 'updateTabPaneTitle')}
                   defaultValue={pane.tabTitle}
                   prefix={
                     <div> 

diff --git a/ui-components/UnlockRequiredComponent.tsx b/ui-components/UnlockRequiredComponent.tsx
@@ -1,11 +1,12 @@
 import styles from '../styles/Home.module.css'
 import Head from 'next/head'
 import Image from 'next/image'
-import { Button, Input, message } from 'antd'
+import { Input, message } from 'antd'
 import {
-  CopyOutlined, TeamOutlined, UnlockOutlined 
+  UnlockOutlined 
 } from '@ant-design/icons';
 import {decryptData, PaneWindowsTab} from '../types/ui-components/index'
+import HeaderBarComponent from './HeaderBarComponent';
 
 const { Search } = Input;
 const passwordInputSuffix = (
@@ -72,10 +73,13 @@ function UnlockRequiredComponent(props: UnlockRequiredComponentProps) {
         <meta name="description" content="Many Windows, Tool to manage and open multiple websites organized on your whole screen" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div className={styles.header_menu}>
-        <Button className={`${styles.header_menu_button} ${styles.disabled_button}`}><CopyOutlined /> Save this group</Button>
-        <Button className={`${styles.header_menu_button} ${styles.disabled_button}`}><TeamOutlined /> Make Public</Button>
-      </div>
+      <HeaderBarComponent
+        changeVisibility={(visibility: "PUBLIC" | "PRIVATE") => async (password?: string) => {}}
+        saveThisTabGroup={() => {}}
+        tabGroupIsEncrypted={false}
+        tabGroupIsSavedToCloud={false}
+        tabGroupCanBeSaved={false}
+      />
       <title>Many Windows</title>
       <main className={styles.main}>
         <h1 className={styles.title}>