Skip to content

Commit

Permalink
refactor(community): Community 페이지에서 Refactoring 진행
Browse files Browse the repository at this point in the history 
개요

- fetchPosts를 해서 가져올 때 Promise All 해서 함께 보여줄 수 있도록
변경
- ternary에서 if문으로 바꾸어서  가독성 높임
- 일부 컴포넌트 외부 컴포넌트로 추출: CommunitySection
  • Loading branch information
@seungholee-dev
seungholee-dev committed Sep 24, 2024
1 parent 8dd483f commit e09e87d
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 65 deletions.
97 changes: 32 additions & 65 deletions src/pages/community/CommunityPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,17 @@ import {
import { useNavigation, useFocusEffect } from "@react-navigation/native";
import { useTranslation } from "react-i18next";
import * as Sentry from "@sentry/react-native";

import CommunityStyles from "@pages/community/CommunityStyles";
import { getPostsByType, getCommunitySearch } from "config/api";

import ConnectTop from "@components/connect/ConnectTop";
import ConnectSearchIcon from "@components/connect/ConnectSearchIcon";
import ConnectSearchCancel from "@components/connect/ConnectSearchCancel";
import IconBookmark from "@components/chat/IconBookmark";
import IconCommunityTitle from "@components/community/IconCommunityTitle";
import ArrowRight from "@components/common/ArrowRight";
import ItemCommunityPreview from "@components/community/ItemCommunityPreview";
import IconSearchFail from "@components/common/IconSearchFail";
import ItemCommunity from "@components/community/ItemCommunity";
import CommunitySection from "./CommunitySection";

const CommunityPage = () => {
const { t } = useTranslation();
Expand Down Expand Up @@ -74,10 +72,12 @@ const CommunityPage = () => {

useFocusEffect(
useCallback(() => {
const community = async () => {
const fetchPosts = async () => {
try {
const responseTip = await getPostsByType("TIP");
const responseFree = await getPostsByType("FREE");
const [responseTip, responseFree] = await Promise.all([
getPostsByType("TIP"),
getPostsByType("FREE"),
]);
setTipPostList(responseTip.data.slice(0, 3));
setFreePostList(responseFree.data.slice(0, 3));
} catch (error) {
Expand All @@ -89,81 +89,48 @@ const CommunityPage = () => {
}
};

community();
fetchPosts();
}, []),
);

const { height: screenHeight } = Dimensions.get("window");
const isSmallScreen = screenHeight < 700;

const renderCommunity = () => (
<>
{searchFail ? (
const renderCommunity = () => {
if (searchFail) {
return (
<View style={CommunityStyles.containerFail}>
<IconSearchFail />
<Text style={CommunityStyles.textFail}>
{t("searchNoResults")}
</Text>
</View>
) : searchData && searchData.length > 0 ? (
);
}

if (searchData && searchData.length > 0) {
return (
<View style={CommunityStyles.itemCommunity}>
<ItemCommunity postList={searchData} />
</View>
) : (
<>
<View style={CommunityStyles.containerCommunityTop}>
<View style={CommunityStyles.containerTitle}>
<IconCommunityTitle
style={CommunityStyles.iconCommunity}
/>
<Text style={CommunityStyles.textCommunityTitle}>
{t("tipBoard")}
</Text>
</View>
<TouchableOpacity
style={CommunityStyles.containerMore}
onPress={() =>
navigation.navigate("TipCommunityPage")
}
>
<Text style={CommunityStyles.textCommunityMore}>
{t("moreButton")}
</Text>
<ArrowRight style={CommunityStyles.iconArrow} />
</TouchableOpacity>
</View>
<View style={CommunityStyles.itemCommunityPreview}>
<ItemCommunityPreview postList={tipPostList} />
</View>
);
}

<View style={CommunityStyles.containerCommunityTop}>
<View style={CommunityStyles.containerTitle}>
<IconCommunityTitle
style={CommunityStyles.iconCommunity}
/>
<Text style={CommunityStyles.textCommunityTitle}>
{t("freeBoard")}
</Text>
</View>
<TouchableOpacity
style={CommunityStyles.containerMore}
onPress={() =>
navigation.navigate("FreeCommunityPage")
}
>
<Text style={CommunityStyles.textCommunityMore}>
{t("moreButton")}
</Text>
<ArrowRight style={CommunityStyles.iconArrow} />
</TouchableOpacity>
</View>
<View style={CommunityStyles.itemCommunityPreview}>
<ItemCommunityPreview postList={freePostList} />
</View>
</>
)}
</>
);
return (
<>
<CommunitySection
title="tipBoard"
postList={tipPostList}
onMorePress={() => navigation.navigate("TipCommunityPage")}
/>
<CommunitySection
title="freeBoard"
postList={freePostList}
onMorePress={() => navigation.navigate("FreeCommunityPage")}
/>
</>
);
};

return (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
Expand Down
37 changes: 37 additions & 0 deletions src/pages/community/CommunitySection.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from "react";
import { useTranslation } from "react-i18next";
import CommunityStyles from "@pages/community/CommunityStyles";
import IconCommunityTitle from "@components/community/IconCommunityTitle";
import ItemCommunityPreview from "@components/community/ItemCommunityPreview";
import { View, Text, TouchableOpacity } from "react-native";
import ArrowRight from "@components/common/ArrowRight";

const CommunitySection = ({ title, postList, onMorePress }) => {
const { t } = useTranslation();
return (
<View>
<View style={CommunityStyles.containerCommunityTop}>
<View style={CommunityStyles.containerTitle}>
<IconCommunityTitle style={CommunityStyles.iconCommunity} />
<Text style={CommunityStyles.textCommunityTitle}>
{t(title)}
</Text>
</View>
<TouchableOpacity
style={CommunityStyles.containerMore}
onPress={onMorePress}
>
<Text style={CommunityStyles.textCommunityMore}>
{t("moreButton")}
</Text>
<ArrowRight style={CommunityStyles.iconArrow} />
</TouchableOpacity>
</View>
<View style={CommunityStyles.itemCommunityPreview}>
<ItemCommunityPreview postList={postList} />
</View>
</View>
);
};

export default CommunitySection;

0 comments on commit e09e87d

Please sign in to comment.