Przebudowanie headera z myślą pod mobilne przeglądarki. Zmiana adresu urb pocketbase. Dodanie możliwości zmieniania nazwy użytkownika.

src/components/Header.tsx

@@ -15,23 +15,36 @@ const Header: React.FC = () => {
 
   return (
     <header className="bg-blue-500 p-4">
-      <div className="container mx-auto flex justify-between items-center">
-        <Link to="/" className="text-white text-2xl font-bold">Reddit-Like-App</Link>
-        <Link to="https://gitea.garandplg.com/GarandPLG/reddit-like-app" className="text-white text-xl font-bold">Kod źródłowy</Link>
-        <nav>
+      <div className="container mx-auto flex justify-between items-center text-center">
+        <Link to="/" className="text-white md:text-2xl font-bold">Reddit-Like-App</Link>
+
+        <span className='text-4xl mx-1'>|</span>
+
+        <Link to="https://gitea.garandplg.com/GarandPLG/reddit-like-app" className="text-white md:text-xl font-bold">Kod źródłowy</Link>
+
+        <span className='text-3xl mx-1'>|</span>
+
         {isAuth ? (
           <>
             <Link to="/create-post" className="text-white mr-4">Stwórz post</Link>
+
+            <span className='text-3xl mx-1'>|</span>
+
             <Link to="/profile" className="text-white mr-4">Profil</Link>
+
+            <span className='text-3xl mx-1'>|</span>
+
             <button onClick={handleLogout} className="text-white">Wyloguj się</button>
           </>
         ) : (
           <>
             <Link to="/login" className="text-white mr-4">Zaloguj się</Link>
+      
+            <span className='text-3xl mx-1'>|</span>
+
             <Link to="/register" className="text-white">Zarejestruj się</Link>
           </>
         )}
-        </nav>
       </div>
     </header>
   );

src/lib/pocketbase.ts

@@ -1,6 +1,6 @@
 import PocketBase from 'pocketbase';
 
-export const pb = new PocketBase('https://pb.garandplg.com').autoCancellation(false);
+export const pb = new PocketBase('https://rla-pb.garandplg.com').autoCancellation(false);
 
 // Inicjacja połączenia z moją instancją pocketbase
 // oraz wyeksportowanie tego połączenia

src/pages/Home.tsx

@@ -19,7 +19,6 @@ const Home: React.FC = () => {
       try {
         const records = await pb.collection('posts').getFullList<PostType>({
           sort: '-votes',
-          expand: 'user',
         });
         setPosts(records);
       } catch (error) {

src/pages/Profile.tsx

@@ -5,6 +5,7 @@ import { updateAuthAtom } from '../atoms/authAtom';
 
 const Profile: React.FC = () => {
   const [email, setEmail] = useState('');
+  const [username, setUsername] = useState('');
   const [newPassword, setNewPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
   const [, updateAuth] = useAtom(updateAuthAtom);
@@ -23,7 +24,7 @@ const Profile: React.FC = () => {
     }
 
     try {
-      const data: Record<string, any> = { email };
+      const data: Record<string, string> = { email, username };
       if (newPassword) {
         data.password = newPassword;
         data.passwordConfirm = confirmPassword;
@@ -47,7 +48,7 @@ const Profile: React.FC = () => {
         alert('Konto poprawnie usunięte');
       } catch (error) {
         console.error('Błąd z usuwaniem konta:', error);
-        alert('Nie udało się usunąc konta.');
+        alert('Nie udało się usunąć konta.');
       }
     }
   };
@@ -67,12 +68,24 @@ const Profile: React.FC = () => {
             className="w-full px-3 py-2 border rounded"
           />
         </div>
+        <div>
+          <label htmlFor="username" className="block mb-1">Nazwa użytkownika</label>
+          <input
+            type="text"
+            id="username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            required
+            className="w-full px-3 py-2 border rounded"
+          />
+        </div>
         <div>
           <label htmlFor="newPassword" className="block mb-1">Nowe hasło</label>
           <input
             type="password"
             id="newPassword"
             value={newPassword}
+            placeholder='Zostawienie pustego pola pozostawi hasło takie jakie było'
             onChange={(e) => setNewPassword(e.target.value)}
             className="w-full px-3 py-2 border rounded"
           />

src/pages/Register.tsx

@@ -1,15 +1,12 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { pb } from '../lib/pocketbase';
-import { useAtom } from 'jotai';
-import { updateAuthAtom } from '../atoms/authAtom';
 
 const Register: React.FC = () => {
   const [email, setEmail] = useState('');
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [passwordConfirm, setPasswordConfirm] = useState('');
-  const [, updateAuth] = useAtom(updateAuthAtom);
   const navigate = useNavigate();
 
   const handleSubmit = async (e: React.FormEvent) => {