feat: render combat details

crossplatformkorea · Aug 8, 2024 · 5f25fdb · 5f25fdb
1 parent 3aa40cc
commit 5f25fdb
Show file tree

Hide file tree

Showing 14 changed files with 223 additions and 125 deletions.
diff --git a/app/(app)/(tabs)/profile.tsx b/app/(app)/(tabs)/profile.tsx
@@ -9,10 +9,7 @@ import {css} from '@emotion/native';
 import {Pressable} from 'react-native';
 import {IC_ICON} from '../../../src/icons';
 import {openURL} from '../../../src/utils/common';
-import {useEffect, useState} from 'react';
-import {updateDoobooGithub} from '../../../src/apis/githubStatsQueries';
-import Scouter from '../../../src/components/uis/Scouter';
-import {DoobooGithubStats} from '../../../src/types/github-stats';
+import DoobooStats from '../../../src/components/fragments/DoobooStats';
 
 const Container = styled.SafeAreaView`
   flex: 1;
@@ -46,13 +43,20 @@ const UserName = styled(Typography.Heading5)`
   margin-bottom: 8px;
 `;
 
-const UserBio = styled.Text`
+const UserAffiliation = styled.Text`
   font-size: 16px;
   color: ${({theme}) => theme.role.secondary};
   text-align: center;
   margin-bottom: 16px;
 `;
 
+const UserBio = styled.Text`
+  font-size: 16px;
+  color: ${({theme}) => theme.text.label};
+  text-align: center;
+  margin-bottom: 16px;
+`;
+
 const InfoCard = styled.View`
   background-color: ${({theme}) => theme.bg.paper};
   border-radius: 15px;
@@ -76,9 +80,7 @@ const InfoLabel = styled(Typography.Body2)`
   font-family: Pretendard-Bold;
 `;
 
-const InfoValue = styled(Typography.Body2)`
-  flex: 1;
-`;
+const InfoValue = styled(Typography.Body2)``;
 
 const TagContainer = styled.View`
   flex-direction: row;
@@ -100,25 +102,8 @@ const TagText = styled.Text`
 
 export default function Profile(): JSX.Element {
   const {user, tags} = useRecoilValue(authRecoilState);
-  const [doobooStats, setDoobooStats] = useState<DoobooGithubStats | null>(
-    null,
-  );
   const {theme} = useDooboo();
 
-  useEffect(() => {
-    const fetchGithubStats = async () => {
-      const result = await updateDoobooGithub(user!.github_id!);
-
-      if (!!result?.stats) {
-        setDoobooStats(result.stats);
-      }
-    };
-
-    if (!!user?.github_id) {
-      fetchGithubStats();
-    }
-  }, [user, user?.github_id]);
-
   return (
     <Container>
       <Stack.Screen
@@ -135,6 +120,9 @@ export default function Profile(): JSX.Element {
             source={user?.avatar_url ? {uri: user?.avatar_url} : IC_ICON}
           />
           <UserName>{user?.display_name || ''}</UserName>
+          {user?.affiliation ? (
+            <UserAffiliation>{user?.affiliation}</UserAffiliation>
+          ) : null}
           {user?.introduction ? <UserBio>{user?.introduction}</UserBio> : null}
         </ProfileHeader>
         <Content>
@@ -155,19 +143,8 @@ export default function Profile(): JSX.Element {
                 <Icon name="GithubLogo" size={16} color={theme.role.link} />
                 <InfoValue>{user?.github_id || ''}</InfoValue>
               </Pressable>
-              {doobooStats ? (
-                <Scouter
-                  doobooStats={doobooStats}
-                  githubLogin={user?.github_id}
-                />
-              ) : null}
+              <DoobooStats user={user} />
             </InfoItem>
-            {user?.affiliation ? (
-              <InfoItem>
-                <InfoLabel>{t('onboarding.affiliation')}</InfoLabel>
-                <InfoValue>{user.affiliation}</InfoValue>
-              </InfoItem>
-            ) : null}
           </InfoCard>
 
           {user?.desired_connection || user?.future_expectations ? (

diff --git a/src/apis/githubStatsQueries.ts b/src/apis/githubStatsQueries.ts
@@ -14,8 +14,7 @@ export const updateDoobooGithub = async (
     });
 
     if (!response.ok) {
-      if (__DEV__) console.error('HTTP error! status:', response.status);
-      return;
+      throw new Error('HTTP error! status:' + response.status);
     }
 
     return await response.json();

diff --git a/src/components/fragments/DoobooStats.tsx b/src/components/fragments/DoobooStats.tsx
@@ -0,0 +1,60 @@
+import styled, {css} from '@emotion/native';
+import {useEffect, useState} from 'react';
+import {DoobooGithubStats} from '../../types/github-stats';
+import {updateDoobooGithub} from '../../apis/githubStatsQueries';
+import Scouter from '../uis/Scouter';
+import {User} from '../../types';
+import CustomLoadingIndicator from '../uis/CustomLoadingIndicator';
+
+const Container = styled.View``;
+
+type Props = {
+  user: User | null;
+};
+
+export default function DoobooStats({user}: Props): JSX.Element | null {
+  const [doobooStats, setDoobooStats] = useState<DoobooGithubStats | null>(
+    null,
+  );
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchGithubStats = async () => {
+      try {
+        if (!user?.github_id) {
+          return;
+        }
+        const result = await updateDoobooGithub(user!.github_id!);
+
+        if (!!result?.stats) {
+          setDoobooStats(result.stats);
+        }
+      } catch (e: any) {
+        setError(e.message);
+      }
+    };
+
+    if (!!user?.github_id) {
+      fetchGithubStats();
+    }
+  }, [user, user?.github_id]);
+
+  if (error) {
+    return null;
+  }
+
+  return (
+    <Container>
+      {doobooStats ? (
+        <Scouter doobooStats={doobooStats} githubLogin={user?.github_id} />
+      ) : (
+        <CustomLoadingIndicator
+          style={css`
+            padding: 48px;
+            background-color: transparent;
+          `}
+        />
+      )}
+    </Container>
+  );
+}
diff --git a/src/components/svgs/SvgStatsDooboo.tsx b/src/components/svgs/SvgStatsDooboo.tsx
@@ -1,16 +1,24 @@
+import { useDooboo } from 'dooboo-ui';
 import {Svg, G, Path, Defs, ClipPath, Rect} from 'react-native-svg';
 
-export default function SvgStatsDooboo() {
+type Props = {
+  color?: string;
+};
+
+export default function SvgStatsDooboo({color}: Props) {
+  const {theme} = useDooboo();
+  const fill = color || theme.text.basic;
+
   return (
     <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
       <G clipPath="url(#clip0_490_628)">
         <Path
           d="M10 1.26978L2.4397 5.63485V14.365L10 18.7301L17.5603 14.365V5.63485L10 1.26978ZM16.0175 13.4745L10 16.9491L3.98255 13.4745V6.52533L10 3.05072L16.0175 6.52533V13.4745Z"
-          fill="#000"
+          fill={fill}
         />
         <Path
           d="M5.52539 7.41579V12.584L9.99999 15.1666L14.4746 12.584V7.41579L9.99999 4.83325L5.52539 7.41579Z"
-          fill="#000"
+          fill={fill}
         />
       </G>
       <Defs>

diff --git a/src/components/svgs/SvgStatsEarth.tsx b/src/components/svgs/SvgStatsEarth.tsx
@@ -1,23 +1,28 @@
-import { useDooboo } from 'dooboo-ui';
+import {useDooboo} from 'dooboo-ui';
 import {G, Path, Svg} from 'react-native-svg';
 
-export default function SvgStatsEarth() {
+type Props = {
+  color?: string;
+};
+
+export default function SvgStatsEarth({color}: Props) {
   const {theme} = useDooboo();
+  const fill = color || theme.text.basic;
 
   return (
     <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
       <G opacity="1.0">
         <Path
           d="M10.3016 13.3017C8.98414 12.7175 7.71113 12.7112 6.46192 13.4937C5.93811 13.8207 5.43335 14.1731 4.92541 14.5239C4.6778 14.6969 4.43176 14.8731 4.18097 15.0413C4.86538 15.8311 5.70338 16.4732 6.64394 16.9287C7.5845 17.3841 8.60794 17.6434 9.65191 17.6906C10.6959 17.7378 11.7385 17.5721 12.7164 17.2034C13.6942 16.8347 14.5868 16.2708 15.3397 15.5461C14.5385 15.3531 13.7643 15.0615 13.0349 14.6778C12.1302 14.2064 11.2365 13.7159 10.3016 13.3017Z"
-          fill={theme.text.basic}
+          fill={fill}
         />
         <Path
           d="M7.09366 4.80165C8.50636 4.80165 9.82858 5.21435 11.1318 5.69689C13.2159 6.46832 15.2762 7.31277 17.4159 7.92864C17.024 6.52795 16.2434 5.26689 15.1645 4.29147C14.0856 3.31604 12.7525 2.66615 11.3195 2.41702C9.88652 2.16789 8.41229 2.32972 7.06747 2.88377C5.72266 3.43782 4.56226 4.36144 3.72064 5.54769L3.81112 5.51117C4.87144 5.11593 5.95239 4.80006 7.09366 4.80165Z"
-          fill={theme.text.basic}
+          fill={fill}
         />
         <Path
           d="M12.7857 8.20486C11.3127 7.64771 9.86506 7.02073 8.29998 6.74772C7.3768 6.57473 6.42717 6.60289 5.51586 6.83026C4.51182 7.09926 3.53344 7.45619 2.59205 7.89692C2.04692 9.82814 2.27462 11.8957 3.22698 13.662C3.43491 13.5461 3.63649 13.416 3.8349 13.2826C4.68252 12.716 5.4857 12.0858 6.37459 11.5937C7.29998 11.0858 8.27935 10.8858 9.31268 11.1382C10.4873 11.4239 11.5349 12.0128 12.5889 12.581C13.8587 13.2699 15.173 13.8382 16.6238 13.9144C17.3268 12.7297 17.698 11.3777 17.6984 10.0001C17.6984 9.95406 17.6984 9.90803 17.6984 9.862C17.0222 9.68422 16.3508 9.49058 15.6905 9.26042C14.7169 8.92073 13.7487 8.56888 12.7857 8.20486Z"
-          fill={theme.text.basic}
+          fill={fill}
         />
       </G>
     </Svg>

diff --git a/src/components/svgs/SvgStatsFire.tsx b/src/components/svgs/SvgStatsFire.tsx
@@ -1,23 +1,28 @@
-import { useDooboo } from 'dooboo-ui';
+import {useDooboo} from 'dooboo-ui';
 import {G, Path, Svg} from 'react-native-svg';
 
-export default function SvgStatsFire() {
+type Props = {
+  color?: string;
+};
+
+export default function SvgStatsFire({color}: Props) {
   const {theme} = useDooboo();
+  const fill = color || theme.text.basic;
 
   return (
     <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
       <G opacity="1.0">
         <Path
           d="M4.97939 4.71436L16.2572 13.2001L10.0778 18.1651L3.89844 13.2001L4.97939 4.71436Z"
-          fill={theme.text.basic}
+          fill={fill}
         />
         <Path
           d="M9.16665 1.34912L11.019 4.24277L9.16665 5.73007L7.31586 4.24277L9.16665 1.34912Z"
-          fill={theme.text.basic}
+          fill={fill}
         />
         <Path
           d="M15.1746 3.25073L10.6953 6.91264L16.2699 11.1079L15.1746 3.25073Z"
-          fill={theme.text.basic}
+          fill={fill}
         />
       </G>
     </Svg>

diff --git a/src/components/svgs/SvgStatsGold.tsx b/src/components/svgs/SvgStatsGold.tsx
@@ -1,23 +1,28 @@
 import {useDooboo} from 'dooboo-ui';
 import {G, Path, Svg} from 'react-native-svg';
 
-export default function SvgStatsGold() {
+type Props = {
+  color?: string;
+};
+
+export default function SvgStatsGold({color}: Props) {
   const {theme} = useDooboo();
+  const fill = color || theme.text.basic;
 
   return (
     <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
       <G opacity="1.0">
         <Path
           d="M3.65558 9.78738L9.89526 1.69214L16.1334 9.78738L9.89526 17.8826L3.65558 9.78738Z"
-          fill={theme.text.basic}
+          fill={fill}
         />
         <Path
           d="M14.4698 14.5777L16.2445 12.2761L18.0175 14.5777L16.2445 16.8793L14.4698 14.5777Z"
-          fill={theme.text.basic}
+          fill={fill}
         />
         <Path
           d="M2.89685 4.94596L4.18098 3.2793L5.4651 4.94596L4.18098 6.61263L2.89685 4.94596Z"
-          fill={theme.text.basic}
+          fill={fill}
         />
       </G>
     </Svg>

diff --git a/src/components/svgs/SvgStatsPerson.tsx b/src/components/svgs/SvgStatsPerson.tsx
@@ -1,27 +1,32 @@
 import {useDooboo} from 'dooboo-ui';
 import {G, Path, Svg} from 'react-native-svg';
 
-export default function SvgStatsPerson() {
+type Props = {
+  color?: string;
+};
+
+export default function SvgStatsPerson({color}: Props) {
   const {theme} = useDooboo();
+  const fill = color || theme.text.basic;
 
   return (
     <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
       <G opacity="1.0">
         <Path
           d="M17.2222 12.0904L10.238 16.446V7.73486L17.2222 12.0904Z"
-          fill={theme.text.basic}
+          fill={fill}
         />
         <Path
           d="M2.61902 14.9096L8.47299 11.2588V18.5604L2.61902 14.9096Z"
-          fill={theme.text.basic}
+          fill={fill}
         />
         <Path
           d="M12.565 6.86981C13.8704 6.86981 14.9285 5.81164 14.9285 4.50631C14.9285 3.20099 13.8704 2.14282 12.565 2.14282C11.2597 2.14282 10.2015 3.20099 10.2015 4.50631C10.2015 5.81164 11.2597 6.86981 12.565 6.86981Z"
-          fill={theme.text.basic}
+          fill={fill}
         />
         <Path
           d="M6.44129 10.3967C7.56339 10.3967 8.47304 9.4871 8.47304 8.365C8.47304 7.2429 7.56339 6.33325 6.44129 6.33325C5.31919 6.33325 4.40955 7.2429 4.40955 8.365C4.40955 9.4871 5.31919 10.3967 6.44129 10.3967Z"
-          fill={theme.text.basic}
+          fill={fill}
         />
       </G>
     </Svg>

diff --git a/src/components/svgs/SvgStatsTree.tsx b/src/components/svgs/SvgStatsTree.tsx
@@ -1,16 +1,21 @@
 import {useDooboo} from 'dooboo-ui';
 import {G, Path, Svg} from 'react-native-svg';
 
-export default function SvgStatsTree() {
+type Props = {
+  color?: string;
+};
+
+export default function SvgStatsTree({color}: Props) {
   const {theme} = useDooboo();
+  const fill = color || theme.text.basic;
 
   return (
     <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
       <G opacity="1.0">
-        <Path d="M10 11.4285L14.2556 18.2539H5.74445L10 11.4285Z" fill="#000" />
+        <Path d="M10 11.4285L14.2556 18.2539H5.74445L10 11.4285Z" fill={fill} />
         <Path
           d="M13.5841 13.7158C14.8052 12.9372 15.7396 11.7821 16.2459 10.4253C16.7522 9.06845 16.8028 7.58365 16.3903 6.19545C15.9777 4.80724 15.1243 3.59114 13.9592 2.73104C12.794 1.87095 11.3805 1.41366 9.93236 1.42832C8.48421 1.44298 7.08023 1.92881 5.93274 2.81232C4.78525 3.69583 3.95666 4.92896 3.57229 6.32524C3.18792 7.72151 3.26867 9.20498 3.80233 10.5513C4.336 11.8976 5.29354 13.0335 6.53016 13.7872L10.0794 8.09517L13.5841 13.7158Z"
-          fill={theme.text.basic}
+          fill={fill}
         />
       </G>
     </Svg>

diff --git a/src/components/svgs/SvgStatsWater.tsx b/src/components/svgs/SvgStatsWater.tsx
@@ -1,20 +1,28 @@
+import {useDooboo} from 'dooboo-ui';
 import {G, Path, Svg} from 'react-native-svg';
 
-export default function SvgStatsWater() {
+type Props = {
+  color?: string;
+};
+
+export default function SvgStatsWater({color}: Props) {
+  const {theme} = useDooboo();
+  const fill = color || theme.text.basic;
+
   return (
     <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
       <G opacity="1.0">
         <Path
           d="M15.1142 9.72383C15.9809 10.0191 16.8237 10.3746 17.6698 10.6572C17.6872 10.4397 17.6984 10.2207 17.6984 10C17.6976 8.18738 17.0574 6.43312 15.8904 5.04608C14.7235 3.65904 13.1046 2.72815 11.3188 2.4173C9.53302 2.10646 7.69481 2.43559 6.12782 3.34674C4.56082 4.2579 3.36551 5.69266 2.75232 7.39843C4.78407 6.96668 6.69994 7.47939 8.43328 8.84288C9.02693 9.30955 9.57137 9.83176 10.119 10.3524C11.5095 9.32224 13.4714 9.16669 15.1142 9.72383Z"
-          fill="#000"
+          fill={fill}
         />
         <Path
           d="M15.5905 11.4697C14.1985 10.9935 12.5747 10.8221 11.2667 11.3967C11.3762 11.4904 11.4874 11.5824 11.6016 11.6729C13.0479 12.8411 14.7579 13.6378 16.5826 13.9936C16.9239 13.4299 17.1907 12.8243 17.3762 12.192C16.7905 11.9316 16.1985 11.6777 15.5905 11.4697Z"
-          fill="#000"
+          fill={fill}
         />
         <Path
           d="M8.1159 10.43C6.36986 9.05068 4.42384 8.54275 2.36828 9.00148C2.15848 10.6004 2.45618 12.2248 3.21937 13.6454C3.98255 15.066 5.17265 16.211 6.62166 16.9188C8.07067 17.6265 9.70539 17.8613 11.295 17.5899C12.8846 17.3185 14.3489 16.5547 15.481 15.4062C13.9504 14.9851 12.5222 14.2554 11.2841 13.2618C10.173 12.3808 9.23018 11.3062 8.1159 10.43Z"
-          fill="#000"
+          fill={fill}
         />
       </G>
     </Svg>