From a6bcef7078e6ff952d1105c977fded119d886e2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20Szab=C3=B3?= <tamas@szaboo.com>
Date: Sat, 3 Feb 2018 20:38:22 +0100
Subject: [PATCH] profile page functionality and design
---
src/actions/auth.js | 38 ++++++++++++++
src/actions/index.js | 1 +
src/components/Main.js | 41 ++++++++-------
src/components/pages/Profile.js | 90 +++++++++++++++++++++++++++------
4 files changed, 134 insertions(+), 36 deletions(-)
create mode 100644 src/actions/auth.js
diff --git a/src/actions/auth.js b/src/actions/auth.js
new file mode 100644
index 0000000..f317907
--- /dev/null
+++ b/src/actions/auth.js
@@ -0,0 +1,38 @@
+import ax from 'axios';
+import { GET_USERDATA, PROFILE_CHANGE, GROUP_CHANGE } from './types';
+
+const axios = ax.create({
+ xsrfCookieName: 'csrftoken',
+ xsrfHeaderName: 'X-CSRFToken',
+});
+
+export const getUserData = () => (
+ async (dispatch) => {
+ const user = await axios.get('/api/v1/profiles/me');
+ const { id, join_date: joinDate, nick, motivation, signed, groups } = user.data;
+ dispatch({ type: GET_USERDATA, payload: { id, joinDate, nick, motivation, signed, groups } });
+ }
+);
+
+export const textChange = ({ target: { name, value } }) => (
+ (dispatch) => {
+ dispatch({ type: PROFILE_CHANGE, payload: value, target: name });
+ }
+);
+
+export const groupChange = groups => (
+ dispatch => (dispatch({ type: GROUP_CHANGE, payload: groups }))
+);
+
+export const submitRegistration = ({ nick, groups, signed, motivation, id }) => (
+ async (dispatch) => {
+ const response = await axios.patch(`/api/v1/profiles/${id}/`, {
+ nick, groups, signed, motivation,
+ });
+ if (response.data.id === id) {
+ alert('Sikeres mentĂŠs!');
+ } else {
+ alert('MentĂŠs nem sikerĂźlt!');
+ }
+ }
+);
diff --git a/src/actions/index.js b/src/actions/index.js
index e69de29..269586e 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -0,0 +1 @@
+export * from './auth';
diff --git a/src/components/Main.js b/src/components/Main.js
index 4f0edf0..33a6270 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -1,26 +1,25 @@
-import React from "react";
-import { Switch, Route, Redirect } from "react-router-dom";
-import Home from "./pages/Home";
-import Trainers from "./pages/Trainers";
-import Schedule from "./pages/Schedule";
-import NotFound from "./pages/NotFound";
-import Profile from "./pages/Profile";
-import Statistics from "./pages/Statistics";
-import Circles from "./pages/Circles";
+import React from 'react';
+import { Switch, Route, Redirect } from 'react-router-dom';
+import { withRouter } from 'react-router'
+import Home from './pages/Home';
+import Trainers from './pages/Trainers';
+import Schedule from './pages/Schedule';
+import NotFound from './pages/NotFound';
+import Profile from './pages/Profile';
+import Statistics from './pages/Statistics';
+import Circles from './pages/Circles';
const Main = () => (
- <main>
- <Switch>
- <Redirect exact from="/" to="/home" />
- <Route exact path="/home" component={Home} />
- <Route path="/trainers" component={Trainers} />
- <Route path="/schedule" component={Schedule} />
- <Route path="/profile" component={Profile} />
- <Route path="/statistics" component={Statistics} />
- <Route path="/circles" component={Circles} />
- <Route component={NotFound} />
- </Switch>
- </main>
+ <Switch>
+ <Redirect exact from='/' to='/home' />
+ <Route exact path='/home' component={Home} />
+ <Route path='/trainers' component={Trainers} />
+ <Route path='/schedule' component={Schedule} />
+ <Route path='/profile' component={withRouter(Profile)} />
+ <Route path='/statistics' component={Statistics} />
+ <Route path='/circles' component={Circles} />
+ <Route component={NotFound} />
+ </Switch>
);
export default Main;
diff --git a/src/components/pages/Profile.js b/src/components/pages/Profile.js
index 3e27e4b..3850ab7 100644
--- a/src/components/pages/Profile.js
+++ b/src/components/pages/Profile.js
@@ -1,26 +1,86 @@
-import React, { Component } from "react";
-import { Container, Header, Segment } from "semantic-ui-react";
+import React, { Component } from 'react';
+import { Container, Segment, Form, Dropdown, Divider } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import { textChange, submitRegistration, groupChange } from '../../actions';
+
+const options = [
+ { key: 'DT', text: 'DevTeam', value: 'DT' },
+ { key: 'NET', text: 'NeTeam', value: 'NET' },
+ { key: 'ST', text: 'SecurITeam', value: 'ST' },
+ { key: 'SYS', text: 'SysAdmin', value: 'SYS' },
+ { key: 'HAT', text: 'HallgatĂłi TudĂĄsbĂĄzis', value: 'HAT' },
+];
+
+class Profile extends Component {
+ componentWillMount() {
+ if (!this.props.id) {
+ this.props.history.push('/home');
+ }
+ }
-export default class Profile extends Component {
render() {
+ const { nick, groups, motivation, signed, id } = this.props;
return (
<div>
- <Segment inverted textAlign="center" vertical>
+ <Segment textAlign='center' vertical>
<Container>
- <Header
- as="h1"
- content="Profil - TODO"
- inverted
- style={{
- fontSize: "3em",
- fontWeight: "normal",
- marginBottom: 0,
- marginTop: "0.5em"
- }}
- />
+ <Form>
+ <Divider horizontal>BecenĂŠv</Divider>
+ <Form.Input
+ fluid
+ name='nick'
+ onChange={e => this.props.textChange(e)}
+ placeholder='BecenĂŠv'
+ value={nick}
+ />
+ <Divider horizontal>MotivĂĄciĂłs levĂŠl</Divider>
+ <Form.TextArea
+ rows={10}
+ name='motivation'
+ onChange={e => this.props.textChange(e)}
+ placeholder='MiĂŠrt szeretnĂŠk jelentkezni...'
+ value={motivation}
+ />
+ <Divider horizontal>Ărdekelt KĂśrĂśk</Divider>
+ <Dropdown
+ fluid
+ multiple
+ selection
+ placeholder='DevTeam, ...'
+ onChange={(_, v) => this.props.groupChange(v.value)}
+ options={options}
+ defaultValue={groups}
+ />
+ <br />
+ <Form.Checkbox
+ name='signed'
+ label='SzeretnĂŠk jelentkezni a KSZK-ba'
+ onChange={(_, v) => this.props.textChange({ target: { name: v.name, value: v.checked } })}
+ checked={signed}
+ />
+ <Form.Button
+ onClick={() => this.props.submitRegistration({
+ nick, motivation, signed, groups, id
+ })}
+ >
+ MentĂŠs
+ </Form.Button>
+ </Form>
</Container>
</Segment>
</div>
);
}
}
+
+const mapStateToProps = ({ user: { nick, groups, motivation, signed, id } }) => {
+ return {
+ nick,
+ groups,
+ motivation,
+ signed,
+ id,
+ };
+};
+
+export default connect(mapStateToProps, { textChange, submitRegistration, groupChange })(Profile);
--
GitLab