JS & React Native
Patterns + SOLID

// ✅ Module-level singleton (simplest RN approach)
import axios, { AxiosInstance } from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

class ApiClient {
  private static instance: ApiClient;
  private http: AxiosInstance;

  private constructor() {
    // Private constructor — blocks `new ApiClient()` from outside
    this.http = axios.create({
      baseURL: 'https://api.myapp.com/v1',
      timeout: 10000,
      headers: { 'Content-Type': 'application/json' },
    });

    // Add request interceptor — attach token on every request
    this.http.interceptors.request.use(async (config) => {
      const token = await AsyncStorage.getItem('@auth_token');
      if (token) config.headers.Authorization = `Bearer ${token}`;
      return config;
    });

    // Add response interceptor — handle 401 globally
    this.http.interceptors.response.use(
      res => res,
      async err => {
        if (err.response?.status === 401) {
          await AsyncStorage.removeItem('@auth_token');
          // Redirect to login — navigate globally
        }
        return Promise.reject(err);
      }
    );
  }

  // 🔑 Only way to get the instance
  public static getInstance(): ApiClient {
    if (!ApiClient.instance) {
      ApiClient.instance = new ApiClient();
    }
    return ApiClient.instance;
  }

  get<T>(url: string)           { return this.http.get<T>(url); }
  post<T>(url: string, data: any) { return this.http.post<T>(url, data); }
  put<T>(url: string, data: any)  { return this.http.put<T>(url, data); }
  del<T>(url: string)           { return this.http.delete<T>(url); }
}

// Usage — same instance everywhere in app
const api = ApiClient.getInstance();
const users = await api.get<User[]>('/users');
const profile = await api.post('/profile', { name: 'John' });

// Storage interface — all implementations must follow this
interface StorageDriver {
  get(key: string): Promise<string | null>;
  set(key: string, val: string): Promise<void>;
  remove(key: string): Promise<void>;
}

// Three concrete implementations
class AsyncStorageDriver implements StorageDriver { /* ... */ }
class MMKVDriver         implements StorageDriver { /* ... */ }
class SecureStoreDriver  implements StorageDriver { /* ... */ }

// ✅ Factory with registry Map (better than switch)
type StorageType = 'async' | 'mmkv' | 'secure';

const registry: Record<StorageType, () => StorageDriver> = {
  async:  () => new AsyncStorageDriver(),
  mmkv:   () => new MMKVDriver(),
  secure: () => new SecureStoreDriver(),
};

function createStorage(type: StorageType): StorageDriver {
  const factory = registry[type];
  if (!factory) throw new Error(`Unknown storage type: ${type}`);
  return factory();
}

// Usage — decision made at call site, implementation hidden
const tokenStorage  = createStorage('secure'); // biometric protect
const cacheStorage  = createStorage('mmkv');   // speed priority
const prefStorage   = createStorage('async');  // general purpose

// All use same interface — consumer code is identical
await tokenStorage.set('jwt', token);
const jwt = await tokenStorage.get('jwt');

// Proxy that logs API calls in dev and rate-limits in prod
function createApiProxy(apiService: ApiService): ApiService {
  const callCounts = new Map<string, { count: number; resetAt: number }>();
  const RATE_LIMIT = 10; // max 10 calls per endpoint per minute

  return new Proxy(apiService, {
    get(target, prop: keyof ApiService) {
      const original = target[prop];
      if (typeof original !== 'function') return original;

      return async (url: string, ...args: any[]) => {
        // 📊 Rate limit check
        const key = `${String(prop)}:${url}`;
        const now = Date.now();
        const entry = callCounts.get(key) || { count: 0, resetAt: now + 60000 };

        if (now > entry.resetAt) { entry.count = 0; entry.resetAt = now + 60000; }
        if (entry.count >= RATE_LIMIT) throw new Error(`Rate limit: ${key}`);

        entry.count++;
        callCounts.set(key, entry);

        // 🔍 Dev logging
        if (__DEV__) {
          console.log(`[API] ${String(prop).toUpperCase()} ${url}`, args[0] || '');
          const start = Date.now();
          const result = await original.call(target, url, ...args);
          console.log(`[API] ✓ ${Date.now() - start}ms`, result);
          return result;
        }

        return original.call(target, url, ...args);
      };
    },
  });
}

// Usage — transparent to all consumers
const api = createApiProxy(ApiClient.getInstance());
// Logs in dev, rate-limited in prod — zero changes to consumer

// Generic Observable — can be reused for any store
class Observable<T> {
  private observers: Set<(data: T) => void> = new Set();
  protected state: T;

  constructor(initialState: T) { this.state = initialState; }

  subscribe(fn: (data: T) => void): () => void {
    this.observers.add(fn);
    fn(this.state); // immediately emit current state
    return () => this.observers.delete(fn); // returns cleanup
  }

  protected setState(updater: (prev: T) => T) {
    this.state = updater(this.state);
    this.observers.forEach(fn => fn(this.state)); // notify all
  }

  getState() { return this.state; }
}

// ✅ Concrete Cart Store extending Observable
interface CartState { items: CartItem[]; total: number; }

class CartStore extends Observable<CartState> {
  constructor() { super({ items: [], total: 0 }); }

  addItem(item: CartItem) {
    this.setState(prev => ({
      items: [...prev.items, item],
      total: prev.total + item.price,
    }));
  }

  removeItem(id: string) {
    this.setState(prev => {
      const item = prev.items.find(i => i.id === id);
      return {
        items: prev.items.filter(i => i.id !== id),
        total: prev.total - (item?.price || 0),
      };
    });
  }
}

export const cartStore = new CartStore(); // singleton instance

// ✅ React Native hook to use Observable store
function useCart() {
  const [cartState, setCartState] = useState(cartStore.getState());

  useEffect(() => {
    const unsubscribe = cartStore.subscribe(setCartState);
    return unsubscribe; // cleanup prevents memory leak
  }, []);

  return { ...cartState, addItem: cartStore.addItem.bind(cartStore) };
}

// Usage in any component — all sync automatically
function CartBadge() {
  const { items } = useCart();
  return <Badge count={items.length} />;
}

// Typed EventBus for React Native — type-safe Pub/Sub
type EventMap = {
  'cart:add':    { productId: string; qty: number; price: number };
  'cart:remove': { productId: string };
  'auth:login':  { userId: string; token: string };
  'auth:logout': void;
  'nav:deeplink': { screen: string; params: Record<string, any> };
};

class TypedEventBus {
  private topics = new Map<string, Set<Function>>();

  subscribe<K extends keyof EventMap>(
    topic: K,
    fn: (payload: EventMap[K]) => void
  ): () => void {
    if (!this.topics.has(topic)) this.topics.set(topic, new Set());
    this.topics.get(topic)!.add(fn);
    return () => this.topics.get(topic)?.delete(fn); // cleanup fn
  }

  publish<K extends keyof EventMap>(topic: K, payload: EventMap[K]) {
    this.topics.get(topic)?.forEach(fn => fn(payload));
  }
}

export const bus = new TypedEventBus();

// ProductScreen.tsx — Publisher (knows nothing about TabBar)
const handleAddToCart = () => {
  bus.publish('cart:add', { productId: 'p-42', qty: 1, price: 29.99 });
};

// TabBar.tsx — Subscriber (knows nothing about ProductScreen)
useEffect(() => {
  const unsub = bus.subscribe('cart:add', ({ qty }) => {
    setBadgeCount(prev => prev + qty);
  });
  return unsub; // cleanup
}, []);

// ✅ Hook = modern container (replaces class container)
function useUserList() {
  const [users,   setUsers]   = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error,   setError]   = useState<string | null>(null);

  useEffect(() => {
    const load = async () => {
      try {
        const { data } = await api.get<User[]>('/users');
        setUsers(data);
      } catch (e) {
        setError('Failed to load users');
      } finally {
        setLoading(false);
      }
    };
    load();
  }, []);

  const refresh = () => { setLoading(true); };

  return { users, loading, error, refresh };
}

// ✅ Screen = thin orchestration layer
function UserListScreen() {
  const { users, loading, error, refresh } = useUserList();
  return <UserListUI users={users} loading={loading} error={error} onRefresh={refresh} />;
}

// ✅ Presentation = pure UI — no logic at all
function UserListUI({ users, loading, error, onRefresh }: Props) {
  if (loading) return <ActivityIndicator size="large" />;
  if (error)   return <ErrorView message={error} onRetry={onRefresh} />;
  return (
    <FlatList
      data={users}
      keyExtractor={u => u.id}
      renderItem={({ item }) => <UserCard user={item} />}
      refreshControl={<RefreshControl refreshing={false} onRefresh={onRefresh} />}
    />
  );
}

import * as Location from 'expo-location';

interface LocationState {
  coords: Location.LocationObject | null;
  error: string | null;
  loading: boolean;
  permissionStatus: 'granted' | 'denied' | 'undetermined';
}

function useLocation(watchMode = false) {
  const [state, setState] = useState<LocationState>({
    coords: null, error: null, loading: true, permissionStatus: 'undetermined',
  });

  useEffect(() => {
    let subscription: Location.LocationSubscription | null = null;

    const init = async () => {
      // 1️⃣ Request permission
      const { status } = await Location.requestForegroundPermissionsAsync();
      setState(s => ({ ...s, permissionStatus: status }));

      if (status !== 'granted') {
        setState(s => ({ ...s, loading: false, error: 'Permission denied' }));
        return;
      }

      if (watchMode) {
        // 2️⃣ Watch mode — continuous updates
        subscription = await Location.watchPositionAsync(
          { accuracy: Location.Accuracy.High, distanceInterval: 10 },
          (location) => setState(s => ({ ...s, coords: location, loading: false }))
        );
      } else {
        // 2️⃣ One-shot — get once
        const location = await Location.getCurrentPositionAsync({});
        setState(s => ({ ...s, coords: location, loading: false }));
      }
    };

    init();

    // 3️⃣ Cleanup — stop watching on unmount
    return () => { subscription?..remove(); };
  }, [watchMode]);

  return state;
}

// Usage
function MapScreen() {
  const { coords, loading, error } = useLocation(true); // watch mode
  if (loading) return <ActivityIndicator />;
  if (error)   return <Text>{error}</Text>;
  return <MapView region={{ lat: coords?.coords.latitude, ... }} />;
}

interface AuthState {
  user: User | null;
  token: string | null;
  isLoading: boolean;
  login(email: string, password: string): Promise<void>;
  logout(): Promise<void>;
}

const AuthContext = React.createContext<AuthState>(null!);

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user,      setUser]      = useState<User | null>(null);
  const [token,     setToken]     = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  // Restore session on app launch
  useEffect(() => {
    const restore = async () => {
      const savedToken = await SecureStore.getItemAsync('token');
      if (savedToken) {
        const userData = await api.get<User>('/me');
        setUser(userData.data);
        setToken(savedToken);
      }
      setIsLoading(false);
    };
    restore();
  }, []);

  const login = async (email: string, password: string) => {
    const { data } = await api.post('/auth/login', { email, password });
    await SecureStore.setItemAsync('token', data.token);
    setUser(data.user);
    setToken(data.token);
  };

  const logout = async () => {
    await SecureStore.deleteItemAsync('token');
    setUser(null);
    setToken(null);
  };

  // Memoize to prevent unnecessary re-renders
  const value = useMemo(
    () => ({ user, token, isLoading, login, logout }),
    [user, token, isLoading]
  );

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

// Custom hook — safe & semantic
export const useAuth = () => {
  const ctx = React.useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used inside AuthProvider');
  return ctx;
};