Merge pull request #108 from JAVACAFE-STUDY/develop

Develop to Master 머지
JAVACAFE-STUDY · Jul 27, 2019 · 738b3ed · 738b3ed
2 parents 49b161b + 829e249
commit 738b3ed
Show file tree

Hide file tree

Showing 9 changed files with 249 additions and 117 deletions.
diff --git a/.env b/.env
@@ -7,4 +7,6 @@ API_PREFIX=/v1/groups
 URL_LOGIN=/login
 URL_USERS=/users
 URL_REWARDS=/aggs/participations
+URL_EVENTS=/events
+URL_PARTICIPATIONS=/participations
 
diff --git a/.env.production b/.env.production
@@ -7,3 +7,5 @@ API_PREFIX=/v1/groups
 URL_LOGIN=/login
 URL_USERS=/users
 URL_REWARDS=/rewards
+URL_EVENTS=/events
+URL_PARTICIPATIONS=/participations
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "blockchain",
-  "version": "0.6.0",
-  "description": "Description for blockchain",
+  "name": "chainity-web",
+  "version": "0.8.0",
+  "description": "Chainity web",
   "private": true,
   "license": "UNLICENSED",
   "cacheDirectories": [

diff --git a/src/main/webapp/app/components/card/apply-list.tsx b/src/main/webapp/app/components/card/apply-list.tsx
@@ -10,6 +10,11 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar/ListItemAvatar';
 import Avatar from '@material-ui/core/Avatar/Avatar';
 import ListItemText from '@material-ui/core/ListItemText/ListItemText';
 import CardHeader from '@material-ui/core/CardHeader/CardHeader';
+import { API_PREFIX, GROUP_ID, URL_EVENTS, URL_PARTICIPATIONS, URL_USERS } from 'app/config/constants';
+import axios from 'axios';
+import _ from 'lodash';
+import { withRouter } from 'react-router';
+import { connect } from 'react-redux';
 
 const styles = createStyles({
     card: {
@@ -23,81 +28,182 @@ const styles = createStyles({
     },
     text: {
         textAlign: 'left'
+    },
+    rewardButton: {
+        'margin-top': '5px'
     }
 });
 
 export interface IApplyListProp {
     classes?: any;
-    participations: any;
-
+    participants: any[];
+    eventId: string;
+    account: { _id: string };
 }
 
 export class ApplyList extends React.Component<IApplyListProp> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: null,
+            isLoaded: false,
+            participants: []
+        };
+    }
+
+    searchApplier = async () => {
+        console.dir(this.props);
+        // /v1/groups/:groupId/events/:eventId/participations
+        const url = `${API_PREFIX}/${GROUP_ID}${URL_EVENTS}/${this.props.eventId}${URL_PARTICIPATIONS}?limit=999`;
+        const res = await axios.get(url);
+        const getUsersPromises = [];
+        const participants = [];
+        const users = [];
+
+        // @ts-ignore
+        if (res && res.data && res.data.docs && res.data.docs.length > 0) {
+            // @ts-ignore
+            res.data.docs.forEach(ele => {
+                getUsersPromises.push(this.searchUserInfo(ele.participant));
+                participants.push({
+                    _id: ele.participant,
+                    participantId: ele._id,
+                    createdAt: ele.createdAt
+                });
+            });
+        }
+
+        axios.all(getUsersPromises)
+            .then(responses => {
+
+                responses.forEach(ele => {
+                    participants.forEach((participant, i) => {
+                        if (ele.data._id === participant._id) {
+                            participants[i] = {
+                                ...participant,
+                                ...ele.data
+                            };
+                        }
+                    });
+                });
+
+                this.setState({
+                    isLoaded: true,
+                    participants
+                });
+            });
+    }
+
+    searchUserInfo = async id => {
+        const url = `${API_PREFIX}/${GROUP_ID}${URL_USERS}/${id}`;
+        const res = await axios.get(url);
+        return res;
+    }
+
+    componentDidMount() {
+        this.searchApplier();
+    }
+
+    handleApply = () => {
+        const url = `${API_PREFIX}/${GROUP_ID}${URL_EVENTS}/${this.props.eventId}${URL_PARTICIPATIONS}`;
+        axios.post(url)
+            .then(res => {
+                this.setState({
+                    isLoaded: true
+                });
+                this.searchApplier();
+                alert('참여 신청되었습니다.');
+            });
+
+    };
+
+    handleCancel = () => {
+
+        const { account } = this.props;
+        // @ts-ignore
+        const { participants } = this.state;
+
+        const participation = participants.find(ele => ele._id === account._id);
+        const participantId = participation.participantId;
+        const url = `${API_PREFIX}/${GROUP_ID}${URL_EVENTS}/${this.props.eventId}${URL_PARTICIPATIONS}/${participantId}`;
+        axios.delete(url)
+            .then(res => {
+                this.setState({
+                    isLoaded: true
+                });
+                this.searchApplier();
+                alert('참여 신청이 취소되었습니다.');
+            });
+    };
+
+    giveReward = id => {
+        alert('보상 처리를 진행합니다. 원장에 반영되기까지 시간이 소요 될 수 있습니다.');
+    };
+
+    // TODO :
     render() {
-        const { classes } = this.props;
+
+        const { classes, account } = this.props;
+        // @ts-ignore
+        const { participants } = this.state;
+        const isParticipated = participants.some(ele => ele._id === account._id);
+
         return (
             <Card>
                 <CardHeader
                     title="참여신청"
                     action={
-                        <Button size="small">더보기</Button>
+                        isParticipated ? (
+                            <Button size="small" onClick={ this.handleCancel }>취소하기</Button>
+                        ) : (
+                            <Button size="small" onClick={ this.handleApply }>신청하기</Button>
+                        )
                     }
                 />
                 <CardContent>
                     <List className={ classes.root }>
-                        <ListItem alignItems="flex-start">
-                            <ListItemAvatar>
-                                <Avatar>H</Avatar>
-                            </ListItemAvatar>
-                            <ListItemText
-                                primary="홍길동"
-                                secondary={
-                                    <React.Fragment>
-                                        <Typography component="span" className={ classes.inline } color="textPrimary">
-                                            금액
-                                        </Typography>
-                                        { ' 1000 ' }
-                                    </React.Fragment>
-                                }
-                            />
-                        </ListItem>
-                        <ListItem alignItems="flex-start">
-                            <ListItemAvatar>
-                                <Avatar>K</Avatar>
-                            </ListItemAvatar>
-                            <ListItemText
-                                primary="고길동"
-                                secondary={
-                                    <React.Fragment>
-                                        <Typography component="span" className={ classes.inline } color="textPrimary">
-                                            금액
-                                        </Typography>
-                                        { ' 2000 ' }
-                                    </React.Fragment>
-                                }
-                            />
-                        </ListItem>
-                        <ListItem alignItems="flex-start">
-                            <ListItemAvatar>
-                                <Avatar>Y</Avatar>
-                            </ListItemAvatar>
-                            <ListItemText
-                                primary="연신"
-                                secondary={
-                                    <React.Fragment>
-                                        <Typography component="span" className={ classes.inline } color="textPrimary">
-                                            금액
-                                        </Typography>
-                                        { ' 5000 ' }
-                                    </React.Fragment>
-                                }
-                            />
-                        </ListItem>
+                        {
+                            participants && participants.length > 0 ? participants.map((participant, i) => (
+                                <ListItem key={i} alignItems="flex-start">
+                                    <ListItemAvatar>
+                                        { !_.isEmpty(participant.avatar) ? <Avatar src={ participant.avatar }>{ participant.name }</Avatar>
+                                            : <Avatar>H</Avatar> }
+                                    </ListItemAvatar>
+                                    <ListItemText
+                                        primary={participant.name}
+                                        secondary={
+                                            <React.Fragment>
+                                                <Typography component="span" className={ classes.inline } color="textPrimary">
+                                                    {participant.createdAt.substr(0, 10)}
+                                                </Typography>
+                                            </React.Fragment>
+                                        }
+                                    />
+                                    {/*
+                                        (account.role === 'system' || account.role === 'admin') && (
+                                            <Button variant="outlined" className={ classes.button + ' ' + classes.rewardButton } onClick={ this.giveReward.bind(this, participant._id) }>
+                                                보상
+                                            </Button>
+                                        )
+                                    */}
+                                </ListItem>
+                                )
+                            ) : (
+                                <ListItem alignItems="flex-start">
+                                    신청자가 없습니다.
+                                </ListItem>
+                            )
+                        }
                     </List>
                 </CardContent>
             </Card>
         );
     }
 }
 
-export default withStyles(styles)(ApplyList);
+const mapStateToProps = storeState => ({
+    account: storeState.authentication.account
+});
+
+// @ts-ignore
+export default withRouter(connect(mapStateToProps)(withStyles(styles)(ApplyList)));
diff --git a/src/main/webapp/app/components/card/completion-list.tsx b/src/main/webapp/app/components/card/completion-list.tsx
@@ -24,6 +24,7 @@ const styles = theme => ({
 
 export interface IHomeCardProp {
   classes?: any;
+  eventId: string;
 }
 
 export class CompletionList extends React.Component<IHomeCardProp> {
@@ -35,7 +36,7 @@ export class CompletionList extends React.Component<IHomeCardProp> {
           title="참여완료"
         />
         <CardContent>
-          <List className={classes.root}>
+          {/*<List className={classes.root}>
             <ListItem alignItems="flex-start">
               <ListItemAvatar>
                 <Avatar>H</Avatar>
@@ -84,7 +85,7 @@ export class CompletionList extends React.Component<IHomeCardProp> {
                 }
               />
             </ListItem>
-          </List>
+          </List>*/}
         </CardContent>
       </Card>
     );

diff --git a/src/main/webapp/app/config/constants.ts b/src/main/webapp/app/config/constants.ts
@@ -15,6 +15,8 @@ export const GROUP_ID = process.env.GROUP_ID;
 export const URL_LOGIN = process.env.URL_LOGIN;
 export const URL_USERS = process.env.URL_USERS;
 export const URL_REWARDS = process.env.URL_REWARDS;
+export const URL_EVENTS = process.env.URL_EVENTS;
+export const URL_PARTICIPATIONS = process.env.URL_PARTICIPATIONS;
 
 export const API_URL = process.env.API_URL;