feat: todo list with firebase integration

niltonxp2 · Jan 13, 2023 · a6694eb · a6694eb
commit a6694eb
Show file tree

Hide file tree

Showing 17 changed files with 2,181 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "todo-list-tailwind",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.0.13",
+    "firebase": "^9.15.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^3.0.0",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.4",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0"
+  }
+}
diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,165 @@
+import { KeyboardEvent, useEffect, useRef, useState } from 'react';
+import { TrashIcon, PlusIcon, PencilIcon, CheckIcon } from '@heroicons/react/24/solid';
+
+import { ref, set, onValue, push, remove, update } from 'firebase/database';
+import { db } from './firebase';
+
+import './index.css';
+import { Input } from './components/input';
+
+export type TTodo = {
+  key: string;
+  label: string;
+  isEditMode?: boolean;
+};
+
+export type TEditedTodos = Record<string, string>;
+
+const editedTodos: TEditedTodos = {};
+
+function App() {
+  const [todos, setTodos] = useState<TTodo[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const todoListRef = ref(db, 'todos/');
+
+  async function handleAddTodo() {
+    const newTodo = inputRef.current?.value;
+
+    if (!newTodo) {
+      alert('You must type something to be added!');
+      return;
+    }
+
+    const todoFounded = todos.find((todo) => todo.label === newTodo);
+
+    if (todoFounded) {
+      alert(`Todo ${newTodo} was already added! Please type a new one.`);
+      return;
+    }
+
+    inputRef.current.value = '';
+
+    // push: it creates a new key to add an item to the todo list
+    const newTodoRef = push(todoListRef);
+
+    // set: add a new item to the todo list
+    set(newTodoRef, {
+      label: newTodo,
+    });
+  }
+
+  // add an item when the user clicks enter
+  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      handleAddTodo();
+    }
+  }
+
+  function handleDeleteTodo(key: TTodo['key']) {
+    remove(ref(db, 'todos/' + key));
+  }
+
+  function handleTodoEdit(key: TTodo['key']) {
+    const valueEdited = editedTodos[key];
+
+    const payload = {
+      label: valueEdited,
+    };
+
+    handleToggleTodoEdition(key);
+
+    update(ref(db, 'todos/' + key), payload);
+  }
+
+  function handleToggleTodoEdition(key: TTodo['key']) {
+    const todoIndex = todos.findIndex((todo) => todo.key === key);
+    const newTodos = [...todos];
+    const currentState = Boolean(newTodos[todoIndex].isEditMode);
+    newTodos[todoIndex].isEditMode = !currentState;
+    setTodos(newTodos);
+  }
+
+  useEffect(() => {
+    // observer: it will update the state always the DB changes
+    return onValue(todoListRef, (snapshot) => {
+      if (snapshot.exists()) {
+        const data: TTodo[] = [];
+
+        snapshot.forEach((childSnapshot) => {
+          const childKey = childSnapshot.key;
+          const childData = childSnapshot.val();
+          data.push({ ...childData, key: childKey });
+        });
+
+        setTodos(data);
+      } else {
+        setTodos([]);
+      }
+    });
+  }, []);
+
+  return (
+    <main className='flex place-items-center h-screen'>
+      <section className='p-6 max-w-xl mx-auto bg-slate-50 rounded-sm shadow-lg h-96 flex flex-col'>
+        <h1 className='text-center font-bold mb-2'>TODO</h1>
+
+        <div className='flex justify-center gap-2'>
+          <form>
+            <label htmlFor='newTodo' className='font-bold'>
+              New todo:{' '}
+            </label>
+            <input
+              ref={inputRef}
+              id='newTodo'
+              type='text'
+              className='box-border hover:border-separate p-1'
+              onKeyDown={handleKeyDown}
+            />
+          </form>
+
+          <button type='submit'>
+            <PlusIcon className='h-5 w-5 hover:opacity-80 hover:cursor-pointer' onClick={handleAddTodo} />
+          </button>
+        </div>
+
+        {todos.length === 0 ? (
+          <h3 className='text-center mt-4 text-slate-400'>You can add new todos anytime!</h3>
+        ) : (
+          <ul className='list-none mt-4 bg-white overflow-auto flex gap-2 p-2 flex-col rounded-md'>
+            {todos.map(({ key, label, isEditMode }) => (
+              <li key={key} className='flex justify-between items-center rounded-sm'>
+                {isEditMode ? (
+                  <Input key={key} todoKey={key} value={label} editedTodos={editedTodos} />
+                ) : (
+                  <span>{label}</span>
+                )}
+
+                <div className='flex gap-1'>
+                  {isEditMode ? (
+                    <CheckIcon
+                      className='h-4 w-4 hover:opacity-80 hover:cursor-pointer'
+                      onClick={() => handleTodoEdit(key)}
+                    />
+                  ) : (
+                    <PencilIcon
+                      className='h-4 w-4 hover:opacity-80 hover:cursor-pointer'
+                      onClick={() => handleToggleTodoEdition(key)}
+                    />
+                  )}
+
+                  <TrashIcon
+                    className='h-4 w-4 hover:opacity-80 hover:cursor-pointer'
+                    onClick={() => handleDeleteTodo(key)}
+                  />
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </main>
+  );
+}
+
+export default App;
diff --git a/src/components/input/index.tsx b/src/components/input/index.tsx
@@ -0,0 +1,30 @@
+import { ChangeEvent, FC, InputHTMLAttributes, useState } from 'react';
+import { TEditedTodos } from '../../App';
+
+type TProps = {
+  todoKey: string;
+  editedTodos: TEditedTodos;
+} & InputHTMLAttributes<HTMLInputElement>;
+
+export const Input: FC<TProps> = ({ value: defaultValue, editedTodos, todoKey, ...props }) => {
+  const [value, setValue] = useState(defaultValue);
+
+  function handleChangeValue(e: ChangeEvent<HTMLInputElement>) {
+    const newValue = e.target.value;
+
+    editedTodos[todoKey] = newValue;
+
+    setValue(newValue);
+  }
+
+  return (
+    <input
+      {...props}
+      id='newTodo'
+      type='text'
+      className='box-border hover:border-separate p-2 rounded-lg h-6 bg-slate-50'
+      value={value}
+      onChange={handleChangeValue}
+    />
+  );
+};
diff --git a/src/firebase.ts b/src/firebase.ts
@@ -0,0 +1,36 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from 'firebase/app';
+import { getAnalytics } from 'firebase/analytics';
+import { getDatabase } from 'firebase/database';
+import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
+
+const firebaseConfig = {
+  apiKey: 'AIzaSyC0nYmV_RNDaQPbgWgirbQO2QJmkQspT1Q',
+  authDomain: 'todo-list-357c3.firebaseapp.com',
+  databaseURL: 'https://todo-list-357c3-default-rtdb.firebaseio.com',
+  projectId: 'todo-list-357c3',
+  storageBucket: 'todo-list-357c3.appspot.com',
+  messagingSenderId: '190453493135',
+  appId: '1:190453493135:web:6c54cc1ad500b79864effa',
+  measurementId: 'G-1FY5QKRFSW',
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+export const analytics = getAnalytics(app);
+
+// Initialize Cloud Firestore and get a reference to the service
+export const db = getDatabase(app);
+
+// Initialize Firebase Authentication and get a reference to the service
+export const auth = getAuth(app);
+
+signInWithEmailAndPassword(auth, '[email protected]', 'Tatu9012')
+  .then((userCredential) => {
+    // Signed in
+    const user = userCredential.user;
+    console.log('user logged ->', user);
+  })
+  .catch((error) => {
+    console.log('Error ->', error);
+  });
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,20 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})