Skip to content

Commit

Permalink
#347 WIP: Fix conflicts in code, render real data for user from DB, f…
Browse files Browse the repository at this point in the history 
…ix warnings, add icons for social network
  • Loading branch information
@achichikalova
achichikalova committed Jun 3, 2022
1 parent 2efde91 commit d7c8e2c
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 99 deletions.
103 changes: 52 additions & 51 deletions webapp/src/components/Profile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, setState } from 'react';
import React, { useState } from 'react';
import { getGreeting } from '../helpers/greeting';
import useApiData from '../helpers/useApiData';
import SessionContext from './SessionContext';
Expand All @@ -22,55 +22,66 @@ import CheckIcon from '@mui/icons-material/Check';
import ProgressBar from './ProgressBar';
import CompetencyRatings from './CompetencyRatings';
import SocialLinks from './SocialLinks';
import SportsBasketballIcon from '@mui/icons-material/SportsBasketball';

import { GitHubUser, SocialProfile, UserData } from '../types/api.d';

const Profile = () => {{}
// default data in case we don't get anything back from the db
let user: UserData;
let id = null;
let avatar_url = '';
let full_name = '';
let bio = '';
let email_address = '';
let github_accounts: GitHubUser[] = [];
let social_profiles: SocialProfile[] = [];
user = {
id: id,
full_name: full_name,
bio: bio,
email_address: email_address,
github_accounts: github_accounts,
social_profiles: social_profiles,
};

const Profile = () => {
const [isEditable, setIsEditable] = useState(false);
const [userData, setUserData] = useState<UserData[]>();
const greeting = getGreeting(full_name);
const { data: api_user_data } = useApiData<UserData[]>({
path: `/profile/1`,
sendCredentials: true,
});
let user: UserData;

// default data in case we don't get anything back from the db
let id = null;
let avatar_url = "";
let full_name = "";
let bio = "";
let email_address = "";
let github_accounts: GitHubUser[] = [];
let social_profiles: SocialProfile[] = [];

if (api_user_data && api_user_data.length > 0) {

const [ user_data ] = api_user_data;
const [user_data] = api_user_data;
user = user_data;

if (user.full_name && user.full_name !== "") {
const { full_name:fullName } = user;
if (user.full_name && user.full_name !== '') {
const { full_name: fullName } = user;
full_name = fullName;
}

if (user.bio && user.bio !== "") {
if (user.bio && user.bio !== '') {
const { bio: userBio } = user;
bio = userBio;
}

if (user.email_address && user.email_address !== "") {
if (user.email_address && user.email_address !== '') {
const { email_address: userEmail } = user;
email_address = userEmail;
}

if (user.github_accounts && user.github_accounts.length > 0) {
const [ github_account ] = user.github_accounts;
const [github_account] = user.github_accounts;
github_accounts.push(github_account);

if (github_account.avatar_url) {
const { avatar_url: avatar } = github_account;
avatar_url = avatar;
}
if (github_account.full_name && github_account.full_name !== "") {
if (full_name === "") {
if (github_account.full_name && github_account.full_name !== '') {
if (full_name === '') {
const { full_name: fullName } = github_account;
full_name = fullName;
}
Expand All @@ -82,30 +93,16 @@ const Profile = () => {{}
social_profiles = social_profile_list;

social_profile_list.forEach((social_profile: SocialProfile) => {
if (social_profile.network_name === "email") {
if (email_address === "") {
if (social_profile.network_name === 'email') {
if (email_address === '') {
email_address = social_profile.user_name;
}
}
});
}
}

user = {
id: id,
full_name: full_name,
bio: bio,
email_address: email_address,
github_accounts: github_accounts,
social_profiles: social_profiles
};

setState({user: user});

const [isEditable, setIsEditable] = useState(false);
const [userData, setUserData] = useState(user);
const greeting = getGreeting(full_name);

console.log(api_user_data);
function handleEditButtonClick() {
setIsEditable(prevState => !prevState);
}
Expand All @@ -118,13 +115,14 @@ const Profile = () => {{}
* @privateRemarks
*
* Update the user data state
* Update: the function is not working, getting type errors
*/

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
setUserData(prevData => {
const newUserData = { ...prevData, [e.target.name]: e.target.value };
return newUserData;
});
// setUserData(prevData as UserData[] => {
// const newUserData = { ...prevData, [e.target.name]: e.target.value };
// return newUserData;
// });
}

return (
Expand Down Expand Up @@ -193,14 +191,14 @@ const Profile = () => {{}
{isEditable ? (
<TextField
type="text"
value={user.full_name}
value={full_name}
onChange={handleChange}
name="full_name"
variant="standard"
label="Full name"
/>
) : (
user.full_name
full_name
)}
&apos;s Profile
</Typography>
Expand Down Expand Up @@ -233,18 +231,18 @@ const Profile = () => {{}
}}
color="primary"
/>
<Typography component="p">
<Typography component="div">
{isEditable ? (
<TextField
type="email"
value={user.email_address}
value={email_address}
onChange={handleChange}
name="email"
variant="standard"
label="Email"
/>
) : (
user.email_address
email_address
)}
</Typography>
</Grid>
Expand All @@ -256,7 +254,10 @@ const Profile = () => {{}
sx={{ mt: 3 }}
ml={{ md: -1, sm: -2 }}
>
<SocialLinks isEditable={isEditable} profileList={user.social_profiles} />
<SocialLinks
isEditable={isEditable}
profileList={social_profiles}
/>
</Grid>
</Grid>
</Grid>
Expand All @@ -266,10 +267,10 @@ const Profile = () => {{}
<Typography component="h3" variant="h4" sx={{ my: 2 }}>
Summary
</Typography>
<Typography component="p">
<Typography component="div">
{isEditable ? (
<TextField
value={user.bio}
value={bio}
onChange={handleChange}
name="summary"
variant="standard"
Expand All @@ -278,7 +279,7 @@ const Profile = () => {{}
fullWidth
/>
) : (
user.bio
bio
)}
</Typography>
</Grid>
Expand Down
63 changes: 15 additions & 48 deletions webapp/src/components/SocialLinks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,73 +5,40 @@ import GitHubIcon from '@mui/icons-material/GitHub';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import LanguageIcon from '@mui/icons-material/Language';
import TwitterIcon from '@mui/icons-material/Twitter';
import { SocialNetwork, SocialProfile, UserData } from '../types/api';
import useApiData from '../helpers/useApiData';
import SportsBasketballIcon from '@mui/icons-material/SportsBasketball';
import { SocialProfile, UserData } from '../types/api';

import RedditIcon from '@mui/icons-material/Reddit';
import MailIcon from '@mui/icons-material/Mail';

interface SocialLinksProps {
isEditable: boolean;
profileList: SocialProfile[];
}

/**
*
* @privateRemarks
*
* dummydata that we hardcoded
*/
const networkData: SocialProfile[] = [
{
network_name: 'github',
profile_url: '//github.com/matthew_morenez',
user_name: 'matthew_morenez',
public: true,
},
{
network_name: 'website',
profile_url: '//example.com',
user_name: 'example.com',
public: true,
},
{
network_name: 'linkedin',
profile_url: '//linkedin.com/in/matthew_morenez',
user_name: 'matthew_morenez',
public: true,
},
];

interface SocialNetworkIcon {
github: JSX.Element;
linkedin: JSX.Element;
website: JSX.Element;
twitter: JSX.Element;
reddit: JSX.Element;
dribbble: JSX.Element;
email: JSX.Element;
}

const socialNetworkIcons: SocialNetworkIcon = {
github: <GitHubIcon color="primary" />,
linkedin: <LinkedInIcon color="primary" />,
website: <LanguageIcon color="primary" />,
twitter: <TwitterIcon color="primary" />,
reddit: <RedditIcon color="primary" />,
dribbble: <SportsBasketballIcon color="primary" />,
email: <MailIcon color="primary" />,
};

const SocialLinks = ({ isEditable }: SocialLinksProps) => {
const SocialLinks = ({ isEditable, profileList }: SocialLinksProps) => {
const [socialNetworkList, setSocialNetworkList] =
useState<SocialProfile[]>(networkData);

// const [socialProfile, setSocialProfile] = useState<SocialProfile[]>([]);

// const { data: socialNetworks, error } = useApiData<UserData[]>({
// deps: [socialNetworkList],
// path: `/profile/1`,
// sendCredentials: true,
// });
// if (error) {
// return <p>There was an error loading the social network.</p>;
// }
// if (!socialNetworks) {
// return null;
// } else {
// setSocialProfile(socialNetworks[0].social_profiles);
// }
useState<SocialProfile[]>(profileList);

// We need to retrieve a list of all possible social networks

Expand Down Expand Up @@ -159,7 +126,7 @@ const SocialLinks = ({ isEditable }: SocialLinksProps) => {
{
network_name: '',
profile_url: '',
public: true,
public: 2,
user_name: '',
},
]);
Expand Down

0 comments on commit d7c8e2c

Please sign in to comment.