Architectural Patterns — Series 2

class ViewModel {
  #listeners = [];
  #name = '';

  get name() {
    return this.#name;
  }
  set name(value) {
    this.#name = value;
    this.#listeners.forEach((fn) => fn(value));
  }
  onChange(fn) {
    this.#listeners.push(fn);
  }
}

const vm = new ViewModel();
let renderedText = '';
vm.onChange((value) => {
  renderedText = `Hello, ${value}`;
});

vm.name = 'Alice';
console.log(renderedText);

vm.name = 'Bob';
console.log(renderedText);

function createStore(reducer, initialState) {
  let state = initialState;
  const listeners = [];
  return {
    getState: () => state,
    dispatch(action) {
      state = reducer(state, action);
      listeners.forEach((l) => l(state));
    },
    subscribe(listener) {
      listeners.push(listener);
    },
  };
}

function counterReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer, { count: 0 });
const history = [];
store.subscribe((state) => history.push(state.count));

store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });

console.log(history);
console.log(store.getState().count);

class InMemoryUserRepository {
  #users = new Map();
  save(user) {
    this.#users.set(user.id, user);
  }
  findById(id) {
    return this.#users.get(id) ?? null;
  }
  findAll() {
    return [...this.#users.values()];
  }
}

class UserService {
  constructor(repository) {
    this.repository = repository;
  }
  registerUser(user) {
    this.repository.save(user);
    return this.repository.findById(user.id);
  }
}

const service = new UserService(new InMemoryUserRepository());
const registered = service.registerUser({ id: 1, name: 'Alice' });

console.log(registered.name);
console.log(service.repository.findAll().length);