API mockup + save state

src/js/api/constants.js

@@ -0,0 +1,11 @@
+export const API_BASE = /* BASE URL OF THE API */ 'https://linktoapi.example';
+
+/* Replace the placeholders with the actual values */
+
+export const API_AUTH = '/auth';
+export const API_REGISTER = '/register';
+export const API_LOGIN = '/login';
+export const API_KEY_URL = '/create-api-key';
+export const API_LISTINGS = '/auction/listings';
+export const API_KEY =
+  /* RETRIEVE YOUR API KEY FROM THE API AND STORE IT HERE */ 'YOUR_API_KEY';

src/js/api/fetch.js

@@ -0,0 +1,8 @@
+import { headers } from './headers.js';
+
+export async function authFetch(url, options = {}) {
+  return fetch(url, {
+    ...options,
+    headers: headers(Boolean(options.body)),
+  });
+}

src/js/api/headers.js

@@ -0,0 +1,22 @@
+import { load } from '../storage/load.js';
+import { API_KEY } from './constants.js';
+
+export function headers(hasBody = false) {
+  const headers = new Headers();
+
+  const token = load('token');
+
+  if (token) {
+    headers.append('Authorization', `Bearer ${load('token')}`);
+  }
+
+  if (API_KEY) {
+    headers.append('X-Noroff-API-Key', API_KEY);
+  }
+
+  if (hasBody) {
+    headers.append('Content-Type', 'application/json');
+  }
+
+  return headers;
+}

src/js/main.js

@@ -2,27 +2,57 @@ import spreadsheet from './spreadsheet';
 import userColsAndRows from './helpers/userColsAndRows';
 import toggleDarkMode from './darkModeToggle/toggleDarkMode.mjs';
 import { addCellTargetingEvents } from './spreadsheet/cellNavigation';
-import { initDB } from './spreadsheet/db.js';
+import { initDB, saveCellValue, getCellValue } from './spreadsheet/db.js';
 
 const spreadsheetContainer = document.querySelector('#spreadsheetContainer');
 
-// indexedDB
+// Function to load initial data from IndexedDB
+async function loadInitialData(cols, rows) {
+  const data = [];
+  for (let row = 0; row < rows; row++) {
+    const rowData = [];
+    for (let col = 0; col < cols; col++) {
+      const cellId = `cell-${row}-${col}`;
+      const cellValue = await getCellValue(cellId);
+      rowData.push(cellValue !== null ? cellValue : '');
+    }
+    data.push(rowData);
+  }
+  return data;
+}
+
+// Initialize the spreadsheet with data from IndexedDB or default data
 initDB()
-  .then(() => {
+  .then(async () => {
     console.log('IndexedDB initialized');
 
     // DarkMode
     toggleDarkMode();
 
     const [cols, rows] = userColsAndRows();
 
+    // Load initial data
+    const initialData = await loadInitialData(cols, rows);
+
     // Create and append the spreadsheet to the container
-    spreadsheetContainer.append(spreadsheet(cols, rows));
+    const hot = spreadsheet(cols, rows, initialData);
+    spreadsheetContainer.append(hot);
 
     addCellTargetingEvents('#spreadsheetContainer table', (col, row, value) => {
-      // Here you can put the save function with params for cell contents.
-      console.log('save', col, row, value);
+      const cellId = `cell-${row}-${col}`;
+      saveCellValue(cellId, value);
     });
+
+    // Auto-save every 10 seconds
+    setInterval(() => {
+      hot.getData().forEach((row, rowIndex) => {
+        row.forEach((cell, colIndex) => {
+          const cellId = `cell-${rowIndex}-${colIndex}`;
+          saveCellValue(cellId, cell);
+        });
+      });
+      console.log('Spreadsheet state saved');
+    }, 10000);
   })
   .catch((error) => {
     console.error('Failed to initialize IndexedDB:', error);