Design Pat terns

// Must know and call every component manually 😩
function updateProfile(user) {
  dashboard.refresh(user);
  header.update(user);
  notifications.push(user);
}

class UserStore {
  constructor() { this.listeners = []; }
  subscribe(fn) { this.listeners.push(fn); }
  updateProfile(data) {
    // notifies all subscribers 🔔
    this.listeners.forEach(fn => fn(data));
  }
}

const store = new UserStore();
store.subscribe(u => console.log("Header: "    + u.name));
store.subscribe(u => console.log("Dashboard: " + u.name));
store.updateProfile({ name: "Ali Updated" }); // both notified ✅

function login(method, data) {
  if      (method === "email")    { /* ... */ }
  else if (method === "google")   { /* ... */ }
  else if (method === "facebook") { /* ... */ }
  // Add Apple login? Must edit this function 😩
}

const EmailLogin    = { auth(d) { return "📧 Email: "    +d.email; } };
const GoogleLogin   = { auth(d) { return "🔵 Google: "   +d.token; } };
const FacebookLogin = { auth(d) { return "🔷 Facebook: " +d.token; } };

class AuthService {
  constructor(strategy) { this.strategy = strategy; }
  setStrategy(s) { this.strategy = s; }
  login(data) { return this.strategy.auth(data); }
}

const auth = new AuthService(EmailLogin);
auth.login({ email: "ali@x.com" }); // 📧 Email ✅
auth.setStrategy(GoogleLogin);
auth.login({ token: "abc" });          // 🔵 Google ✅

class UpdateNameCommand {
  constructor(user, newName) {
    this.user    = user;
    this.newName = newName;
    this.oldName = user.name; // save old value for undo
  }
  execute() { this.user.name = this.newName; }
  undo()    { this.user.name = this.oldName; }
}

const user    = { name: "Ali" };
const history = [];

const cmd = new UpdateNameCommand(user, "Ahmed");
cmd.execute(); history.push(cmd);
console.log(user.name); // "Ahmed"

history.pop().undo();
console.log(user.name); // "Ali" ← restored ✅

class UserCollection {
  constructor() { this.users = []; }
  add(u) { this.users.push(u); }

  [Symbol.iterator]() {
    let i = 0;
    const users = this.users;
    return {
      next() {
        return i < users.length
          ? { value: users[i++], done: false }
          : { done: true };
      }
    };
  }
}

const list = new UserCollection();
list.add({ name: "Ali"   });
list.add({ name: "Ahmed" });

for (const user of list) {
  console.log(user.name); // Ali, Ahmed ✅
}

class ChatRoom {
  constructor() { this.users = []; }
  join(user) { this.users.push(user); user.room = this; }
  send(msg, sender) {
    this.users
      .filter(u => u !== sender)
      .forEach(u => u.receive(`${sender.name}: ${msg}`));
  }
}

class User {
  constructor(name) { this.name = name; }
  send(msg)    { this.room.send(msg, this); }
  receive(msg) { console.log("📩 " + msg); }
}

const room = new ChatRoom();
const ali   = new User("Ali");
const ahmed = new User("Ahmed");
room.join(ali); room.join(ahmed);
ali.send("Hello everyone!"); // 📩 Ali: Hello everyone! ✅

class UserProfile {
  constructor(name, bio) { this.name=name; this.bio=bio; }
  save()    { return { name:this.name, bio:this.bio }; }
  restore(s){ this.name=s.name; this.bio=s.bio; }
}

const profile  = new UserProfile("Ali", "Developer");
const snapshots = [];

snapshots.push(profile.save()); // save before editing

profile.name = "Ali Ahmed";
profile.bio  = "Senior Developer";
console.log(profile.name); // "Ali Ahmed"

profile.restore(snapshots.pop());
console.log(profile.name); // "Ali" ← restored ✅

function doAction(user) {
  if      (user.status === "active")  { /* ... */ }
  else if (user.status === "banned")  { /* ... */ }
  else if (user.status === "pending") { /* ... */ }
}

class ActiveState {
  login()  { return "✅ Welcome back!";     }
  post()   { return "📝 Post published!";   }
}
class BannedState {
  login()  { return "❌ Account banned!";   }
  post()   { return "❌ Cannot post!";       }
}
class PendingState {
  login()  { return "⏳ Verify email first"; }
  post()   { return "⏳ Not activated yet";  }
}

class UserAccount {
  constructor() { this.state = new PendingState(); }
  setState(s)   { this.state = s; }
  login()       { return this.state.login(); }
  post()        { return this.state.post(); }
}

const acc = new UserAccount();
acc.login();                          // ⏳ Verify email
acc.setState(new ActiveState());
acc.login();                          // ✅ Welcome back! ✅

class LoginTemplate {
  login(data) { // the template — never changes
    this.validate(data);
    this.authenticate(data);
    this.logSuccess(data);
  }
  logSuccess(d){ console.log("✅ Logged: "+d.user); } // default
  validate()    { throw "implement validate"; }
  authenticate(){ throw "implement authenticate"; }
}

class EmailLogin extends LoginTemplate {
  validate(d)      { console.log("📧 Validate email: "+d.email); }
  authenticate(d)  { console.log("🔑 Check password"); }
}
class GoogleLogin extends LoginTemplate {
  validate(d)      { console.log("🔵 Validate token: "+d.token); }
  authenticate(d)  { console.log("🔵 Verify with Google"); }
}

new EmailLogin().login({ email:"ali@x.com", user:"Ali" }); // ✅

class Middleware {
  setNext(m) { this.next = m; return m; }
  handle(req) { return this.next?.handle(req); }
}

class AuthCheck extends Middleware {
  handle(req) {
    if (!req.user) return "❌ Login first!";
    return super.handle(req);
  }
}
class AdminCheck extends Middleware {
  handle(req) {
    if (!req.user.isAdmin) return "❌ Admins only!";
    return super.handle(req);
  }
}
class Handler extends Middleware {
  handle() { return "✅ Welcome Admin!"; }
}

const chain = new AuthCheck();
chain.setNext(new AdminCheck()).setNext(new Handler());
chain.handle({ user: { name:"Ali", isAdmin:true } }); // ✅

class FreeUser    { accept(v){ v.visitFree(this); }; name="Ali"; }
class PremiumUser { accept(v){ v.visitPremium(this); }; name="Ahmed"; }

// New visitor without touching the classes
class DiscountVisitor {
  visitFree(u)    { console.log(`${u.name}: 10% discount 🎁`); }
  visitPremium(u) { console.log(`${u.name}: 30% discount 🎁`); }
}
class ReportVisitor {
  visitFree(u)    { console.log(`${u.name}: Free plan 📊`); }
  visitPremium(u) { console.log(`${u.name}: Premium plan 📊`); }
}

const users = [new FreeUser(), new PremiumUser()];
users.forEach(u => u.accept(new DiscountVisitor())); // ✅

// Simple filter system for users
class NameFilter {
  constructor(name) { this.name = name; }
  interpret(users) {
    return users.filter(u => u.name === this.name);
  }
}
class AgeFilter {
  constructor(min) { this.min = min; }
  interpret(users) {
    return users.filter(u => u.age > this.min);
  }
}
class AndFilter {
  constructor(a, b) { this.a=a; this.b=b; }
  interpret(users) {
    return this.b.interpret(this.a.interpret(users));
  }
}

const users = [
  { name:"Ali",   age:25 },
  { name:"Ali",   age:17 },
  { name:"Ahmed", age:30 }
];
// "name=Ali AND age>20"
const query = new AndFilter(new NameFilter("Ali"), new AgeFilter(20));
query.interpret(users); // [{ name:"Ali", age:25 }] ✅