diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..e69de29b diff --git a/package.json b/package.json index d9827e5c..7b444865 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "react-loading-skeleton": "^3.2.0", "react-markdown": "^8.0.7", "react-router-dom": "^6.9.0", + "react-select-country-list": "^2.2.3", "react-simplemde-editor": "^5.2.0", "react-text-loop": "^2.3.0", "react-text-transition": "^3.1.0", diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 47ed4dcd..94c77e89 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -112,4 +112,4 @@ export function Header() { ); -} +} \ No newline at end of file diff --git a/src/components/settingComponents/generalPage.jsx b/src/components/settingComponents/generalPage.jsx new file mode 100644 index 00000000..879e2759 --- /dev/null +++ b/src/components/settingComponents/generalPage.jsx @@ -0,0 +1,497 @@ + +import React from 'react' +import { useState } from 'react'; +import { Transition, Dialog } from '@headlessui/react'; +import { Fragment } from 'react'; +import { Locations } from '@/components/settingComponents/locations'; +import { useRouter } from 'next/router'; +import { getStorage, ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage'; +import { getCookie } from '@/utils/request'; +import { useEffect } from 'react'; + +export default function General() { + const router = useRouter(); + + const [isPopupOpen, setIsPopupOpen] = useState(false); + const [selectedImage, setSelectedImage] = useState(null); + + const [inputText, setInputText] = useState(''); + + const handleInputChange = (event) => { + setInputText(event.target.value); + }; + const [pfp, setPfp] = useState(`https://robohash.org/KshitijIsCool.png?set=set1&size=150x150`); + const [open, setOpen] = useState(true); + + + function pfpChange() { + pfpChanged = true; + } + + const handlePopupOpen = () => { + setIsPopupOpen(true); + } + + useEffect(() => { + const fileInput = document.getElementById('fileInput'); + + // set username + var xhr = new XMLHttpRequest(); + + xhr.addEventListener('readystatechange', function () { + if (this.readyState === 4) { + console.log(this.responseText); + try { + if (document.getElementById('first-name')) { + + setUsername(JSON.parse(this.responseText).username); + } + + } catch (e) { + console.log(e); + } + } + }); + + xhr.open('GET', `${process.env.NEXT_PUBLIC_API_URL}/account`); + let token = getCookie(); + xhr.setRequestHeader('Authorization', 'Bearer ' + token); + xhr.withCredentials = true; + xhr.send(); + }, []); + + const handlePopupClose = () => { + setIsPopupOpen(false); + } + + const handleImageChange = (event) => { + const file = event.target.files[0]; + setSelectedImage(file); + } + + const handleSaveChanges = async () => { + if (!selectedImage) { + console.log("No image selected"); + setIsPopupOpen(false) + return; + } + + + // upload to firebase storage + try { + const storage = getStorage(); + const metadata = { + contentType: 'image/jpeg', + }; + + const storageRef = ref(storage, `${email}/pictures/pfp`); + const uploadTask = uploadBytesResumable(storageRef, selectedImage, metadata) + + uploadTask.on('state_changed', + (snapshot) => { + // progress function + const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100); + console.log('Upload is ' + progress + '% done'); + switch (snapshot.state) { + case 'paused': + console.log('Upload is paused'); + break; + case 'running': + console.log('Upload is running'); + break; + } + }, + (error) => { + switch (error.code) { + case 'storage/unauthorized': + console.log('User does not have permission to access the object'); + break; + case 'storage/canceled': + console.log('User canceled the upload'); + break; + case 'storage/unknown': + console.log('Unknown error occurred, inspect error.serverResponse'); + break; + } + }, + async () => { + const imageUrl = await getDownloadURL(uploadTask.snapshot.ref) + console.log(imageUrl) + console.log(user); + const endPoint = process.env.NEXT_PUBLIC_API_URL + '/users/' + username + '/updatePfp'; + const body = { imageUrl } + const response = await request(endPoint, "POST", body); + console.log("Here is the result: ", response) + if (response.success) { + console.log("profile picture uploaded successfully"); + } else { + console.log("Failed to upload profile picture"); + } + window.location.reload(); + + } + ); + setIsPopupOpen(false); + + + } catch (err) { + console.log(err); + console.log("An error occured while uploading profile picture"); + } + } + + const handleClick = () => { } + + function saveGeneral() { + document.getElementById('save').innerHTML = 'Saving...'; + + var firstName = document.getElementById('first-name').value; + var lastName = document.getElementById('last-name').value; + var bio = document.getElementById('bio').value; + var github = document.getElementById('url').value; + var location = document.getElementById('location').value; + + var data = JSON.stringify({ + bio: bio, + githubUrl: github, + firstName: firstName, + lastName: lastName, + location: location, + }); + + var xhr = new XMLHttpRequest(); + + xhr.addEventListener('readystatechange', function () { + if (this.readyState === 4) { + console.log(this.responseText); + document.getElementById('save').innerHTML = 'Save'; + } + }); + + xhr.open('PUT', `${process.env.NEXT_PUBLIC_API_URL}/account`); + xhr.setRequestHeader('Content-Type', 'application/json'); + let token = getCookie(); + xhr.setRequestHeader('Authorization', 'Bearer ' + token); + xhr.withCredentials = true; + xhr.send(data); + + } + + return ( +
+
+

+ General +

+ +
+
+
+

+ Profile +

+

+ This information will be displayed publicly so be + careful what you share. +

+
+ +
+ + +
+ +
+ + +
+ +
+ +
+ +
+
+ +
+ +
+ photo + + + + +
+
+ +
+ +
+