add open table date in dashboard

src/components/excel/Excel.ts

@@ -1,8 +1,9 @@
 import { Store } from 'core/createStore';
-import { $, Dom } from 'core/dom';
+import { $ } from 'core/dom';
 import { Emitter } from 'core/Emitter';
 import { ExcelComponent } from 'core/ExcelComponent';
 import { StoreSubscriber } from 'core/StoreSubscriber';
+import { updateOpenDate } from 'redux/actions';
 
 interface ExcelOptionsType {
   components: any[],
@@ -10,7 +11,6 @@ interface ExcelOptionsType {
 }
 
 export class Excel {
-  $el: HTMLElement | Dom;
   components: any[];
   emitter: Emitter;
   store: Store;
@@ -47,6 +47,8 @@ export class Excel {
   init() {
     this.subscriber.subscribeComponents(this.components);
     this.components.forEach(component => component.init());
+
+    this.store.dispatch(updateOpenDate(Date.now().toString()));
   }
 
   destroy() {

src/components/header/Header.ts

@@ -1,5 +1,6 @@
 import { $, Dom } from 'core/dom';
 import { ExcelStateComponent } from 'core/ExcelStateComponent';
+import { ActiveRoute } from 'core/routes/ActiveRoute';
 import { deleteTable } from 'redux/actions';
 import * as actions from 'redux/actions';
 
@@ -48,14 +49,12 @@ export class Header extends ExcelStateComponent {
 
     switch (btnEvent) {
       case 'exit': {
-        window.location.hash = '';
+        ActiveRoute.navigateTo = '';
         break;
       }
 
       case 'delete-table': {
-        this.$dispatch(deleteTable(this.store.getState().id));
+        confirm('Действительно хочешь удалить ?') && this.$dispatch(deleteTable(this.store.getState().id));
-        console.log('THIS', this);
-        this.destroy();
         break;
       }
 

src/constants.ts

@@ -19,5 +19,6 @@ export function getNormalizeInitialState(params: string): StateType {
     ...storage(`excel:${params}`),
     currentStyles: { ...storage(`excel:${params}`)?.stylesState?.['0:0'] },
     id: params,
+    openDate: Date.now(),
   };
 }

src/core/ExcelComponent.ts

@@ -1,4 +1,4 @@
-import { ActionType, SubscribeType } from 'redux/types';
+import { ActionType } from 'redux/types';
 import { Store } from './createStore';
 import { Dom } from './dom';
 import { DomListener } from './DomListener';
@@ -22,7 +22,6 @@ export abstract class ExcelComponent extends DomListener implements ExcelCompone
   name: string;
   emitter: Emitter;
   store: Store;
-  storeSub: SubscribeType;
   subscribe: string[];
   private unsubscribers: ((args?: any) => any)[];
 

src/core/StoreSubscriber.ts

@@ -15,6 +15,8 @@ export class StoreSubscriber {
     this.prevState = this.store.getState();
 
     this.sub = this.store.subscribe((state: StateType) => {
+      if (!state) return;
+
       Object.keys(state).forEach(key => {
         if (!isEqual(this.prevState[key], state[key])) {
           components.forEach(component => {

src/core/routes/ActiveRoute.ts

@@ -6,4 +6,8 @@ export class ActiveRoute {
   static get param() {
     return window.location.hash.split('/');
   }
+
+  static set navigateTo(path: string) {
+    window.location.hash = path;
+  }
 }

src/index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="shortcut icon" href="favicon.ico " type="image/x-icon">
+  <link rel="shortcut icon" href="assets/favicon.ico " type="image/x-icon">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <title>Excel course</title>
 </head>
@@ -14,4 +14,4 @@
   <div id="app"></div>
 </body>
 
-</html>
+</html>

src/pages/dashboard.functions.ts

@@ -1,21 +1,19 @@
 import { storage } from 'core/utils';
 
 function toHtml(key: string) {
-  const date = +key.split(':')[1];
+  const params = +key.split(':')[1];
-  const params = storage(key);
+  const state = storage(key);
-  const link = `#excel/${date}`;
+  const link = `#excel/${params}`;
+  const date = new Date(+state.openDate);
+
   return `
     <li class="db__record">
-      <a href=${link}>${params.title}</a>
+      <a href=${link}>${state.title}</a>
-      <strong>${new Date(date).toLocaleDateString()}</strong>
+      <strong>${date.toLocaleDateString()} ${date.toLocaleTimeString()}</strong>
     </li>
   `;
 }
 
-export function getAllRecords() {
-
-}
-
 export function createRecordsTable() {
   const keys = getAllKeys();
   if (!keys.length) return '<p>Пока не создали ни одной таблицы</p>';

src/redux/actions.ts

@@ -1,4 +1,13 @@
-import { CHANGE_TEXT, CHANGE_STYLES, TABLE_RESIZE, APPLY_STYLES, CHANGE_TITLE, DELETE_TABLE } from './constants';
+import { ActionType } from 'redux/types';
+import {
+  CHANGE_TEXT,
+  CHANGE_STYLES,
+  TABLE_RESIZE,
+  APPLY_STYLES,
+  CHANGE_TITLE,
+  DELETE_TABLE,
+  UPDATE_DATE,
+} from './constants';
 
 export function tableResize(resizeData: any) {
   return {
@@ -41,3 +50,10 @@ export function deleteTable(data: string) {
     data,
   };
 }
+
+export function updateOpenDate(data: string): ActionType {
+  return {
+    type: UPDATE_DATE,
+    data,
+  };
+}

src/redux/constants.ts

@@ -4,3 +4,4 @@ export const APPLY_STYLES = 'APPLY_STYLES';
 export const CHANGE_STYLES = 'CURRENT_STYLES';
 export const CHANGE_TITLE = 'CHANGE_TITLE';
 export const DELETE_TABLE = 'DELETE_TABLE';
+export const UPDATE_DATE = 'UPDATE_DATE';

src/redux/rootReducer.ts

@@ -1,5 +1,14 @@
+import { ActiveRoute } from 'core/routes/ActiveRoute';
 import { storageName } from 'pages/ExcelPage';
-import { CHANGE_TEXT, CHANGE_STYLES, TABLE_RESIZE, APPLY_STYLES, CHANGE_TITLE, DELETE_TABLE } from './constants';
+import {
+  CHANGE_TEXT,
+  CHANGE_STYLES,
+  TABLE_RESIZE,
+  APPLY_STYLES,
+  CHANGE_TITLE,
+  DELETE_TABLE,
+  UPDATE_DATE,
+} from './constants';
 import { ActionType, StateType } from './types';
 
 export function rootReducer(state: StateType, action: ActionType) {
@@ -47,19 +56,16 @@ export function rootReducer(state: StateType, action: ActionType) {
 
     case DELETE_TABLE: {
       const name = storageName(action.data);
-      console.log('delete table item', name);
       localStorage.removeItem(name);
-      window.location.hash = '';
+      ActiveRoute.navigateTo = '';
 
-      return { ...state };
+      return null;
+    }
+
+    case UPDATE_DATE: {
+      return { ...this.state, openDate: action.data };
     }
 
     default: return state;
   }
 }
-
-// function value(state, field, action) {
-//   const val = state[field] || {};
-//   val[action.data.id] = action.data.value;
-//   return val;
-// }