<!-- В head -->
<script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-database-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-auth-compat.js"></script>

const firebaseConfig = {
  apiKey: "ВАШ_API_KEY",
  authDomain: "ВАШ_PROJECT.firebaseapp.com",
  databaseURL: "https://ВАШ_PROJECT.firebaseio.com",
  projectId: "ВАШ_PROJECT",
  storageBucket: "ВАШ_PROJECT.appspot.com",
  messagingSenderId: "ВАШ_SENDER_ID",
  appId: "ВАШ_APP_ID"
};

firebase.initializeApp(firebaseConfig);
const database = firebase.database();

// Авторизация анонимного пользователя
firebase.auth().signInAnonymously()
  .then(() => {
    console.log('Анонимная авторизация успешна');
    initDatabase();
  });

function initDatabase() {
  const userId = firebase.auth().currentUser.uid;
  const tasksRef = database.ref(`users/${userId}/tasks`);

  // Синхронизация с сервером
  tasksRef.on('value', (snapshot) => {
    const data = snapshot.val() || {};
    renderTasks(data);
  });
}

function saveTaskToCloud(task) {
  const userId = firebase.auth().currentUser.uid;
  database.ref(`users/${userId}/tasks/${task.id}`).set(task);
}

function deleteTaskFromCloud(taskId) {
  const userId = firebase.auth().currentUser.uid;
  database.ref(`users/${userId}/tasks/${taskId}`).remove();
}

// В Firebase Console -> Rules
{
  "rules": {
    "users": {
      "$uid": {
        ".read": "auth != null && auth.uid == $uid",
        ".write": "auth != null && auth.uid == $uid"
      }
    }
  }
}

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    initDatabase();
  } else {
    console.error('Ошибка авторизации');
  }
});

<script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-messaging-compat.js"></script>

const messaging = firebase.messaging();

// Запрашиваем разрешение
function requestNotificationPermission() {
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      console.log('Уведомления разрешены');
      getToken();
    }
  });
}

// Получаем токен устройства
function getToken() {
  messaging.getToken({vapidKey: "ВАШ_VAPID_KEY"})
    .then(token => {
      console.log('Токен устройства:', token);
      saveToken(token);
    });
}

// Сохраняем токен в БД
function saveToken(token) {
  const userId = firebase.auth().currentUser.uid;
  database.ref(`users/${userId}/fcmToken`).set(token);
}

// Для работающего приложения
messaging.onMessage(payload => {
  console.log('Уведомление:', payload);
  showNotification(payload.notification);
});

// Для закрытого приложения
messaging.setBackgroundMessageHandler(payload => {
  return self.registration.showNotification(
    payload.notification.title,
    payload.notification
  );
});

function showNotification(notification) {
  new Notification(notification.title, {
    body: notification.body,
    icon: '/icon-192.png'
  });
}

<button id="notifyBtn">Включить уведомления</button>

document.getElementById('notifyBtn').addEventListener('click', requestNotificationPermission);

{
  notification: {
    title: "Новая задача",
    body: "Не забудьте выполнить!",
    icon: "/icon-192.png",
    click_action: "https://вашсайт.com/tasks"
  }
}

<div class="task-form">
  <input type="text" id="taskInput" placeholder="Новая задача...">
  <input type="datetime-local" id="taskDeadline">
  <button id="addButton">Добавить</button>
</div>

function addTask() {
  const taskText = taskInput.value;
  const deadline = taskDeadline.value;
  
  if (taskText) {
    const task = {
      id: Date.now(),
      text: taskText,
      completed: false,
      deadline: deadline || null,
      createdAt: firebase.database.ServerValue.TIMESTAMP
    };
    
    saveTaskToCloud(task);
    if (deadline) scheduleNotification(task);
  }
}

// В файле functions/index.js
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

exports.scheduleNotification = functions.database
  .ref('/users/{userId}/tasks/{taskId}')
  .onCreate(async (snapshot, context) => {
    const task = snapshot.val();
    
    if (task.deadline) {
      const deadline = new Date(task.deadline);
      const now = new Date();
      
      if (deadline > now) {
        const delay = deadline.getTime() - now.getTime();
        
        await new Promise(resolve => setTimeout(resolve, delay));
        
        const userRef = admin.database().ref(`users/${context.params.userId}`);
        const user = (await userRef.once('value')).val();
        
        if (user.fcmToken) {
          await admin.messaging().sendToDevice(user.fcmToken, {
            notification: {
              title: '⏰ Напоминание о задаче',
              body: task.text,
              clickAction: 'https://вашсайт.com/tasks'
            }
          });
        }
      }
    }
  });

// В объекте задачи
reminder: {
  repeat: 'daily',
  until: '2023-12-31'
}

if (new Date(deadline) < new Date()) {
  alert('Выберите дату в будущем!');
  return;
}

<div class="collaboration-panel">
  <input type="email" id="inviteEmail" placeholder="Пригласить по email">
  <button id="inviteButton">Пригласить</button>
  <div id="collaboratorsList"></div>
</div>

function shareTask(taskId, email) {
  const userId = firebase.auth().currentUser.uid;
  const shareRef = database.ref(`sharedTasks/${taskId}`);
  
  shareRef.push({
    userId: userId,
    email: email,
    accessLevel: 'editor',
    sharedAt: firebase.database.ServerValue.TIMESTAMP
  });
  
  // Отправляем email-приглашение через Cloud Function
  firebase.functions().httpsCallable('sendInvitation')({
    taskId: taskId,
    email: email
  });
}

exports.sendInvitation = functions.https.onCall((data, context) => {
  const taskId = data.taskId;
  const email = data.email;
  
  // Отправка email через SendGrid или другой сервис
  return sendEmail({
    to: email,
    subject: 'Приглашение к совместной работе',
    html: `Вас пригласили редактировать задачу: <a href="https://вашсайт.com/task/${taskId}">Открыть</a>`
  });
});

// Отслеживаем активных пользователей
function trackPresence() {
  const userId = firebase.auth().currentUser.uid;
  const presenceRef = database.ref(`status/${userId}`);
  
  firebase.database().ref('.info/connected').on('value', snap => {
    if (snap.val()) {
      presenceRef.onDisconnect().set('offline');
      presenceRef.set('online');
    }
  });
}

{
  "rules": {
    "sharedTasks": {
      "$taskId": {
        ".read": "auth != null && root.child('tasks/'+$taskId+'/owner').val() == auth.uid",
        ".write": "auth != null && root.child('tasks/'+$taskId+'/owner').val() == auth.uid"
      }
    }
  }
}

function logChange(taskId, change) {
  database.ref(`taskHistory/${taskId}`).push({
    change: change,
    by: firebase.auth().currentUser.uid,
    at: firebase.database.ServerValue.TIMESTAMP
  });
}

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}

<div class="task-chat">
  <div id="chatMessages"></div>
  <div class="chat-input">
    <input type="text" id="chatInput" placeholder="Ваше сообщение...">
    <button id="sendMessageBtn">Отправить</button>
  </div>
</div>

function sendMessage(taskId, message) {
  const userId = firebase.auth().currentUser.uid;
  database.ref(`taskChats/${taskId}`).push({
    text: message,
    sender: userId,
    timestamp: firebase.database.ServerValue.TIMESTAMP
  });
}

function loadMessages(taskId) {
  database.ref(`taskChats/${taskId}`).on('value', snapshot => {
    const messages = [];
    snapshot.forEach(child => {
      messages.push({
        id: child.key,
        ...child.val()
      });
    });
    renderMessages(messages);
  });
}

.task-chat {
  border-top: 1px solid #eee;
  margin-top: 20px;
  padding-top: 15px;
}

#chatMessages {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.chat-message {
  margin-bottom: 8px;
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 12px;
  display: inline-block;
  max-width: 70%;
}

.my-message {
  background: #007bff;
  color: white;
  float: right;
}

npm install -g firebase-tools
firebase login

firebase init hosting
# Выбираем ваш проект Firebase
# Указываем папку (public)
# Настраиваем как SPA (все URL → index.html)

firebase deploy --only hosting

git init
git add .
git commit -m "Мой To-Do List проект"
git remote add origin [ваш-репозиторий]
git push -u origin main

// service-worker.js
const CACHE_NAME = 'cache-v2';
const ASSETS = [
  '/',
  '/styles.min.css',
  '/script.min.js',
  '/icon-192.min.png'
];

<meta name="description" content="Менеджер задач с синхронизацией">
<meta property="og:image" content="/social-preview.png">

// Подключаем Google Analytics
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');

npm install typescript @types/node --save-dev

npx tsc --init

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

function addTask(text) {
  tasks.push({ text, completed: false });
}

interface Task {
  text: string;
  completed: boolean;
  id?: number;
}

const tasks: Task[] = [];

function addTask(text: string): void {
  tasks.push({ text, completed: false });
}

npx tsc

npx create-react-app todo-react --template typescript
cd todo-react

interface Task {
  id: number;
  text: string;
  completed: boolean;
}

export const TaskList = () => {
  const [tasks, setTasks] = useState<Task[]>([]);
  
  const addTask = (text: string) => {
    setTasks([...tasks, { id: Date.now(), text, completed: false }]);
  };

  return (
    <div className="task-manager">
      <TaskInput onAdd={addTask} />
      <ul className="task-list">
        {tasks.map(task => (
          <TaskItem key={task.id} task={task} />
        ))}
      </ul>
    </div>
  );
};

npm start

npm install @reduxjs/toolkit react-redux

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface Task {
  id: string;
  text: string;
  completed: boolean;
}

const initialState: Task[] = [];

export const tasksSlice = createSlice({
  name: 'tasks',
  initialState,
  reducers: {
    addTask: (state, action: PayloadAction<string>) => {
      state.push({
        id: Date.now().toString(),
        text: action.payload,
        completed: false
      });
    },
    toggleTask: (state, action: PayloadAction<string>) => {
      const task = state.find(t => t.id === action.payload);
      if (task) task.completed = !task.completed;
    }
  }
});

export const { addTask, toggleTask } = tasksSlice.actions;
export default tasksSlice.reducer;

import { configureStore } from '@reduxjs/toolkit';
import tasksReducer from '../features/tasks/tasksSlice';

export const store = configureStore({
  reducer: {
    tasks: tasksReducer
  }
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

import { Provider } from 'react-redux';
import { store } from './app/store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

import { useAppDispatch, useAppSelector } from '../app/hooks';
import { addTask, toggleTask } from './tasksSlice';

export const TaskList = () => {
  const tasks = useAppSelector(state => state.tasks);
  const dispatch = useAppDispatch();
  
  const handleAdd = (text: string) => dispatch(addTask(text));
  const handleToggle = (id: string) => dispatch(toggleTask(id));
  
  return (
    /* JSX с использованием tasks и handlers */
  );
};

import { Task } from './tasksSlice';

const API_URL = 'https://your-api.com/tasks';

export const fetchTasks = async (): Promise<Task[]> => {
  const response = await fetch(API_URL);
  return await response.json();
};

export const saveTask = async (task: Task): Promise<Task> => {
  const response = await fetch(API_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(task)
  });
  return await response.json();
};

import { createAsyncThunk } from '@reduxjs/toolkit';
import { fetchTasks, saveTask } from './tasksAPI';

export const loadTasks = createAsyncThunk('tasks/load', async () => {
  return await fetchTasks();
});

export const addTaskAsync = createAsyncThunk(
  'tasks/add',
  async (text: string) => {
    const newTask = { text, completed: false };
    return await saveTask(newTask);
  }
);

const tasksSlice = createSlice({
  // ...существующие reducers
  extraReducers: (builder) => {
    builder
      .addCase(loadTasks.fulfilled, (state, action) => {
        return action.payload;
      })
      .addCase(addTaskAsync.fulfilled, (state, action) => {
        state.push(action.payload);
      });
  }
});

import { loadTasks, addTaskAsync } from './tasksSlice';

export const TaskList = () => {
  const dispatch = useAppDispatch();
  const { loading, error } = useAppSelector(state => state.tasks.meta);

  useEffect(() => {
    dispatch(loadTasks());
  }, []);

  const handleAdd = (text: string) => {
    dispatch(addTaskAsync(text));
  };

  if (loading) return <Spinner />;
  if (error) return <ErrorAlert message={error} />;

  return ( /* ... */ );
};

npm install jest @types/jest @testing-library/react redux-mock-store --save-dev

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect']
};

import tasksReducer, { addTask, toggleTask } from './tasksSlice';

describe('tasks reducer', () => {
  it('should handle initial state', () => {
    expect(tasksReducer(undefined, { type: 'unknown' })).toEqual([]);
  });

  it('should handle addTask', () => {
    const actual = tasksReducer([], addTask('New task'));
    expect(actual[0].text).toEqual('New task');
    expect(actual[0].completed).toBe(false);
  });

  it('should handle toggleTask', () => {
    const initialState = [{ id: '1', text: 'Test', completed: false }];
    const actual = tasksReducer(initialState, toggleTask('1'));
    expect(actual[0].completed).toBe(true);
  });
});

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { loadTasks } from './tasksSlice';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

describe('async thunks', () => {
  it('dispatches fulfilled when loadTasks succeeds', async () => {
    const store = mockStore({});
    await store.dispatch(loadTasks() as any);
    const actions = store.getActions();
    
    expect(actions[0].type).toEqual('tasks/load/pending');
    expect(actions[1].type).toEqual('tasks/load/fulfilled');
  });
});

import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import { store } from '../../app/store';
import TaskList from './TaskList';

test('renders empty task list', () => {
  render(
    <Provider store={store}>
      <TaskList />
    </Provider>
  );
  
  expect(screen.getByText(/нет задач/i)).toBeInTheDocument();
});

name: Run Tests

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node
      uses: actions/setup-node@v2
      with:
        node-version: '16'
    
    - name: Install dependencies
      run: npm ci
      
    - name: Run tests
      run: npm test -- --coverage
      
    - name: Upload coverage
      uses: codecov/codecov-action@v1

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  }
}

deploy:
  needs: test
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v2
    - run: npm run build
    
    - name: Deploy to Vercel
      uses: amondnet/vercel-action@v20
      with:
        vercel-token: ${{ secrets.VERCEL_TOKEN }}
        vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
        vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}