src/components/pages/Mentors.js

+import {
+  Card,
+  Container,
+  Header,
+  Icon,
+  Image,
+  Item,
+  Label,
+  Responsive,
+  Segment,
+} from 'semantic-ui-react';
+import React, { Component } from 'react';
+
+import { connect } from 'react-redux';
+import { getMentors } from '../../actions/mentors';
+
+class Mentors extends Component {
+  UNSAFE_componentWillMount() {
+    this.props.getMentors();
+  }
+
+  renderMentorsNormal() {
+    return this.props.mentors.map((item, index) => (
+      <Card style={{ maxWidth: '100%', minWidth: '100%' }}>
+        <Card.Content style={{ padding: '0' }}>
+          <Item.Group>
+            <Item>
+              {index % 2 === 0 ? (
+                <Item.Image size="medium" src={item.image} />
+              ) : null}
+              <Item.Content style={{ padding: '1rem' }}>
+                <Item.Header>{item.name}</Item.Header>
+                <Item.Description>
+                  <p dangerouslySetInnerHTML={{ __html: item.text }}></p>
+                </Item.Description>
+                <Item.Extra>
+                  <Label>
+                    <Icon name="mail" />
+                    {item.email}
+                  </Label>
+                </Item.Extra>
+              </Item.Content>
+              {index % 2 === 1 ? (
+                <Item.Image size="medium" src={item.image} />
+              ) : null}
+            </Item>
+          </Item.Group>
+        </Card.Content>
+      </Card>
+    ));
+  }
+
+  renderMentorsMobile() {
+    return this.props.mentors.map((item) => (
+      <Card key={item.id}>
+        <Image src={item.image} wrapped ui={false} />
+        <Card.Content>
+          <Card.Header>{item.name}</Card.Header>
+          <Card.Description>
+            <p dangerouslySetInnerHTML={{ __html: item.text }}></p>
+          </Card.Description>
+        </Card.Content>
+        <Card.Content extra>
+          <Label>
+            <Icon name="mail" />
+            {item.email}
+          </Label>
+        </Card.Content>
+      </Card>
+    ));
+  }
+
+  render() {
+    return (
+      <div>
+        <Segment inverted textAlign="center" vertical>
+          <Container>
+            <Header
+              as="h1"
+              content="Mentorok"
+              inverted
+              style={{
+                fontSize: '3em',
+                fontWeight: 'normal',
+                marginBottom: 0,
+                marginTop: '0.5em',
+              }}
+            />
+          </Container>
+        </Segment>
+
+        <Responsive minWidth={768}>
+          <Container style={{ paddingTop: '2em', paddingBottom: '5em' }}>
+            {this.renderMentorsNormal()}
+          </Container>
+        </Responsive>
+
+        <Responsive minWidth={551} maxWidth={767}>
+          <Container style={{ paddingTop: '2em', paddingBottom: '5em' }}>
+            <Card.Group centered itemsPerRow={2}>
+              {this.renderMentorsMobile()}
+            </Card.Group>
+          </Container>
+        </Responsive>
+
+        <Responsive maxWidth={550}>
+          <Container style={{ paddingTop: '2em', paddingBottom: '5em' }}>
+            <Card.Group centered itemsPerRow={1}>
+              {this.renderMentorsMobile()}
+            </Card.Group>
+          </Container>
+        </Responsive>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = ({ mentors, user }) => ({ mentors, user });
+
+export default connect(mapStateToProps, { getMentors })(Mentors);

src/components/pages/News.css

+.news-extra {
+  color: grey;
+  font-size: 0.75em;
+  font-style: italic;
+  font-family: fantasy;
+  text-align: justify;
+}
+
+.news-text {
+  font-size: 1.15em;
+  font-family: Arial, Helvetica, sans-serif;
+  text-align: justify;
+}

src/components/pages/News.js

+import './News.css';
+
+import { Button, Container, Grid, Item, Segment } from 'semantic-ui-react';
+import React, { Component } from 'react';
+import { deleteNews, getNews, setSelectedNews } from '../../actions/news';
+
+import AddNewsForm from '../forms/AddNewsForm';
+import ConfirmModal from '../forms/ConfirmModal';
+import EditNewsForm from '../forms/EditNewsForm';
+import { connect } from 'react-redux';
+import moment from 'moment';
+
+const linkify = (text) => {
+  const urlRegex = /(https?:\/\/[^\s]+)/g;
+  return text.split(urlRegex).map((part, index) =>
+    part.match(urlRegex) ? (
+      <a key={index} href={part} target="_blank" rel="noopener noreferrer">
+        {part}
+      </a>
+    ) : (
+      part
+    )
+  );
+};
+
+class News extends Component {
+  UNSAFE_componentWillMount() {
+    this.props.getNews();
+  }
+
+  renderNews() {
+    return this.props.news.map((item) => (
+      <Item key={item.id}>
+        <Item.Content>
+          <Container text textAlign="left">
+            <Item.Header style={{ fontSize: '2em', width: '100%' }}>
+              <Grid>
+                <Grid.Column
+                  floated="left"
+                  width={this.props.user.role === 'Staff' ? 12 : 16}
+                >
+                  {item.title}
+                </Grid.Column>
+                {this.props.user.role === 'Staff' ? (
+                  <Grid.Column floated="right" width={4}>
+                    <EditNewsForm
+                      onClick={() => this.props.setSelectedNews(item)}
+                    />
+                    <ConfirmModal
+                      text={`törölni akarod a következő hírt: ${item.title}`}
+                      button={
+                        <Button compact color="red" size="mini">
+                          Törlés
+                        </Button>
+                      }
+                      onAccept={() => this.props.deleteNews(item)}
+                    />
+                  </Grid.Column>
+                ) : null}
+              </Grid>
+            </Item.Header>
+            <Item.Meta style={{ fontSize: '0.75em', fontStyle: 'italic' }}>
+              Közzétéve:
+              {moment(item.created_at).format('LLLL')}
+            </Item.Meta>
+            <Item.Description className="news-text" style={{ fontSize: '1em' }}>
+              {this.renderMultiLine(item.text)}
+            </Item.Description>
+          </Container>
+        </Item.Content>
+      </Item>
+    ));
+  }
+
+  renderMultiLine = (text) => {
+    const strings = text.split('\n');
+    return strings.map((string) => <p key={Math.random()}>{linkify(string)}</p>);
+  };
+
+  render() {
+    return (
+      <div style={{ paddingTop: '1em', paddingBottom: '5em' }}>
+        <Segment vertical>
+          {/*  { this.props.user.is_superuser ? <AddNewsForm /> : ''} */}
+          <Container text textAlign="center">
+            {this.props.user.role === 'Staff' ? <AddNewsForm /> : null}
+            <Item.Group divided>{this.renderNews()}</Item.Group>
+          </Container>
+        </Segment>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = ({ news, user }) => ({ news, user });
+
+export default connect(mapStateToProps, {
+  getNews,
+  deleteNews,
+  setSelectedNews,
+})(News);

src/components/pages/Roster.js

-import React from 'react';
-import { Switch, Route } from 'react-router-dom';
-import FullRoster from './roster/FullRoster';
-import Player from './roster/Player';
-
-const Roster = () => (
-  <Switch>
-    <Route exact path='/roster' component={FullRoster} />
-    <Route path='/roster/:number' component={Player} />
-  </Switch>
-);
-
-
-export default Roster;

src/config.js.temp

-export const APIKEY = '';

src/index.css

-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-}