Merge pull request #77 from Noroff-FED-Campus-Assignments/staging

Staging

src/components/Sosials-profile/index.jsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import fetcher from "../Sosials-profile/index";
 
 const Sosials = () => {
   const [profile, setProfile] = useState(null);
@@ -23,10 +22,11 @@ const Sosials = () => {
           sortOrder: sorting.sortOrder,
         });
 
-        const response = await fetcher(
+        const response = await fetch(
           `https://api.noroff.dev/api/v1/social/profiles/?${params.toString()}`,
           {
             method: "GET",
+            headers: options.headers,
           }
         );
 

src/components/navbar/users-post/index.jsx

@@ -20,12 +20,8 @@ export default function CreatePostForm() {
     const form = event.target;
     const { title, body, imageUrl } = form.elements;
 
-    const accessKey = {
-      headers: {
-        Authorization:
-          "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTQyMywibmFtZSI6Ik1pcm1pciIsImVtYWlsIjoiTWlybWlyMjAyM0BzdHVkLm5vcm9mZi5ubyIsImF2YXRhciI6Imh0dHBzOi8vaW1hZ2VzLnVuc3BsYXNoLmNvbS9waG90by0xNTk4MDc5MjUzNDIyLTYzOGZhOWIyZDE2MD9peGxpYj1yYi00LjAuMyZpeGlkPU0zd3hNakEzZkRCOE1IeHpaV0Z5WTJoOE1UUjhmSEJwZEdKMWJHeDhaVzU4TUh4OE1IeDhmREElM0QmYXV0bz1mb3JtYXQmZml0PWNyb3Amdz04MDAmcT02MCIsImJhbm5lciI6Imh0dHBzOi8vaW1hZ2VzLnVuc3BsYXNoLmNvbS9waG90by0xNjk2OTIxODgxOTAzLWU4N2U1NjYyZDliND9peGxpYj1yYi00LjAuMyZpeGlkPU0zd3hNakEzZkRCOE1IeGxaR2wwYjNKcFlXd3RabVZsWkh3ME1ueDhmR1Z1ZkRCOGZIeDhmQSUzRCUzRCZhdXRvPWZvcm1hdCZmaXQ9Y3JvcCZ3PTgwMCZxPTYwIiwiaWF0IjoxNjk3MDYzMzIzfQ.NrTN_OF0maTAH0H_4mhdw4pIkDcuxz_sY3ISUcH-2m4",
-      },
-    };
+    //Correct user id and token inserted - CNB.
+    const accessKey = localStorage.getItem("jwt");
 
     const newPost = {
       title: title.value,
@@ -40,7 +36,7 @@ export default function CreatePostForm() {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
-            ...accessKey.headers,
+            Authorization: `Bearer ${accessKey}`,
           },
           body: JSON.stringify(newPost),
         }
@@ -77,7 +73,7 @@ export default function CreatePostForm() {
             id="title"
             name="title"
             required
-            className="w-full h-auto resize-none overflow-hidden text-sm border border-gray-300  dark:text-white dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800 p-2 rounded-3xl"
+            className="w-full h-auto p-2 overflow-hidden text-sm border border-gray-300 resize-none dark:text-white dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800 rounded-3xl"
           />
         </div>
       </section>
@@ -93,7 +89,7 @@ export default function CreatePostForm() {
           <input
             id="body"
             name="body"
-            className="w-full h-20 resize-none overflow-hidden text-sm border border-gray-300  dark:text-white dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800 p-2 rounded-3xl"
+            className="w-full h-20 p-2 overflow-hidden text-sm border border-gray-300 resize-none dark:text-white dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800 rounded-3xl"
           />
         </div>
       </div>
@@ -109,7 +105,7 @@ export default function CreatePostForm() {
           type="url"
           id="imageUrl"
           name="imageUrl"
-          className="border border-gray-300 dark:text-white dark:bg-gray-700 dark:border-gray-600 p-2 rounded-3xl"
+          className="p-2 border border-gray-300 dark:text-white dark:bg-gray-700 dark:border-gray-600 rounded-3xl"
         />
       </div>
 

src/components/profile-page/index.jsx

@@ -27,7 +27,6 @@ export default function ProfilePage() {
         if (response.ok) {
           const data = await response.json();
           setProfile(data);
-          console.log(data);
         } else {
           console.error("Failed to fetch profile");
         }
@@ -41,8 +40,6 @@ export default function ProfilePage() {
     fetchPosts();
   }, []);
 
-  console.log(profile);
-
   return (
     <div className="w-full">
       {/* Profile Section */}

src/components/sign-up_form/index.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
-import { registerUser } from '../../lib/api';
+import { registerUser, loginUser } from '../../lib/api';
 import logo from '../../assets/Y_logo.png';
 /* import Input from './Input'; ---- planed*/
 
@@ -29,12 +29,15 @@ const SignUpForm = () => {
     const [errorMessage, setErrorMessage] = useState('');
     const [spin] = useState(false);
 
-    const signUpMutation = useMutation(async ({ email, password, username }) => {
-        const data = await registerUser({ email, password, username });
+    const signUpMutation = useMutation(async ({ username, email, password }) => {
+        const data = await registerUser({ username, email, password });
         setShowModal(true);
-        setTimeout(() => {
+        setTimeout(async () => {
             setShowModal(false);
-            navigate({ to: '/', params: { id: data.id } });
+            const loginData = await loginUser(email, password);
+            localStorage.setItem("jwt", loginData.accessToken);
+            localStorage.setItem("user_email", loginData.email);
+            navigate({ to: "/" });
         }, 2500);
     });
 
@@ -86,7 +89,7 @@ const SignUpForm = () => {
                 {showModal && (
                     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
                         <div className="w-auto p-4 mt-1 text-white bg-blue-500 border-2 border-blue-400 modal-content px rounded-3xl md:mt-2 sm:max-w-md xl:p-3">
-                            <h2 className="text-2xl font-bold leading-tight tracking-tight">Hi {username?.value}!</h2>
+                            <h2 className="text-2xl font-bold leading-tight tracking-tight">Hi {username}!</h2>
                             <p className="mt-2 text-base leading-tight tracking-tight">Welcome and thank you for signing up!</p>
                         </div>
                     </div>

src/lib/api.js

@@ -72,7 +72,7 @@ export async function loginUser(email, password) {
     headers: {
       "Content-Type": "application/json; charset=UTF-8",
     },
-    body: JSON.stringify(email, password),
+    body: JSON.stringify({ email, password }),
   };
   try {
     const response = await fetch(url, options);
@@ -82,7 +82,6 @@ export async function loginUser(email, password) {
     const data = await response.json();
     localStorage.setItem("jwt", data.accessToken);
     localStorage.setItem("userId", data.userId);
-
     return data;
   } catch (error) {
     throw new Error(error);

src/pages/Login.jsx

@@ -83,7 +83,7 @@ export default function LoginPage() {
                         required
                         placeholder="Email"
                         autoComplete="email"
-                        defaultValue="first.last@stud.noroff.no"
+                        defaultValue="Mirmir2023@stud.noroff.no"
                         className="bg-neutral-100 border-2 border-orange-100 text-gray-900 leading-tight tracking-tight sm:text-sm rounded-3xl focus:ring-primary-600 focus:border-primary-600 block w-full min-w-[220px] sm:min-w-[300px] p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                       />
                     </div>
@@ -97,7 +97,7 @@ export default function LoginPage() {
                       placeholder="Password"
                       autoComplete="current-password"
                       minLength={8}
-                      defaultValue="UzI1NiIsInR5cCI"
+                      defaultValue="Pushing-P"
                       className="bg-neutral-100 border-2 border-orange-100 text-gray-900 leading-tight tracking-tight sm:text-sm rounded-3xl focus:ring-primary-600 focus:border-primary-600 block w-full min-w-[220px] sm:min-w-[300px] p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                     />
                   </div>