profile page functionality and design

src/actions/auth.js

+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!');
+    }
+  }
+);

src/actions/index.js

+export * from './auth';

src/components/Main.js

-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;

src/components/pages/Profile.js

-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);