rp board fetches extra stats from db

its-me-sv · Jul 21, 2023 · 5edfc1d · 5edfc1d
1 parent 52ffeb1
commit 5edfc1d
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 38 deletions.
diff --git a/src/components/posts/index.tsx b/src/components/posts/index.tsx
@@ -101,9 +101,11 @@ const Posts: React.FC<PostsProps> = ({
  )}
  {/* </StickyButton> */}
  {userPosts.length === 0 && <span>No posts to show.</span>}
- {[...userPosts].reverse().map((pId) => (
- <Post key={pId} postId={pId} />
- ))}
+ {[...userPosts]
+ .reverse()
+ .map((pId) => (
+ <Post key={pId} postId={pId} />
+ ))}
  </Container>
  );
 };

diff --git a/src/components/reputation/board.tsx b/src/components/reputation/board.tsx
@@ -46,15 +46,15 @@ const Board: React.FC<BoardProps> = () => {
  <User key={v.accountId} {...v} />
  ))}
  {!over && (
-  <FetchButton>
-  <Button 
-  bgColor={dark ? "#ffffff" : "#222222"} 
-  dark={dark}
-  onClick={fetchData}
-  >
-  {loadMore[language]}
-  </Button>
-  </FetchButton>
+ <FetchButton>
+ <Button
+ bgColor={dark ? "#ffffff" : "#222222"}
+ dark={dark}
+ onClick={fetchData}
+ >
+ {loadMore[language]}
+ </Button>
+ </FetchButton>
  )}
  </BoardContainer>
  );

diff --git a/src/components/reputation/styles.tsx b/src/components/reputation/styles.tsx
@@ -15,7 +15,7 @@ export const Container = styled.div<{ dark: boolean }>`
  `}
 `;
 
-export const InfoBox = styled.div<{ dark: boolean; frmPrf?: boolean; }>`
+export const InfoBox = styled.div<{ dark: boolean; frmPrf?: boolean; frmUsr?: boolean;}>`
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -25,6 +25,11 @@ export const InfoBox = styled.div<{ dark: boolean; frmPrf?: boolean; }>`
  padding: 1rem;
  ${(props) => !props.frmPrf && `${BoxShadow}`}
  ${(props) => (props.dark && !props.frmPrf) && `${BoxShadowDark}`}
+ ${(props) => props.frmUsr && `
+ padding: 0.36rem;
+ justify-content: space-between;
+ opacity: 0.84;
+ `}
 `;
 
 export const InfoBoxTitle = styled.span<{ dark: boolean }>`
@@ -66,7 +71,7 @@ export const InfoItem = styled.div<{ dark: boolean }>`
 export const BoardContainer = styled.div`
  display: grid;
  gap: 1.2rem;
- grid-template-columns: repeat(6, 1fr);
+ grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  max-height: 88vh;
  overflow-y: auto;
@@ -77,25 +82,17 @@ export const UserContainer = styled.div<{ dark: boolean }>`
  border-radius: 0.36rem;
  display: flex;
  flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 1.2rem;
- gap: 0.7rem;
+ /* align-items: center; */
+ /* justify-content: center; */
+ padding: 0.36rem;
  cursor: pointer;
  animation: ${FadeAnim} 1s;
+ font-family: Inter;
+ width: 15vw;
  ${BoxShadow}
  ${(props) => props.dark && `${BoxShadowDark}`}
- img {
- width: 6rem;
- height: 6rem;
- border-radius: 50%;
- }
- span {
- font-family: Inter;
- font-size: 1.2rem;
- color: #222222;
- ${(props) => props.dark && `color: #ffffff;`}
- }
+ color: #222222;
+ ${(props) => props.dark && `color: #ffffff;`}
  &:hover {
  opacity: 0.5;
  }
@@ -105,3 +102,19 @@ export const FetchButton = styled.div`
  margin: 0.42rem 0rem;
  align-self: center;
 `;
+
+export const UserHeader = styled.div`
+ display: flex;
+ img {
+ width: 3rem;
+ height: 3rem;
+ border-radius: 50%;
+ }
+ gap: 0.42rem;
+ align-items: center;
+`;
+
+export const UserHeaderRight = styled.div`
+ display: flex;
+ flex-direction: column;
+`;
diff --git a/src/components/reputation/user.tsx b/src/components/reputation/user.tsx
@@ -1,23 +1,27 @@
 import React, {useState, useEffect} from "react";
 import {useNavigate} from "react-router-dom";
 
-import {UserContainer} from "./styles";
-import { TopRPUser, User as UserType } from "../../utils/types";
-import { DICE_BEAR } from "../../utils/constants";
+import {InfoBox, InfoContent, InfoItem, UserContainer, UserHeader, UserHeaderRight} from "./styles";
+import { TopRPUser, UserAllTimeStats, User as UserType } from "../../utils/types";
+import { DICE_BEAR, REST_API } from "../../utils/constants";
 
 import {useAppContext} from "../../contexts/app";
 import {useSubsocial} from "../../subsocial";
 import { getImage } from "../../utils/utils";
+import { defaultRPStats } from "../profile-sideview/data";
+import axios from "axios";
+import { info } from "../../translations/rp";
 
 interface UserProps extends TopRPUser {}
 
 const User: React.FC<UserProps> = ({
  accountId, username, reputation
 }) => {
  const navigate = useNavigate();
- const {dark} = useAppContext();
+ const {dark, language} = useAppContext();
  const { api } = useSubsocial();
  const [picture, setPicture] = useState<string>(DICE_BEAR);
+ const [rpStats, setRpStats] = useState<UserAllTimeStats>(defaultRPStats);
 
  useEffect(() => {
  if (!api) return;
@@ -26,16 +30,47 @@ const User: React.FC<UserProps> = ({
  const user = profile.content as unknown as UserType;
  setPicture(user.picture);
  });
+ axios
+ .get(`${REST_API}/user/all-time-stats/${accountId}`)
+ .then(({ data }) => setRpStats(data));
  }, [api, accountId]);
 
  return (
- <UserContainer 
- dark={dark} 
+ <UserContainer
+ dark={dark}
  onClick={() => navigate(`/profile/${username}`)}
  >
- <img alt="pp" src={getImage(picture)} />
- <span>{username}</span>
- <span>{reputation} RP</span>
+ <UserHeader>
+ <img alt="pp" src={getImage(picture)} />
+ <UserHeaderRight>
+ <span>{username}</span>
+ <span>{rpStats.total_rp || "--"} RP</span>
+ </UserHeaderRight>
+ </UserHeader>
+ <InfoBox dark={dark} frmPrf frmUsr>
+ <InfoContent>
+ <InfoItem dark={dark}>
+ <span>{info.action[language]}</span>
+ <span>RP</span>
+ </InfoItem>
+ <InfoItem dark={dark}>
+ <span>{info.post[language]}</span>
+ <span>{rpStats.e5p || "--"}</span>
+ </InfoItem>
+ <InfoItem dark={dark}>
+ <span>{info.followers[language]}</span>
+ <span>{rpStats.p10f || "--"}</span>
+ </InfoItem>
+ <InfoItem dark={dark}>
+ <span>{info.tip[language]}</span>
+ <span>{rpStats.ptg || "--"}</span>
+ </InfoItem>
+ <InfoItem dark={dark}>
+ <span>{info.accCrt[language]}</span>
+ <span>{rpStats.ac || "--"}</span>
+ </InfoItem>
+ </InfoContent>
+ </InfoBox>
  </UserContainer>
  );
 };