Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/infinity #195 #200

Merged
merged 3 commits into from
Mar 4, 2022
Merged

Feature/infinity #195 #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0e60479
Feat : 페이지 보기 제거. 알림 읽는 API 전송. isRead에 따라 글 디자인 변경.
GulSam00 Mar 2, 2022
d0500fd
Feat : 무한 스크롤. state -> let
GulSam00 Mar 3, 2022
73e9627
Merge branch 'dev' into feature/infinity
chichoon Mar 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/Network/APIType.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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