Feat: setup the small task manager (#1)

* Initial commit

* feat: create simple task manager

Author: seaburrows

README.md

@@ -0,0 +1,3 @@
+# Typescript Component Examples
+
+A collection of small components to demonstrate patterns and thinking.

initial

@@ -0,0 +1,77 @@
+# Task Manager
+
+A simple and efficient task management application built with React and TypeScript. Keep track of your tasks, mark them as complete, and organize them with filtering and sorting capabilities.
+
+## Features
+
+- **Add Tasks**: Quickly add new tasks with a simple input form
+- **Mark Complete**: Toggle tasks between active and completed states
+- **Filter Tasks**: View all tasks, only active tasks, or only completed tasks
+- **Sort Tasks**: Alphabetically sort your tasks in ascending or descending order
+- **Persistent Storage**: Tasks are automatically saved to localStorage and persist between sessions
+- **Keyboard Shortcuts**: Press Escape to clear the input field
+- **Task Counter**: See how many tasks you've added in the current session
+
+## Usage
+
+### Adding Tasks
+
+1. Type your task in the input field
+2. Press Enter or click the "Add Task" button
+3. Your task will appear in the list below
+
+### Managing Tasks
+
+- **Complete a task**: Click the checkbox next to a task to mark it as complete
+- **Delete a task**: Click the "Delete" button to remove a task
+- **Filter tasks**: Use the "All", "Active", or "Completed" buttons to filter your view
+- **Sort tasks**: Click the "Sort" button to toggle between ascending, descending, and unsorted views
+
+### Keyboard Shortcuts
+
+- **Escape**: Clear the input field (useful for quickly starting over)
+
+## Technical Details
+
+### Built With
+
+- React 18
+- TypeScript
+- Local Storage API for persistence
+
+### Components
+
+- **TaskList**: Main container component managing state and task operations
+- **TaskItem**: Individual task display with checkbox and delete button
+- **AddTaskForm**: Input form for creating new tasks
+- **useLocalStorage**: Custom hook for localStorage persistence
+
+### Data Persistence
+
+All tasks are automatically saved to your browser's localStorage. Your tasks will be available even after closing and reopening the browser, as long as you're using the same browser on the same device.
+
+## Development
+
+This is a TypeScript React application. The components follow React best practices with proper state management, memoization, and effect cleanup.
+
+### File Structure
+
+```
+├── task-list.tsx          # Main component with task management logic
+├── task-item.tsx          # Individual task display component
+├── add-task-form.tsx      # Form for adding new tasks
+└── use-local-storage.ts   # Custom hook for localStorage integration
+```
+
+## Browser Support
+
+Works in all modern browsers that support:
+- ES6+ JavaScript
+- localStorage API
+- React 18
+
+## Notes
+
+- Tasks are stored per-browser, not synced across devices
+- Maximum storage is limited by browser localStorage limits (typically ~5-10MB)
+- Task IDs are generated using timestamps for uniqueness

small-task-manager/README.md

@@ -0,0 +1,70 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+type AddTaskFormProps = {
+  onAddTask: (text: string) => void;
+};
+
+export const AddTaskForm: React.FC<AddTaskFormProps> = ({ onAddTask }) => {
+  const [inputValue, setInputValue] = useState('');
+  const [submissionCount, setSubmissionCount] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    // Focus input on mount only
+    inputRef.current?.focus();
+  }, []); // Empty array - only runs on mount
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmedValue = inputValue.trim();
+
+    if (trimmedValue) {
+      onAddTask(trimmedValue);
+      setSubmissionCount(prev => prev + 1); // Use state for values that need to trigger re-renders
+      setInputValue('');
+      inputRef.current?.focus();
+    }
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit} style={{ marginBottom: '20px' }}>
+        <input
+          ref={inputRef}
+          type="text"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          placeholder="What needs to be done?"
+          aria-label="New task input"
+          style={{
+            padding: '10px',
+            width: '70%',
+            fontSize: '16px',
+            border: '1px solid #ddd',
+            borderRadius: '4px',
+          }}
+        />
+        <button
+          type="submit"
+          disabled={!inputValue.trim()}
+          style={{
+            padding: '10px 20px',
+            marginLeft: '10px',
+            fontSize: '16px',
+            background: '#4CAF50',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: inputValue.trim() ? 'pointer' : 'not-allowed',
+            opacity: inputValue.trim() ? 1 : 0.6,
+          }}
+        >
+          Add Task
+        </button>
+      </form>
+      <small style={{ color: '#666', fontSize: '12px' }}>
+        Tasks added this session: {submissionCount}
+      </small>
+    </div>
+  );
+};

small-task-manager/add-task-form.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Task } from './task-list';
+
+type TaskItemProps = {
+  task: Task;
+  onToggle: (id: string) => void;
+  onDelete: (id: string) => void;
+};
+
+export const TaskItem: React.FC<TaskItemProps> = React.memo(({ task, onToggle, onDelete }) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '10px',
+        border: '1px solid #ddd',
+        marginBottom: '8px',
+        borderRadius: '4px',
+      }}
+    >
+      <input
+        type="checkbox"
+        checked={task.completed}
+        onChange={() => onToggle(task.id)}
+        aria-label={`Mark "${task.text}" as ${task.completed ? 'incomplete' : 'complete'}`}
+        style={{ marginRight: '10px' }}
+      />
+      <span
+        style={{
+          flex: 1,
+          textDecoration: task.completed ? 'line-through' : 'none',
+          color: task.completed ? '#888' : '#000',
+        }}
+      >
+        {task.text}
+      </span>
+      <button
+        onClick={() => onDelete(task.id)}
+        aria-label={`Delete task "${task.text}"`}
+        style={{
+          padding: '4px 8px',
+          background: '#ff4444',
+          color: 'white',
+          border: 'none',
+          borderRadius: '4px',
+          cursor: 'pointer',
+        }}
+      >
+        Delete
+      </button>
+    </div>
+  );
+});
+
+TaskItem.displayName = 'TaskItem';

small-task-manager/task-item.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useCallback } from 'react';
+import { TaskItem } from './task-item';
+import { AddTaskForm } from './add-task-form';
+import { useLocalStorage } from './use-local-storage';
+
+export type Task = {
+  id: string;
+  text: string;
+  completed: boolean;
+  createdAt: number;
+};
+
+export const TaskList: React.FC = () => {
+  const [tasks, setTasks] = useLocalStorage<Task[]>('tasks', []);
+  const [filter, setFilter] = useState<'all' | 'active' | 'completed'>('all');
+
+  const addTask = useCallback((text: string) => {
+    const newTask: Task = {
+      id: `task-${Date.now()}`,
+      text,
+      completed: false,
+      createdAt: Date.now(),
+    };
+    setTasks(prevTasks => [...prevTasks, newTask]);
+  }, [setTasks]);
+
+  const toggleTask = useCallback((id: string) => {
+    setTasks(prevTasks =>
+      prevTasks.map(task =>
+        task.id === id ? { ...task, completed: !task.completed } : task
+      )
+    );
+  }, [setTasks]);
+
+  const deleteTask = useCallback((id: string) => {
+    setTasks(prevTasks => prevTasks.filter(task => task.id !== id));
+  }, [setTasks]);
+
+  const filteredTasks = tasks.filter(task => {
+    if (filter === 'active') return !task.completed;
+    if (filter === 'completed') return task.completed;
+    return true;
+  });
+
+  const activeCount = tasks.filter(t => !t.completed).length;
+
+  return (
+    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
+      <h1>Task Manager</h1>
+
+      <AddTaskForm onAddTask={addTask} />
+
+      <div style={{ margin: '20px 0' }}>
+        <button
+          onClick={() => setFilter('all')}
+          style={{ fontWeight: filter === 'all' ? 'bold' : 'normal' }}
+        >
+          All ({tasks.length})
+        </button>
+        <button
+          onClick={() => setFilter('active')}
+          style={{ fontWeight: filter === 'active' ? 'bold' : 'normal', marginLeft: '10px' }}
+        >
+          Active ({activeCount})
+        </button>
+        <button
+          onClick={() => setFilter('completed')}
+          style={{ fontWeight: filter === 'completed' ? 'bold' : 'normal', marginLeft: '10px' }}
+        >
+          Completed ({tasks.length - activeCount})
+        </button>
+      </div>
+
+      <div>
+        {filteredTasks.length === 0 ? (
+          <p>No tasks to show</p>
+        ) : (
+          filteredTasks.map(task => (
+            <TaskItem
+              key={task.id}
+              task={task}
+              onToggle={toggleTask}
+              onDelete={deleteTask}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+};

small-task-manager/task-list.tsx

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+
+export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((prev: T) => T)) => void] {
+  // Get initial value from localStorage or use provided initialValue
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error(`Error reading localStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+
+  // Update localStorage when storedValue changes
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(key, JSON.stringify(storedValue));
+    } catch (error) {
+      console.error(`Error setting localStorage key "${key}":`, error);
+    }
+  }, [key, storedValue]);
+
+  return [storedValue, setStoredValue];
+}