Revise paste god damn it

//connector:
import {login} from "./login.js";
import {register} from "./register.js"
import {addMovie} from "./addMovie.js"
import {showMovies} from "./showMovies.js"

function load(){

let mainContainer=document.getElementById("mainContainer");
mainContainer.innerHTML="";
showMovies();

let loginLink=document.getElementById("loginLink");
loginLink.addEventListener("click", function (e){
    console.log("login link clicked")
    e.preventDefault();
    login()
})

let registerLink=document.getElementById("registerLink");
registerLink.addEventListener("click", function (e){
    console.log("register link clicked")
    e.preventDefault();
    register()
})

console.log("hello there")

}

load()

showMovies:
import {addMovie} from "./addMovie.js"
export function showMovies() {
    // let mainContainer = document.getElementById("mainContainer");
    // mainContainer.style.display = "none";

let main = document.getElementsByTagName("main")[0];
    main.innerHTML="";
    let moviesSection = document.createElement("section");
    moviesSection.id="moviesSection";

var myHeaders = new Headers();
    myHeaders.append("Content-Type","application/json");

var requestOptions = {
        method: 'GET',
        headers: myHeaders,
        redirect: 'follow'
    };

fetch("http://localhost:3030/data/movies", requestOptions)
        .then(response => response.json())
        .then(result => visualiseMovies(result))
        .catch(error => console.log('error', error));

function visualiseMovies(result) {
    let movies = Object.values(result);
    movies.forEach(m => {
        let movieDiv = document.createElement("div");
        movieDiv.className = "container";
        movieDiv.innerHTML = `
        <div class="container">
                    <div class="row bg-light text-dark">
                        <h1>Movie title: ${m.title}</h1>

<div class="col-md-8">
                            <img class="img-thumbnail"
                                src=${m.img} alt="Movie">
                        </div>
                        <div class="col-md-4 text-center">
                            <h3 class="my-3 ">Movie Description</h3>
                            <p>${m.description}</p>
                            <a class="btn btn-danger" href="#">Delete</a>
                            <a class="btn btn-warning" href="#">Edit</a>
                            <a class="btn btn-primary" href="#">Like</a>
                            <span class="enrolled-span">Liked 1</span>
                        </div>
                    </div>
                </div>`
       
        moviesSection.appendChild(movieDiv);
        let deleteBtn=movieDiv.querySelector(".btn-danger");
        if (m.createdBy==sessionStorage.getItem("loggedUserId")){ 
           
           deleteBtn.addEventListener("click",function(e){
            e.preventDefault();
            console.log("i delete stuff")
           })
        } else {
            deleteBtn.remove();
        }

});
    if (sessionStorage.getItem("loggedUserToken")){
        console.log(sessionStorage.getItem("loggedUserToken"))
        console.log("user is loged display add movie button")
        let addMovieLink=document.createElement("section");
        addMovieLink.innerHTML=`   
        <a href="#" id="addMovieLink" class="btn btn-warning ">Add Movie</a>`
        addMovieLink.addEventListener("click", function(e){
            e.preventDefault();
            addMovie();
        })
        main.appendChild(addMovieLink)
    }

main.appendChild(moviesSection);
}
}

import {saveCredentialsAndRedirect} from "./saveCredentialsAndRedirect.js"

export function login() {
    let main = document.getElementsByTagName("main")[0];
    main.innerHTML = "";

let loginSection = document.createElement("section");
    loginSection.id = "loginSection";
   loginSection.innerHTML=`
   <form id="loginForm" class="text-center border border-light p-5" action="" method="">
   <div class="form-group">
       <label for="email">Email</label>
       <input type="email" class="form-control" placeholder="Email" name="email" value="">
   </div>
   <div class="form-group">
       <label for="password">Password</label>
       <input type="password" class="form-control" placeholder="Password" name="password" value="">
   </div>

<button type="submit" class="btn btn-primary">Login</button>
</form>`
   
    main.appendChild(loginSection);

loginForm.addEventListener("submit", function (e) {
        e.preventDefault();
        console.log("who");
        let formData = new FormData(loginForm);
        let email = formData.get("email");
        let password = formData.get("password");

let requestBody = {
            email,
            password
        }
        console.log(requestBody)
        let b = JSON.stringify(requestBody)

var myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");

var requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: b,
            redirect: 'follow'
        };

fetch("http://localhost:3030/users/login", requestOptions)
            .then(response => response.json())
            .then(result => saveCredentialsAndRedirect(result,loginSection))
            .catch(error => console.log('error', error));
    })

}

saveCredentials and shit:
import {showMovies} from "./showMovies.js"

export function saveCredentialsAndRedirect(fulfilledRequest,section){
    console.log(fulfilledRequest)
    sessionStorage.setItem("loggedUserId", fulfilledRequest._id);
    sessionStorage.setItem("loggedUserToken", fulfilledRequest.accessToken);
    sessionStorage.setItem("userIsLogged", "true");
    let loginLink = document.getElementById("loginLink");
    loginLink.style.display = "none";
    let registerLink = document.getElementById("registerLink");
    registerLink.style.display = "none";
    //visualise stuff back and hide login
    section.remove()
    showMovies();
}

addMovie:
import { showMovies } from "./showMovies.js";

export function addMovie(){
    console.log("addmovie clicked")
    let main = document.getElementsByTagName("main")[0];
    main.innerHTML = "";

let addMovieSection=document.createElement("section");
    addMovieSection.innerHTML=`
  
    <form id="addMovieForm" class="text-center border border-light p-5" action="#" method="">
        <h1>Add Movie</h1>
        <div class="form-group">
            <label for="title">Movie Title</label>
            <input type="text" class="form-control" placeholder="Title" name="title" value="">
        </div>
        <div class="form-group">
            <label for="description">Movie Description</label>
            <textarea class="form-control" placeholder="Description" name="description">

Image url

` main.appendChild(addMovieSection); let addMovieForm=document.getElementById("addMovieForm"); addMovieForm.addEventListener("submit", function(e){ e.preventDefault(); let formData=new FormData(addMovieForm); submitMovieAndRedirect(formData) }) function submitMovieAndRedirect(formData){ let title=formData.get("title"); let description=formData.get("description"); let imageUrl=formData.get("imageUrl"); let createdBy=sessionStorage.getItem("loggedUserId") if (title.length==0||description.length==0||imageUrl==0){ return alert("All fields are required!") } let movieObj={title,description,imageUrl,createdBy} console.log(movieObj) var myHeaders = new Headers(); myHeaders.append("X-Authorization", sessionStorage.getItem("loggedUserToken")); myHeaders.append("Content-Type", "application/json") var raw = JSON.stringify(movieObj); var requestOptions = { method: 'POST', headers: myHeaders, body: raw, redirect: 'follow' }; fetch("http://localhost:3030/data/movies", requestOptions) .then(response => response.json()) .then(result => showMovies()) .catch(error => console.log('error', error)); } } register: import {saveCredentialsAndRedirect} from "./saveCredentialsAndRedirect.js" export function register() { console.log("hello?") let main = document.getElementsByTagName("main")[0]; main.innerHTML = ""; let registerSection = document.createElement("section"); registerSection.id = "registerSection"; registerSection.innerHTML = ` ` main.appendChild(registerSection); registerForm.addEventListener("submit", function (e) { e.preventDefault(); let formData = new FormData(registerForm); let email = formData.get("email"); let password = formData.get("password"); let repeatPassword = formData.get("repeatPassword"); if (password !== repeatPassword) { return alert("passwords do not match") } let requestBody = { email, password } console.log(requestBody) let b = JSON.stringify(requestBody) var myHeaders = new Headers(); myHeaders.append("Content-Type", "application/json"); var requestOptions = { method: 'POST', headers: myHeaders, body: b, redirect: 'follow' }; fetch("http://localhost:3030/users/register", requestOptions) .then(response => response.json()) .then(result => saveCredentialsAndRedirect(result,registerSection)) .catch(error => console.log('error', error)); }) // function saveCredentialsAndRedirect(result) { // console.log(result) // sessionStorage.setItem("loggedUserId", result._id); // sessionStorage.setItem("loggedUserToken", result.accessToken); // sessionStorage.setItem("userIsLogged", "true"); // let loginLink = document.getElementById("loginLink"); // loginLink.style.display = "none"; // let registerLink = document.getElementById("registerLink"); // registerLink.style.display = "none"; // //visualise stuff back and hide login // registerSection.remove() // showMovies(); // } }