diff --git a/public/IMG_0870.jpeg b/public/IMG_0870.jpeg new file mode 100644 index 0000000000..4a1739b17a Binary files /dev/null and b/public/IMG_0870.jpeg differ diff --git a/public/Logo_color.svg b/public/Logo_color.svg new file mode 100644 index 0000000000..e79ebc44db --- /dev/null +++ b/public/Logo_color.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/App.tsx b/src/App.tsx index 53e9c1478c..d22ba4388c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,6 @@ import React, { useState, useEffect } from "react"; import "./App.css"; +import { fetchProfile, saveProfile } from "./utils/profileApi"; import Profile from "./page/Profile"; import Home from "./page/Home"; @@ -7,11 +8,63 @@ import Header from "./components/Header"; import Login from "./page/Login2"; import SignUp from "./page/SignUp2"; +const saveProfileData = async ( + name: string, + title: string, + description: string, + githubLink: string +) => { + try { + let response; + if (name == "" || title == "" || description == "" || githubLink == "") { + response = await saveProfile( + { + name: name, + title: title, + description: description, + githubLink: githubLink, + }, + "post" + ); + } else { + response = await saveProfile( + { + name: name, + title: title, + description: description, + githubLink: githubLink, + }, + "put" + ); + } + // console.log("40: ", response); + console.log("Profile saved successfully"); + return response; + } catch (error) { + console.error("Error saving profile:", error); + return; + } +}; + const App: React.FC = () => { const [isLoggedin, setIsLoggedin] = useState(false); const [currentPage, setCurrentPage] = useState("login"); const [isReadOnly, setIsReadOnly] = useState(true); + // const [profileData, setProfileData] = useState({ + // name: "", + // title: "", + // description: "", + // githubLink: "", + // }); + + const [name, setName] = useState(""); + const [title, setTitle] = useState(""); + const [description, setDescription] = useState(""); + const [githubLink, setGithubLink] = useState(""); + const [projectsYouLike, setProjectsYouLike] = useState(""); + const [peopleWhoLikeYou, setPeopleWhoLikeYou] = useState(""); + const handleProfileClick = () => { setCurrentPage("profile"); setIsReadOnly(true); @@ -29,6 +82,25 @@ const App: React.FC = () => { console.log("edit clicked"); }; + const handleSaveClick = async () => { + setIsReadOnly(true); + const response = await saveProfileData( + name, + title, + description, + githubLink + ); + if (response) { + setName(response.name); + setTitle(response.title); + setDescription(response.description); + setGithubLink(response.githubLink); + } + console.log("99: ", response); + // setName(response.name); + console.log("done__icon clicked"); + }; + const handleLogin = () => { setIsLoggedin(true); setCurrentPage("home"); @@ -56,6 +128,19 @@ const App: React.FC = () => { console.log("sign in clicked"); }; + const fetchProfileData = async () => { + try { + const profileData = await fetchProfile(); + setName(profileData.profile.name); + setTitle(profileData.profile.title); + setDescription(profileData.profile.description); + setGithubLink(profileData.profile.githubLink); + console.log("138 fetchProfileData: ", profileData); + } catch (error) { + console.error("Error fetching profile:", error); + } + }; + useEffect(() => { const accessToken = localStorage.getItem("accessToken"); if (accessToken) { @@ -63,6 +148,12 @@ const App: React.FC = () => { } }, []); + useEffect(() => { + if (isLoggedin && currentPage === "profile") { + fetchProfileData(); + } + }, [currentPage]); + return (
{ onProfileClick={handleProfileClick} onHomeClick={handleHomeClick} onEditClick={handleEditClick} + onSaveClick={handleSaveClick} isReadOnly={isReadOnly} isLoggedin={isLoggedin} onLogout={handleLogout} @@ -78,7 +170,21 @@ const App: React.FC = () => { {currentPage === "home" && isLoggedin ? ( ) : currentPage === "profile" && isLoggedin ? ( - + ) : currentPage === "login" ? ( ) : ( diff --git a/src/components/Header.css b/src/components/Header.css index fe3143e05b..83350e8e3a 100644 --- a/src/components/Header.css +++ b/src/components/Header.css @@ -40,19 +40,15 @@ box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3); } -.home__icon, -.exit__icon, -.edit__icon, -.done__icon, -.person__icon { - width: 40px !important; - height: 40px !important; +.home__icon .MuiSvgIcon-root, +.exit__icon .MuiSvgIcon-root, +.edit__icon .MuiSvgIcon-root, +.done__icon .MuiSvgIcon-root, +.person__icon .MuiSvgIcon-root { + width: 60px !important; + height: 60px !important; font-size: "large"; color: black !important; + /* background-color: white !important; */ padding: 4vw !important; } - -/* .done__icon { - width: 50px !important; - height: 50px !important; -} */ diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 662eb4335e..230e9bc4b5 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,7 +1,7 @@ import React from "react"; import "./Header.css"; // import logo from "../assets/Logo_color.svg"; -import Logo from "./Logo"; +// import Logo from "./Logo"; import { makeStyles } from "@material-ui/core/styles"; import PersonIcon from "@material-ui/icons/Person"; @@ -16,6 +16,7 @@ function Header({ onProfileClick, onHomeClick, onEditClick, + onSaveClick, isReadOnly, isLoggedin, onLogout, @@ -23,7 +24,7 @@ function Header({ return (

- + Logo Codate

{isLoggedin && ( @@ -44,7 +45,10 @@ function Header({ )} {currentPage === "profile" && ( - + {isReadOnly ? ( ) : ( diff --git a/src/page/Profile.css b/src/page/Profile.css index 36529fea4a..69143cf04f 100644 --- a/src/page/Profile.css +++ b/src/page/Profile.css @@ -7,15 +7,15 @@ .profile__header { display: flex; align-items: center; - margin-bottom: 20px; + margin-bottom: 40px; } .profile__avatar { - width: 200px; - height: 200px; - margin-right: 1vw; - flex-shrink: 0; - padding-left: 14px; + width: 160px; + height: 100%; + margin-right: 2vw; + /* flex-shrink: 0; */ + padding-left: 20px; } .profile__user-info { @@ -41,10 +41,14 @@ font-size: 0.8em; } -.profile__link a { - color: #000; - text-decoration: underline; - display: inline-block; +.profile__textarea-scrollable { + overflow-y: auto; + max-height: 250px; +} + +.profile__header .MuiInputBase-input, +.profile__title .MuiInputBase-input { + height: 0 !important; } .profile__section { @@ -53,20 +57,9 @@ padding: 0px; } -/* .profile__textarea { - width: 100%; - height: 100px; - resize: none; - border: 1px solid #ccc; - padding: 10px; - font-size: 16px; - line-height: 1.5; - border-radius: 20px; - box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2); -} */ - .profile__textarea-readonly { background-color: #f0f0f0 !important; + border: 1px solid #ccc; } .profile__textarea-editable { background-color: #fff !important; @@ -76,7 +69,7 @@ font-size: 20px; margin-right: 5px; } - +/* .profile__link a { color: #0366d6; text-decoration: none; @@ -86,4 +79,4 @@ .profile__link a:hover { color: #003d7f; border-bottom-color: #0056b3; -} +} */ diff --git a/src/page/Profile.jsx b/src/page/Profile.jsx index 563b92fa3c..d172736257 100644 --- a/src/page/Profile.jsx +++ b/src/page/Profile.jsx @@ -2,126 +2,115 @@ import React, { useState, useEffect } from "react"; import "./Profile.css"; import axios from "axios"; import TextField from "@material-ui/core/TextField"; +import { saveProfile, fetchProfile } from "../utils/profileApi"; -function Profile(props) { - const [user, setUser] = useState(null); - const accessToken = props.accessToken; - const isReadOnly = props.isReadOnly; - //const [isReadOnly, setIsReadOnly] = useState(true); - - const [projects, setProjects] = useState( - "1. Project A\n2. Project B\n3. Project C" - ); - var peopleYouLike = "1. User A\n2. User B\n3. User C"; - var peopleWhoLikeYou = "1. User A\n2. User B\n3. User C"; - - useEffect(() => { - const fetchUser = async () => { - try { - const response = await axios.get("https://api.github.com/user", { - headers: { - Authorization: `Bearer ${process.env.REACT_APP_GITHUB_ACCESS_TOKEN}`, - }, - }); - setUser(response.data); - } catch (error) { - console.log("current token", process.env.REACT_APP_GITHUB_ACCESS_TOKEN); - console.error("Error fetching user data:", error); - } - }; - - fetchUser(); - }, []); - - // const handleEditClick = () => { - // //setIsReadOnly(false); - // onEditClick(); - // }; - - if (!user) { - return
Loading...
; - } - - const handleProjectsChange = (event) => { - setProjects(event.target.value); - }; - +function Profile({ + name, + setName, + title, + setTitle, + description, + setDescription, + githubLink, + setGithubLink, + projectsYouLike, + peopleWhoLikeYou, + isReadOnly, +}) { return (
User Avatar
- Username: - {user.name} + USERNAME: + setName(e.target.value)} + InputProps={{ readOnly: isReadOnly }} + variant="outlined" + className={ + isReadOnly + ? "profile__textarea-readonly" + : "profile__textarea-editable" + } + />
Github Link: {" "} - - {user.html_url} - + setGithubLink(e.target.value)} + InputProps={{ readOnly: isReadOnly }} + variant="outlined" + fullWidth + className={ + isReadOnly + ? "profile__textarea-readonly" + : "profile__textarea-editable" + } + />
- {/*

Projects you want to do

-