Skip to content
This repository has been archived by the owner on Jul 31, 2024. It is now read-only.

Commit

Permalink
feat: possible you can look at other user profiles
Browse files Browse the repository at this point in the history
  • Loading branch information
@vycdev
vycdev committed Jul 13, 2020
1 parent adf6444 commit 6fb4b8d
Showing 1 changed file with 59 additions and 24 deletions.
83 changes: 59 additions & 24 deletions packages/web/src/components/profilePage/profilePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import { UserGame } from "./helpers/interfaces";
import { GamesChart } from "./components/gamesChart";

export const ProfilePage = () => {
const [userId, setUserId] = useState(localStorage.getItem("userid"));
const [userId, setUserId] = useState("0");
const [countryList, setCountryList] = useState([
<option key={"default"}>Loading...</option>
]);
Expand Down Expand Up @@ -72,15 +72,25 @@ export const ProfilePage = () => {
</ListItem>
]);
const [verificationIsSent, setVerificationIsSent] = useState(false);
const [isThisTheLoggedUser, setIsThisTheLoggedUser] = useState(false);
const [urlUserId, setUrlUserId] = useState("0");
const [toBeUsedId, setToBeUsedId] = useState("0");
const [userExists, setUserExists] = useState(false);

const submitMessageRef = useRef(null);

useEffect(() => {
// eslint-disable-next-line @typescript-eslint/no-use-before-define
updateCountryList();
// eslint-disable-next-line @typescript-eslint/no-use-before-define
updateUserId();
// eslint-disable-next-line @typescript-eslint/no-use-before-define
updateIsThisTheLoggedUser();
// eslint-disable-next-line @typescript-eslint/no-use-before-define
updateUrlUserId();
// eslint-disable-next-line @typescript-eslint/no-use-before-define
updateToBeUsedId();
// eslint-disable-next-line @typescript-eslint/no-use-before-define
updateCountryList();
// eslint-disable-next-line @typescript-eslint/no-use-before-define
updateUserData();
// eslint-disable-next-line @typescript-eslint/no-use-before-define
updateCountryFlagUrl();
Expand All @@ -98,7 +108,20 @@ export const ProfilePage = () => {
updateElementListOfGames();
// eslint-disable-next-line @typescript-eslint/no-use-before-define
updateElementListOfPBS();
}, [userData?.country, userData?.exp, userGames.length, userPbs.length]);
}, [userData?.country, userData?.exp, userGames?.length, userPbs?.length]);

const updateToBeUsedId = async () => {
setToBeUsedId((isThisTheLoggedUser ? userId : urlUserId).toString());
};

const updateIsThisTheLoggedUser = async () => {
setIsThisTheLoggedUser(localStorage.getItem("userid") === urlUserId);
};

const updateUrlUserId = async () => {
// eslint-disable-next-line @typescript-eslint/no-use-before-define
setUrlUserId(getUrlUserId().toString());
};

const updateDescriptionEditorValue = () => {
setDescriptionEditorValue(
Expand All @@ -112,8 +135,10 @@ export const ProfilePage = () => {
};

const updateUserData = async () => {
// eslint-disable-next-line @typescript-eslint/no-use-before-define
setUserData(await getUserData(userId));
setUserData(
// eslint-disable-next-line @typescript-eslint/no-use-before-define
await getUserData(toBeUsedId)
);
};

const updateUserId = async () => {
Expand All @@ -131,8 +156,10 @@ export const ProfilePage = () => {
};

const updateUserGames = async () => {
// eslint-disable-next-line @typescript-eslint/no-use-before-define
setUserGames(await getUserGames(userId));
setUserGames(
// eslint-disable-next-line @typescript-eslint/no-use-before-define
await getUserGames(toBeUsedId)
);
};

const updateElementListOfGames = async () => {
Expand All @@ -147,15 +174,15 @@ export const ProfilePage = () => {

const updateBestScoreUserPbs = async () => {
// eslint-disable-next-line @typescript-eslint/no-use-before-define
const userPBS = await getUserPBS(userId);
const userPBS = await getUserPBS(toBeUsedId);

setUserPbs(userPBS);
setBestScore(userPBS[userPBS.length - 1]?.wpm);
};

const updateGeneralStats = async () => {
// eslint-disable-next-line @typescript-eslint/no-use-before-define
const generalStats = await getUserGameStats(userId);
const generalStats = await getUserGameStats(toBeUsedId);

setGameGeneralStats({
averageAccuracy: generalStats?.averageAccuracy,
Expand Down Expand Up @@ -215,7 +242,7 @@ export const ProfilePage = () => {
)
).json();

return data.flag;
return data?.flag || "https://restcountries.eu/data/usa.svg";
};

const getUserData = async (id: string) => {
Expand All @@ -226,6 +253,8 @@ export const ProfilePage = () => {
"Content-Type": "application/json"
}
});
setUserExists(userData.status != 404);
console.log(userExists);

return await userData.json();
};
Expand Down Expand Up @@ -281,18 +310,22 @@ export const ProfilePage = () => {
};

const convertUserGamesData = (dataobject: Array<UserGame>) => {
const data = dataobject.map(value => {
const date = new Date(Math.floor(parseInt(value.date)));
return {
date: `${date.getDate()}/${date.getMonth() +
1}/${date.getFullYear()}`,
wpm: value.wpm,
uncorrectedwpm: value.rawwpm,
accuracy: value.accuracy
};
});
if (!(dataobject instanceof Array)) {
return [];
} else {
const data = dataobject.map(value => {
const date = new Date(Math.floor(parseInt(value.date)));
return {
date: `${date.getDate()}/${date.getMonth() +
1}/${date.getFullYear()}`,
wpm: value.wpm,
uncorrectedwpm: value.rawwpm,
accuracy: value.accuracy
};
});

return data;
return data;
}
};

const generateListOfScores = async (data: Array<UserGame>) => {
Expand Down Expand Up @@ -487,10 +520,12 @@ export const ProfilePage = () => {
</Description>
<ChartsWrapper>
<NoGameData hidden={userData?.totaltests}>
Looks like there is no game data.
{userExists
? "Looks like there is no game data."
: "404 user doesn't exist."}
</NoGameData>
<ChartAndTitleWrapper hidden={!userData?.totaltests}>
<ChartName>Last {userGames.length} Games</ChartName>
<ChartName>Last {userGames?.length} Games</ChartName>
<GamesChart
dataProp={convertUserGamesData(userGames)}
></GamesChart>
Expand Down

0 comments on commit 6fb4b8d

Please sign in to comment.