izin hatasi diyor, kurulum komutunu basinda sudo koyarak calistirmayi deneyebilirsin

sudo npm install -g pnpm

gibi

hata soyluyor aslinda sebebini, JWT'yi parse ederken kullandigin secret key'in hatali.

process.env.TOKEN_SECRET!

burada belki sonundaki unlem isaretinden dolayi olabilir, boyle bir kullanim gormedim daha once javascript'de. En kotu debug etmek icin console'a basip bakabilirsin key'in dogru gelip gelmedigine.

gözükmeyeceği söylenen kişisel bilgileriniz zaten gözükmüyor, kayıt olurken koşulları siz kabul ettiniz, bugün profil düzenleme bölümünü aktif edeceğim oradan istediğiniz bilgileri güncelleyebilirsiniz.

sanal pos'un react ile bir baglantisi yok, genelde bir form submit etmekle ilgili entegrasyon tarafi react'de dolayisi ile react'e ozgu bir konu degil pos alacagin yerle alakali bilgin olmasi lazim

webStorm'un yeni ui'ini aktif ederek kullandim, ayarlardan sen de aktif edebilirsin :) ancak bu kadar bireysel sorulari dogrudan burada sormayi dogru bulmuyorum, videonun altina yazsaydin da soylerdim, bir dahakine daha duyarli olursan canini yerim <3

oncelikle iyi ogrenmeler, uzun bir surec, keyifli bir surec, bazen sancili bir surec olsada, basta kodu yazip calistigindan emin olursun, sonra kodunu refactor eder daha iyi nasil yazarim diye dusunursun, sonra daha performansli nasil yazarim diye dusunursun, kod tekrari nasil yapmam diye dusunursun vs. vs. bunlar zamanla oturur.

senin koduna ufak bir yorumum olacak, isimlendirmede TodoForm demissin en ust component'ine ama form ile ilgili bir sey olmadigi icin belki Todos olsa component'in adi daha iyi olur.

ayrica muhtemelen yeni basladigin icin state'i useState ile tutuyorsun ve parent'dan child component'lere kullanmak icin prop geciyorsun, bunun yerine react'in kendi icinde bulunan context yapisini deneyebilirsin.

TodoHeader component'i yerine AddTodo diye isimlendirip icinde form kullanarak islemlerini onSubmit'de handle edebilirsin.

Todos ve Todo componentlerin teorida ayni isi yapiyor, mantik olarak Todos icinde map'leyip Todo icinde todo'yu gostermen daha dogru olurdu.

Simdi tum bu yazdiklarima gore kodunu yeniden yazacak olsam soyle yazardim:

context/todo.js

import { createContext, useContext, useState } from "react";

export const TodoContext = createContext();
export const useTodos = () => useContext(TodoContext);

export const TodoProvider = ({ children }) => {
  const [todos, setTodos] = useState([]);

  const addTodo = (data) => {
    setTodos((todos) => [...todos, data]);
  };

  const removeTodo = (key) => {
    setTodos((todos) => todos.filter((todo, i) => i !== key));
  };

  const removeAllTodos = () => {
    setTodos([]);
  };

  // child componentlerin ulasacagi datalar
  const contextData = {
    todos,
    addTodo,
    removeTodo,
    removeAllTodos
  };

  return (
    <TodoContext.Provider value={contextData}>{children}</TodoContext.Provider>
  );
};

burada react'in context yapisi ile state'lerimizi child componentlerde kullanabilmek icin global olarak yonetiyoruz. Ayrica todo ekleme, silme, tumunu silme gibi metodlarida burada yazip context'in icine atiyorum, boylece useTodos() cagirdigimiz her yerde contextData icindekilere erisebiliyoruz.

components/add-todo.jsx

import { useState } from "react";
import { useTodos } from "../context/todo";

export default function AddTodo() {
  const { addTodo } = useTodos();
  const [todo, setTodo] = useState("");

  const handleChange = (e) => {
    e.preventDefault();
    addTodo({
      title: todo
    });
    setTodo("");
  };

  return (
    <form onSubmit={handleChange}>
      <input value={todo} onChange={(e) => setTodo(e.target.value)} />
      <button disabled={!todo} type="submit">
        Ekle
      </button>
    </form>
  );
}

gordugun gibi, todo ekleme component'inde eklenecek todo'yu context icindeki addTodo metodunu cagirip kullaniyoruz.

components/todos.jsx

import { useTodos } from "../context/todo";
import Todo from "./todo";

export default function Todos() {
  const { todos, removeAllTodos } = useTodos();

  const deleteHandle = () => {
    removeAllTodos();
  };

  if (todos.length === 0) {
    return <div>hic todo eklenmemis :(</div>;
  }

  return (
    <>
      {todos.map((todo, key) => (
        <Todo data={todo} id={key} key={key} />
      ))}
      <button onClick={deleteHandle}>Tumunu sil</button>
    </>
  );
}

burada da ayni mantikta todos dizisini ve removeAllTodos metodunu context'en aliyoruz.

components/todo.jsx

import { useTodos } from "../context/todo";

export default function Todo({ data, id }) {
  const { removeTodo } = useTodos();
  const deleteHandle = () => {
    removeTodo(id);
  };

  return (
    <div>
      {data.title}
      <button onClick={deleteHandle}>Sil</button>
    </div>
  );
}

silme isleminde ise dizideki index numarasina gore yaptim, bu elbette rastgele bir id uretilip todo icinde tutulsaydi ona gorede eslestirme yapip kullanabilirsin, basit bir todo uygulamasi oldugu icin bunu yapmadim simdilik.

app.jsx

import { TodoProvider } from "./context/todo";
import AddTodo from "./components/add-todo";
import Todos from "./components/todos";
export default function App() {
  return (
    <TodoProvider>
      <AddTodo />
      <Todos />
    </TodoProvider>
  );
}

Son olarak TodoProvider i context dosyamizdan alip diger component'leri bunun icine yaziyoruz, bu sayede diger componentlerde context icindeki degerlere erisip islem yapabiliyoruz.

calisan ornegine suradan bakabilirsin:
https://codesandbox.io/s/sleepy-volhard-rz7645

anlamadigin ya da merak ettigin bir sey olursa sormaktan cekinme :)