Add persistance

task_2_ts/ts/main.ts

@@ -15,6 +15,7 @@ import {
 import {
     readCSV
 } from './csv';
+import persistance from './persistance';
 
 
 // ┌                                               ┐
@@ -76,15 +77,11 @@ columnDatatype.addConditionalElementBind( document.getElementById( 'title-column
     stringOrNumberCheckPredicate );
 
 
+
 // ┌                                               ┐
 // │           Bind to file input event            │
 // └                                               ┘
 fileInput.addEventListener( 'change', event => {
-    loadFile( event );
-} );
-
-
-const loadFile = ( event: Event ) => {
     if ( fileInput.files && fileInput.files.length > 0 ) {
         const file = fileInput.files[0]!;
 
@@ -109,6 +106,7 @@ const loadFile = ( event: Event ) => {
                     document.getElementById( 'table-header--' + i )!.addEventListener( 'click', () => {
                         // TODO: Decide on sorting cycling
                         // TODO: Add indicator as well
+                        // TODO: Want to hide infos and do an else for file infos and selected columns info?
                         if ( selectedColumn === column ) {
                             ascendingSort.set( !ascendingSort.get() );
                         } else {
@@ -145,6 +143,21 @@ const loadFile = ( event: Event ) => {
                 } );
 
                 dataList.set( data );
+                const config = persistance.get( file.name, file.size + 'B' );
+
+                if ( config ) {
+                    const dtype = typeof dataList.get()[0]![ config.sorted ];
+
+                    columnName.set( config.sorted );
+                    selectedColumn = config.active;
+                    ascendingSort.set( config.ascending );
+                    columnDatatype.set( dtype );
+
+                    if ( dtype === 'string' )
+                        filterInput.disabled = false;
+                    else
+                        filterInput.disabled = true;
+                }
             } )
             .catch( e => {
                 console.warn( e );
@@ -153,13 +166,21 @@ const loadFile = ( event: Event ) => {
     } else {
         alert( 'No file selected' );
     }
-};
+} );
+// TODO: Task says need to fire custom event on filter card... sure, why not.
+// It doesn't say that we need to use it though!
+
+// TODO: Maybe add an overlay that is shown during load?
+
 
 // ┌                                               ┐
 // │                    Sorting                    │
 // └                                               ┘
 const doSort = () => {
     filter.set( '' );
+    persistance.store(
+        filename.get(), filesize.get(), selectedColumn, selectedColumn, ascendingSort.get()
+    );
 
     if ( columnDatatype.get() === 'string' ) {
         columnEntries.set( computeDifferent( dataList.get(), selectedColumn ) );
@@ -196,6 +217,7 @@ columnName.onChange( doSort );
 ascendingSort.onChange( doSort );
 
 
+
 // ┌                                               ┐
 // │                   Filtering                   │
 // └                                               ┘

task_2_ts/ts/persistance.ts

@@ -5,20 +5,42 @@ import {
 // Using localStorage for persistance
 const persistanceStore: PersistanceConfig = JSON.parse( localStorage.getItem( 'persistance' ) ?? '{}' );
 
-export const store = (
+/**
+ * Store state for filename.
+ * @param filename - The filename to store for
+ * @param size - The filesize (in case file is changed)
+ * @param sorted - The sorted column
+ * @param active - The active column
+ * @param ascending - True if sorting ascending
+ */
+const store = (
     filename: string,
-    size: number,
+    size: string,
     sorted: string,
-    active: string
+    active: string,
+    ascending: boolean
 ) => {
     persistanceStore[ `${ filename }-${ size }` ] = {
         'active': active,
-        'sorted': sorted
+        'sorted': sorted,
+        'ascending': ascending
     };
     localStorage.setItem( 'persistance', JSON.stringify( persistanceStore ) );
 };
 
 
-export const get = ( filename: string, size: number ) => {
+/**
+ * Get the state for filename
+ * @param filename - The file to retrieve from
+ * @param size - The size of the file
+ * @returns The state, if found
+ */
+const get = ( filename: string, size: string ) => {
     return persistanceStore[ `${ filename }-${ size }` ];
 };
+
+
+export default {
+    store,
+    get
+};

task_2_ts/ts/types.d.ts

@@ -6,8 +6,9 @@ export type CSV_Data = CSVRecord[];
 export interface PersistanceConfigEntry {
     'sorted': string;
     'active': string;
+    'ascending': boolean;
 }
 
 export interface PersistanceConfig {
-    [filename: `${ string }-${ number }`]: PersistanceConfigEntry
+    [filename: `${ string }-${ string }`]: PersistanceConfigEntry
 }