JavaScript Promises — The Missing Return That Broke Payment

function fetchUserProfile(userId) {
  return new Promise((resolve, reject) => {
    console.log('Promise is now: PENDING');
    setTimeout(() => {
      if (userId > 0) {
        resolve({ id: userId, name: 'Alice Johnson', role: 'admin' });
      } else {
        reject(new Error(`Invalid userId: ${userId}. Must be a positive integer.`));
      }
    }, 1000);
  });
}

const profilePromise = fetchUserProfile(42);
profilePromise.then((userProfile) => {
  console.log('Promise is now: FULFILLED');
  console.log('User loaded:', userProfile.name, '| Role:', userProfile.role);
});
profilePromise.then((userProfile) => {
  console.log('Second handler also received:', userProfile.id);
});

fetchUserProfile(-1)
  .then((data) => console.log('This will never run'))
  .catch((error) => {
    console.log('Promise is now: REJECTED');
    console.log('Error caught:', error.message);
  });

// Visualising state transitions with logging
function createPromiseLifecycle() {
  console.log('Created Promise — state: PENDING');
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Simulating a coin flip to demonstrate both paths
      if (Math.random() > 0.5) {
        console.log('resolve() called — state: FULFILLED (one-way transition)');
        resolve('✅ Success: Operation completed');
      } else {
        console.log('reject() called — state: REJECTED (one-way transition)');
        reject('❌ Failure: Something went wrong');
      }
      // Any further resolve/reject calls are silently ignored
      console.log('Attempting double-resolve — ignored by runtime');
      resolve('This will never be seen');
    }, 500);
  });
}

const life = createPromiseLifecycle();
life
  .then((msg) => console.log('Handler received:', msg))
  .catch((err) => console.log('Handler received:', err));

// Demonstrating that a settled Promise caches its state
setTimeout(() => {
  console.log('\nAttaching handler after settlement:');
  life.then((msg) => console.log('Late handler still gets:', msg))
      .catch((err) => console.log('Late handler still gets:', err));
}, 1000);

const fs = require('fs');
const path = require('path');

// ---- Callback Hell (nested pyramid) ----
function loadConfigCallback(callback) {
  fs.readFile(path.join(__dirname, 'config.json'), 'utf8', (err, configData) => {
    if (err) {
      callback(err);
      return;
    }
    const config = JSON.parse(configData);
    fs.readFile(path.join(__dirname, config.templateFile), 'utf8', (err, templateData) => {
      if (err) {
        callback(err);
        return;
      }
      const template = JSON.parse(templateData);
      fs.readFile(path.join(__dirname, template.localeFile), 'utf8', (err, localeData) => {
        if (err) {
          callback(err);
          return;
        }
        callback(null, { config, template, locale: JSON.parse(localeData) });
      });
    });
  });
}

// ---- Promise Chain (flat and clear) ----
const { promisify } = require('util');
const readFileAsync = promisify(fs.readFile);

function loadConfigPromise() {
  return readFileAsync(path.join(__dirname, 'config.json'), 'utf8')
    .then(configData => {
      const config = JSON.parse(configData);
      return readFileAsync(path.join(__dirname, config.templateFile), 'utf8')
        .then(templateData => ({ config, template: JSON.parse(templateData) }));
    })
    .then(({ config, template }) =>
      readFileAsync(path.join(__dirname, template.localeFile), 'utf8')
        .then(localeData => ({ config, template, locale: JSON.parse(localeData) }))
    );
}

// Usage
loadConfigPromise()
  .then(result => console.log('Config loaded:', result.config.name))
  .catch(err => console.error('Failed:', err.message));

// Real-world pipeline: authenticate → fetch dashboard data → format for UI

function authenticateUser(email, password) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (email === 'alice@example.com' && password === 'secure123') {
        resolve({ token: 'jwt_abc123xyz', userId: 42 });
      } else {
        reject(new Error('Authentication failed: invalid credentials'));
      }
    }, 500);
  });
}

function fetchDashboardStats(authToken, userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (!authToken) {
        reject(new Error('No auth token provided'));
        return;
      }
      resolve({
        userId,
        totalOrders: 128,
        pendingOrders: 3,
        revenue: 14750.50
      });
    }, 700);
  });
}

function formatStatsForDisplay(rawStats) {
  return {
    headline: `${rawStats.totalOrders} total orders`,
    alert: rawStats.pendingOrders > 0
      ? `⚠ ${rawStats.pendingOrders} orders need attention`
      : '✓ All orders processed',
    revenueDisplay: `$${rawStats.revenue.toLocaleString('en-US')}`
  };
}

authenticateUser('alice@example.com', 'secure123')
  .then((authResult) => {
    console.log('Step 1 complete — token received:', authResult.token);
    return fetchDashboardStats(authResult.token, authResult.userId);
  })
  .then((rawStats) => {
    console.log('Step 2 complete — raw stats received for user:', rawStats.userId);
    return formatStatsForDisplay(rawStats);
  })
  .then((displayData) => {
    console.log('Step 3 complete — ready to render:');
    console.log('  Headline:', displayData.headline);
    console.log('  Alert:   ', displayData.alert);
    console.log('  Revenue: ', displayData.revenueDisplay);
  })
  .catch((error) => {
    console.error('Pipeline failed at some step:', error.message);
  });

authenticateUser('alice@example.com', 'wrongpassword')
  .then((authResult) => fetchDashboardStats(authResult.token, authResult.userId))
  .then((rawStats) => formatStatsForDisplay(rawStats))
  .then((displayData) => console.log('This line never runs'))
  .catch((error) => {
    console.error('Caught in chain:', error.message);
  });

// Example 1: Manual promisification of Node's fs.readFile
const fs = require('fs');

function readFilePromise(path, encoding = 'utf8') {
  return new Promise((resolve, reject) => {
    // The callback follows the Node.js error-first convention
    fs.readFile(path, encoding, (err, data) => {
      if (err) {
        reject(err);  // Reject the Promise with the error
      } else {
        resolve(data); // Resolve with the file contents
      }
    });
  });
}

// Usage with async/await
async function loadConfig() {
  try {
    const config = await readFilePromise('/etc/app/config.json');
    return JSON.parse(config);
  } catch (err) {
    console.error('Failed to load config:', err.message);
    return {};
  }
}

// Example 2: Using util.promisify (built-in)
const { promisify } = require('util');
const readFileAsync = promisify(fs.readFile);
// Same usage:
// const data = await readFileAsync('/etc/app/config.json', 'utf8');

// Example 3: Promisifying an entire callback-style module
const { promisify } = require('util');
const oldDb = require('legacy-db-driver'); // callback-based
const db = {
  query: promisify(oldDb.query),
  insert: promisify(oldDb.insert),
  close: promisify(oldDb.close)
};

// Now you can chain:
db.query('SELECT * FROM users')
  .then((rows) => db.insert('logs', { action: 'query', rows: rows.length }))
  .catch((err) => console.error('Database error:', err));

function loadUserProfile(userId) {
  return new Promise((resolve) =>
    setTimeout(() => resolve({ name: 'Alice Johnson', plan: 'Pro' }), 300)
  );
}

function loadOrderHistory(userId) {
  return new Promise((resolve) =>
    setTimeout(() => resolve([{ id: 'ORD-001', total: 49.99 }, { id: 'ORD-002', total: 120.00 }]), 600)
  );
}

function loadNotifications(userId) {
  return new Promise((resolve, reject) =>
    setTimeout(() => reject(new Error('Notifications service temporarily unavailable')), 400)
  );
}

const userId = 42;
const startTime = Date.now();

console.log('--- Testing Promise.all ---');
Promise.all([
  loadUserProfile(userId),
  loadOrderHistory(userId),
  loadNotifications(userId)
])
  .then(([profile, orders, notifications]) => {
    console.log('All loaded:', profile, orders, notifications);
  })
  .catch((error) => {
    console.log(`Promise.all rejected after ${Date.now() - startTime}ms`);
    console.log('Error:', error.message);
    console.log('Profile and orders data is lost — even though they succeeded!');
  });

const start2 = Date.now();
console.log('\n--- Testing Promise.allSettled ---');
Promise.allSettled([
  loadUserProfile(userId),
  loadOrderHistory(userId),
  loadNotifications(userId)
])
  .then((results) => {
    results.forEach((result, index) => {
      const label = ['Profile', 'Orders', 'Notifications'][index];
      if (result.status === 'fulfilled') {
        console.log(`✓ ${label} loaded:`, result.value);
      } else {
        console.warn(`✗ ${label} failed:`, result.reason.message);
      }
    });
    console.log(`allSettled resolved after ${Date.now() - start2}ms (waited for all)`);
  });

let isLoadingData = false;

function fetchProductCatalog(categoryId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (categoryId === 'electronics') {
        resolve([
          { id: 1, name: 'Wireless Headphones', price: 89.99 },
          { id: 2, name: 'USB-C Hub', price: 45.00 }
        ]);
      } else {
        reject(new Error(`Category '${categoryId}' not found in catalog`));
      }
    }, 500);
  });
}

function loadCatalogWithFallback(categoryId) {
  isLoadingData = true;
  console.log('Loading spinner: ON');

  return fetchProductCatalog(categoryId)
    .then((products) => {
      console.log(`Loaded ${products.length} products from API`);
      return products;
    })
    .catch((error) => {
      console.warn('API failed, using fallback data. Reason:', error.message);
      return [{ id: 0, name: 'No products available', price: 0 }];
    })
    .then((productsToDisplay) => {
      console.log('Rendering', productsToDisplay.length, 'product(s) to UI');
      return productsToDisplay;
    })
    .finally(() => {
      isLoadingData = false;
      console.log('Loading spinner: OFF — cleanup complete');
    });
}

console.log('=== Valid category ===');
loadCatalogWithFallback('electronics').then((items) => {
  console.log('Final items received by caller:', items.map(i => i.name));
});

setTimeout(() => {
  console.log('\n=== Invalid category (triggers fallback) ===');
  loadCatalogWithFallback('furniture').then((items) => {
    console.log('Final items received by caller:', items.map(i => i.name));
  });
}, 1000);

fetchProductCatalog('invalid-category')
  .catch((error) => {
    console.error('\nAlways attach .catch() to every Promise chain:', error.message);
  });

// Simulating a database connection cleanup
let dbConnection = null;

function connectToDatabase() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const connected = Math.random() > 0.3; // 70% success rate
      if (connected) {
        dbConnection = { id: 'conn_123' };
        resolve({ message: 'Connected to database', connectionId: 'conn_123' });
      } else {
        reject(new Error('Database connection refused'));
      }
    }, 500);
  });
}

function closeDatabaseConnection() {
  console.log('Closing database connection...');
  dbConnection = null;
}

// Cleanup using .finally() — no need to duplicate in then and catch
async function executeQuery(query) {
  return connectToDatabase()
    .then((result) => {
      console.log(result.message);
      // Simulate a query that might fail
      if (query.toLowerCase().includes('drop')) {
        throw new Error('DROP queries are not allowed');
      }
      return `Query "${query}" executed successfully`;
    })
    .catch((error) => {
      console.error('Query error:', error.message);
      throw error; // re-throw so the caller still sees the error
    })
    .finally(() => {
      closeDatabaseConnection();
      console.log('Cleanup complete');
    });
}

// Test both success and failure paths
executeQuery('SELECT * FROM users')
  .then((msg) => console.log('Result:', msg))
  .catch((err) => console.log('Final error caught:', err.message));

setTimeout(() => {
  executeQuery('DROP TABLE users')
    .then((msg) => console.log('Result:', msg))
    .catch((err) => console.log('Final error caught:', err.message));
}, 1500);

function fetchWithTimeout(url, timeoutMs = 5000) {
  const fetchPromise = fetch(url);
  const timeoutPromise = new Promise((_, reject) =>
    setTimeout(() => reject(new Error(`Request timed out after ${timeoutMs}ms`)), timeoutMs)
  );
  return Promise.race([fetchPromise, timeoutPromise]);
}

function fetchFromMultipleServers(urls) {
  const fetchPromises = urls.map(url =>
    fetch(url).then(response => {
      if (!response.ok) throw new Error(`HTTP ${response.status} from ${url}`);
      return response.json();
    })
  );
  return Promise.any(fetchPromises);
}

async function demo() {
  try {
    const data = await fetchWithTimeout('https://api.example.com/data', 3000);
    console.log('Data:', data);
  } catch (err) {
    console.error('Failed:', err.message);
  }

  try {
    const result = await fetchFromMultipleServers([
      'https://cdn1.example.com/config',
      'https://cdn2.example.com/config'
    ]);
    console.log('Config from fastest server:', result);
  } catch (err) {
    console.error('All servers failed:', err.errors);
  }
}

// Quick reference: all four combinators in parallel
async function demonstrateAll() {
  const slowSuccess = new Promise((resolve) => setTimeout(() => resolve('A'), 500));
  const fastFailure = new Promise((_, reject) => setTimeout(() => reject(new Error('B fails')), 200));
  const fastSuccess = new Promise((resolve) => setTimeout(() => resolve('C'), 100));

  // all: fails fast on first rejection, loses other results
  try {
    console.log(await Promise.all([slowSuccess, fastFailure]));
  } catch (e) { console.log('all:', e.message); } // 'B fails'

  // allSettled: never fails, gives status for each
  const settled = await Promise.allSettled([slowSuccess, fastFailure]);
  console.log('allSettled:', settled.map(r => r.status)); // ['fulfilled', 'rejected']

  // race: first settled (rejection wins here)
  const race = await Promise.race([slowSuccess, fastFailure]).catch(e => e.message);
  console.log('race:', race); // 'B fails'

  // any: first success (ignores failures until all fail)
  const any = await Promise.any([fastFailure, fastSuccess]);
  console.log('any:', any); // 'C'
}

demonstrateAll();

const slowSuccess = new Promise(resolve => setTimeout(() => resolve('A'), 500));
const fastFailure = new Promise((_, reject) => setTimeout(() => reject(new Error('B fails')), 200));
const fastSuccess = new Promise(resolve => setTimeout(() => resolve('C'), 100));

async function compare() {
  console.log('--- Promise.all ---');
  try {
    const r = await Promise.all([slowSuccess, fastFailure]);
    console.log('Resolved:', r);
  } catch(e) { console.log('Rejected with:', e.message); }

  console.log('\n--- Promise.allSettled ---');
  const s = await Promise.allSettled([slowSuccess, fastFailure]);
  s.forEach(r => console.log(r.status));

  console.log('\n--- Promise.race ---');
  try {
    const r = await Promise.race([slowSuccess, fastFailure]);
    console.log('Resolved:', r);
  } catch(e) { console.log('Rejected with:', e.message); }

  console.log('\n--- Promise.any ---');
  try {
    const r = await Promise.any([fastFailure, fastSuccess]);
    console.log('Resolved:', r);
  } catch(e) { console.log('All rejected:', e.errors?.length); }
}

compare();

// Callback version
function getUserCB(id, cb) {
  setTimeout(() => cb(null, { id, name: 'Alice' }), 100);
}
function getPostsCB(userId, cb) {
  setTimeout(() => cb(null, ['post1', 'post2']), 100);
}
getUserCB(1, (err, user) => {
  if (err) return console.error(err);
  getPostsCB(user.id, (err, posts) => {
    if (err) return console.error(err);
    console.log('Callback:', user.name, 'has', posts.length, 'posts');
  });
});

// Promise version
function getUser(id) {
  return new Promise(resolve => setTimeout(() => resolve({ id, name: 'Alice' }), 100));
}
function getPosts(userId) {
  return new Promise(resolve => setTimeout(() => resolve(['post1', 'post2']), 100));
}
getUser(1)
  .then(user => getPosts(user.id))
  .then(posts => console.log('Promise:', posts.length))
  .catch(console.error);

// Async/await version
async function displayInfo(id) {
  try {
    const user = await getUser(id);
    const posts = await getPosts(user.id);
    console.log('Async/await:', user.name, 'has', posts.length, 'posts');
  } catch (err) {
    console.error(err);
  }
}
displayInfo(1);

// Async/await best for sequential dependent steps
async function loadUserDashboard(userId) {
  try {
    const user = await fetchUser(userId);
    const orders = await fetchOrders(user.id); // depends on user
    const recommendations = await fetchRecommendations(user.preferences); // depends on user
    return { user, orders, recommendations };
  } catch (error) {
    console.error('Dashboard load failed:', error);
    throw error; // re-throw for caller
  }
}

// Promise chain best for transformations and intermediate error recovery
function loadConfigWithFallback() {
  return fetchConfigFromPrimary()
    .then(config => {
      // Validate config
      if (!config.apiKey) throw new Error('Missing API key');
      return config;
    })
    .catch(error => {
      console.warn('Primary config failed, using fallback:', error.message);
      return fetchConfigFromBackup();
    })
    .then(config => {
      // Apply defaults
      config.timeout ??= 5000;
      return config;
    });
}

// Promise combinators for parallelism
async function loadMultipleSources(userId) {
  const [profile, notifications] = await Promise.all([
    fetchProfile(userId),
    fetchNotifications(userId)
  ]);
  return { profile, notifications };
}

// Exercise 1: Sequential API Calls (solution)
function fetchUser(userId) {
  return Promise.resolve({ id: userId, name: 'Alice' });
}
function fetchPosts(userId) {
  return Promise.resolve(['Post 1', 'Post 2']);
}
function fetchComments(postId) {
  return Promise.resolve(['Comment 1', 'Comment 2']);
}

fetchUser(1)
  .then(user => fetchPosts(user.id))
  .then(posts => fetchComments(posts[0]))
  .then(comments => console.log('Comments:', comments))
  .catch(err => console.error(err));

// Exercise 2: Parallel Fetch with Promise.all
function fetchData() {
  return Promise.all([
    fetchUser(1),
    fetchPosts(1),
    fetchComments(1)
  ]).then(([user, posts, comments]) => ({ user, posts, comments }));
}

// Exercise 3: Timeout Wrapper
function withTimeout(promise, ms) {
  const timeout = new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Timeout')), ms)
  );
  return Promise.race([promise, timeout]);
}

// Exercise 4: Retry Logic with exponential backoff
function fetchWithRetry(url, retries = 3) {
  return new Promise((resolve, reject) => {
    const attempt = (n) => {
      fetch(url)
        .then(response => {
          if (!response.ok) throw new Error('HTTP error');
          return response.json();
        })
        .then(resolve)
        .catch(err => {
          if (n === 0) return reject(err);
          setTimeout(() => attempt(n - 1), Math.pow(2, retries - n) * 1000);
        });
    };
    attempt(retries);
  });
}

// Exercise 5: Data Transformation Pipeline with cleanup
function processConfig() {
  let inProgress = true;
  return fetchConfig()
    .then(validateConfig)
    .then(saveToCache)
    .catch(err => {
      console.error('Pipeline failed, using defaults:', err);
      return defaultConfig;
    })
    .finally(() => { inProgress = false; });
}

// io.thecodeforge — javascript tutorial

// A thenable object from a legacy cache middleware
const cacheResult = {
  data: 'payment_token_abc123',
  then: function(onFulfilled) {
    // Naive engine sees this as a valid thenable and calls it
    // Resolves immediately with undefined, swallowing the real data
    return Promise.resolve(this.data).then(onFulfilled);
  }
};

// Production trap: Promise.resolve() flattens thenables
// This mishandles the result silently
const badPipeline = Promise.resolve(cacheResult)
  .then(transformed => {
    console.log(transformed);  // 'payment_token_abc123' — wrong shape
  });

// Proper fix: explicitly construct with new Promise() to skip flattening
const safePipeline = new Promise((resolve) => resolve(cacheResult))
  .then(raw => {
    console.log(raw.data);  // 'payment_token_abc123' — safe access
  });

// Output:
// 'payment_token_abc123'
// 'payment_token_abc123'

// io.thecodeforge — javascript tutorial

// WRONG: Recreating async/await with Promise constructor
function fetchUserWrong(userId) {
  return new Promise((resolve, reject) => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(user => resolve(user))
      .catch(err => reject(err));
  });
}

// RIGHT: Just use async/await
async function fetchUserCorrect(userId) {
  const response = await fetch(`/api/users/${userId}`);
  return response.json();
}

// ONLY legitimate use: promisifying a callback API
// Legacy library that expects a callback
function legacyGetData(url, callback) {
  // ... send request, calls callback(err, data)
}

function promisifiedGetData(url) {
  return new Promise((resolve, reject) => {
    legacyGetData(url, (err, data) => {
      if (err) reject(err);
      else resolve(data);
    });
  });
}

// Output: no runtime output, but pattern comparison is critical

// io.thecodeforge — javascript tutorial

// Simulate: iframe context creates a promise, parent handles it
// In real browser, iframe has different window reference

const iframe = document.getElementById('payment-iframe');

// Bug: promise created inside iframe but .then runs in parent
iframe.contentWindow.Promise.resolve('payment_token')
  .then(token => {
    // This .then callback runs with iframe's 'window' as incumbent
    // window.location.href here points to iframe's URL, not parent's
    // Fetch API calls might fail due to origin mismatch
    console.log(window.location.href);  // iframe's URL, not parent's
  });

// Fix: capture correct window reference before promise
const parentWindow = window;
iframe.contentWindow.Promise.resolve('payment_token')
  .then(token => {
    console.log(parentWindow.location.href);  // parent's URL
  });

// Output (in browser with iframe):
// 'https://thirdparty-payment.com/iframe'
// 'https://my-site.com/checkout'

// io.thecodeforge — javascript tutorial

const fetchData = (id) => new Promise((resolve) => {
  setTimeout(() => resolve({ id, name: 'bot' }), 100);
});

const promise = fetchData(42);

// These all fail or return undefined:
console.log(promise.state);          // undefined
console.log(promise.value);          // undefined
console.log(Object.keys(promise));   // []

// Only metadata visible:
console.log(promise.constructor.name); // "Promise"
console.log(Object.prototype.toString.call(promise)); // "[object Promise]"

// Proper way to inspect:
promise.then(console.log).catch(console.error);
// { id: 42, name: 'bot' }

// io.thecodeforge — javascript tutorial

const basePromise = Promise.resolve(10);

// Correct: chaining with return values
const chained = basePromise
  .then(val => val * 2)
  .then(val => val + 1);
// chained resolves to 21

// Wrong: multiple listeners on same promise
basePromise.then(v => console.log('handler A:', v));
basePromise.then(v => console.log('handler B:', v));
// Both log 10 — no transformation shared

// Prototype methods:
console.log(typeof Promise.prototype.then);    // "function"
console.log(typeof Promise.prototype.catch);   // "function"
console.log(typeof Promise.prototype.finally); // "function"

// There's no other instance method
console.log(Object.getOwnPropertyNames(Promise.prototype));
// ["constructor", "then", "catch", "finally"]

// io.thecodeforge — javascript tutorial
const p = new Promise((res) => res(1));
console.log('synchronous');
p.then(v => console.log('microtask:', v));
console.log('still sync');
// Output order: synchronous, still sync, microtask: 1

// io.thecodeforge — javascript tutorial
const p = new Promise((res) => {
  res(1);
  res(2); // silently ignored per spec
});
p.then(v => console.log(v)); // logs 1, not 2