Skip to content

Commit

Permalink
Merge pull request #200 from 42-world/feature/infinity
Browse files Browse the repository at this point in the history 
Feature/infinity #195
  • Loading branch information
@PIut0
PIut0 authored Mar 4, 2022
2 parents 3319902 + 73e9627 commit 2d7fa67
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 67 deletions.
12 changes: 6 additions & 6 deletions src/Network/APIType.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@ import axios from 'axios';
export function url(path) {
// const version = 'v1'; // process.env.REACT_APP_API_VERSION

return `https://api.42world.kr${path}`; // 실제 배포 API 서버
// return `https://api-alpha.42world.kr${path}`; // 개발용 서버, 토큰 하드코딩으로 들어있어야 함.
// return `https://api.42world.kr${path}`; // 실제 배포 API 서버
return `http://api-alpha.42world.kr:8888${path}`; // 개발용 서버, 토큰 하드코딩으로 들어있어야 함.
// return `http://localhost:8888${path}`; // Live share 할 때 서버
}

export function AXIOS(option) {
return axios({
...option,
withCredentials: true,
//headers: {
// // https://api-alpha.42world.kr 로 요청 시 필요. 배포 시에는 주석화
// Authorization: process.env.REACT_APP_MASTER_ACCESS_TOKEN, // 루트에 .env 파일 만든 후 REACT_APP_MASTER_ACCESS_TOKEN을 가져옴.
// },
headers: {
// https://api-alpha.42world.kr 로 요청 시 필요. 배포 시에는 주석화
Authorization: process.env.REACT_APP_MASTER_ACCESS_TOKEN, // 루트에 .env 파일 만든 후 REACT_APP_MASTER_ACCESS_TOKEN을 가져옴.
},
});
}
3 changes: 2 additions & 1 deletion src/Network/ArticleService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,8 @@ const ArticleService = {
getArticles: async (categoryId, page) => {
const method = 'GET';
const url = articleUrl('');
const take = 1000;
// const take = 1000;
const take = 3;
const params = { categoryId, page, take };

let response;
Expand Down
2 changes: 1 addition & 1 deletion src/Network/NotificationService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const NotificationService = {
*/
readAllNotifications: async () => {
const method = 'PATCH';
const url = notificationUrl('');
const url = notificationUrl('/readall');
let response;
try {
response = await API.AXIOS({
Expand Down
1 change: 1 addition & 0 deletions src/Pages/AlarmPage/Components/AlarmArticle.styled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const AlramArticleDiv = styled.div`
padding: 0.2rem 0.45rem;
border-bottom: 1px solid #e6e6e6;
background-color: #fff;
${props => props.isRead && `color: gray;`}
.left {
font-size: 0.9rem;
Expand Down
44 changes: 8 additions & 36 deletions src/Pages/AlarmPage/Components/AlarmBody.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import { useNavigate } from 'react-router-dom';
import NotificationService from 'Network/NotificationService';
import dayjs from 'dayjs';

import Pagination from '@mui/material/Pagination';

import Styled from './AlarmArticle.styled.js';

const alarmType = (context, type) => {
Expand All @@ -23,18 +21,9 @@ const alarmType = (context, type) => {

const AlarmBody = () => {
const [alarmArticles, setAlarmArticles] = useState([]);
const [curPage, setCurPage] = useState(1);
const [curPageArticles, setCurPageArticles] = useState([]);

const navi = useNavigate();
const mainTextLen = 10;
const pageMaxArticles = 20;
const maxPages = Math.ceil(alarmArticles.length / pageMaxArticles); // 소수점으로 떨어질 경우 올림.
// console.log('총 개수 : ', alarmArticles.length, '페이지 개수 : ', maxPages);

const handleChangePage = (event, value) => {
setCurPage(value);
};

const moveArticles = articleId => {
alert('구현 중입니다!');
Expand All @@ -51,13 +40,8 @@ const AlarmBody = () => {

const getArticleTime = time => dayjs(time).format('MM/DD HH:mm');

const changePageArticles = () => {
const pageIndex = (curPage - 1) * pageMaxArticles;
// console.log('pageIndex : ', pageIndex);
// console.log(alarmArticles.slice(pageIndex, pageIndex + pageMaxArticles));
setCurPageArticles(
alarmArticles.slice(pageIndex, pageIndex + pageMaxArticles),
);
const readAlarm = async () => {
const read = await NotificationService.readAllNotifications();
};

useEffect(() => {
Expand All @@ -66,28 +50,25 @@ const AlarmBody = () => {
setAlarmArticles(response.reverse());
};
getArticles();
changePageArticles();
readAlarm(); // 글을 받아온 후 알림을 읽는다. 다음 번 불러올 때 이번에 읽어온 글의 isRead가 true가 된다.
}, []);

useEffect(() => {
changePageArticles();
}, [alarmArticles, curPage]);

return (
<Styled.AlramArticlesDiv>
<Styled.AlramArticlesDiv>
<Styled.AlramArticleDiv>
<div className="left">공지</div>
<div className="middle">42월드 많이 이용해주세요!</div>
<div className="right">01/30 00:00</div>
</Styled.AlramArticleDiv>
{curPageArticles &&
curPageArticles.map(article => {
{alarmArticles &&
alarmArticles.map(article => {
return (
<Styled.AlramArticleDiv
key={article.id}
button
divider
className="article"
isRead={article.isRead}
onClick={() => moveArticles(article.userId)}
>
<div className="left">새 댓글</div>
Expand All @@ -96,16 +77,7 @@ const AlarmBody = () => {
</Styled.AlramArticleDiv>
);
})}
<Pagination
count={maxPages}
page={curPage}
siblingCount={2}
onChange={handleChangePage}
showFirstButton
showLastButton
shape="rounded"
// size="small"
/>

</Styled.AlramArticlesDiv>
);
};
Expand Down
57 changes: 34 additions & 23 deletions src/Pages/CategoryPage/Components/CategoryBody.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,11 @@ import Styled from './Body.styled';

const CategoryBody = () => {
const [articles, setArticles] = useState([]);
const [isLoaded, setIsLoaded] = useState(true);
const [page, setPage] = useState(1);
const [hasNextPage, setHasNextPage] = useState(true);
const [isLoaded, setIsLoaded] = useState(false);
// const [page, setPage] = useState(1);
let page = 1;
// const [hasNextPage, setHasNextPage] = useState(true);
let hasNextPage = true;
const [target, setTarget] = useState(null);
const [curCate, setCurCate] = useState('');
const cateList = ['자유 게시판', '익명 게시판', '공지 게시판'];
Expand All @@ -34,44 +36,45 @@ const CategoryBody = () => {
navi(`/article/${id}`);
};

// const setInitalArticles = async () => {
// setIsLoaded(true);
// const result = await ArticleService.getArticles(categoryId);
// console.log('result ,', result);
// const meta = result.meta;
// setArticles(result.data);
// setIsLoaded(false);
// setHasNextPage(meta.hasNextPage);
// hasNextPage = meta.hasNextPage;
// };

const handleChangeCate = id => {
navi(`/category/${parseInt(id) + 1}`);
};

const setInitalArticles = async () => {
setIsLoaded(true);
const result = await ArticleService.getArticles(categoryId);
const meta = result.meta;

setArticles(result.data);
setIsLoaded(false);
setHasNextPage(meta.hasNextPage);
};


useEffect(() => {
if (categoryId > 3) {
alert('준비 중입니다!');
navi('/');
}
setCurCate(getCategoryByUrl(loca));
setInitalArticles();
}, [categoryId]);

// 무한 스크롤 임시 정지
// 동기적으로 sleep하는 함수
// const sleep = delay => {
// let start = new Date().getTime();
// while (new Date().getTime() < start + delay);
// };

const getMoreItem = async () => {
if (!hasNextPage) return;

setIsLoaded(true);
// 실제 API 통신처럼 비동기로 받아오는 것을 구현하기 위해 1.5 초 뒤에 데이터를 갱신한다.
// resolve, reject는 각각 성공 시, 실패 시의 동작을 의미. reject를 생략하니 reslove의 경우만 익명함수로 처리해주었다.
// (categoryId);
const result = await ArticleService.getArticles(categoryId, page);
const newData = result.data;
const meta = result.meta;

setPage(prevPage => prevPage + 1);
setHasNextPage(meta.hasNextPage);
// setPage(prevPage => prevPage + 1);
page += 1;
// setHasNextPage(meta.hasNextPage);
hasNextPage = meta.hasNextPage;
setArticles(prevList => prevList.concat(newData));
setIsLoaded(false);
};
Expand All @@ -84,6 +87,14 @@ const CategoryBody = () => {
}
};

useEffect(() => {
if (categoryId > 3) {
alert('준비 중입니다!');
navi('/');
}
setCurCate(getCategoryByUrl(loca));
}, []);

useEffect(() => {
let observer;
if (target) {
Expand Down

0 comments on commit 2d7fa67

Please sign in to comment.