Step2.tsx 1.96 KB
Newer Older
Sam Gluck's avatar
Sam Gluck committed
1
2
3
4
5
import * as React from 'react';
import { Col, Row } from '@zendeskgarden/react-grid';

import H6 from '../../components/typography/H6/H6';
import P from '../../components/typography/P/P';
6
import Tag, { TagContainer } from '../../components/elements/Tag/Tag';
Sam Gluck's avatar
Sam Gluck committed
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

//TODO get tags from the API
const words = `offer
segment
slave
duck
instant
market
degree
populate
chick
dear
enemy
reply
drink
occur
support
shell
neck`;

// https://stackoverflow.com/a/6274381/2039244
function shuffle(a) {
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

const words1 = shuffle(words.split('\n'));
const words2 = shuffle(words.split('\n'));

export default ({ user, goToNextStep, toggleInterest }) => {
  return (
    <>
      <Row>
        <Col>
          <H6 style={{ borderBottom: '1px solid lightgrey' }}>
            <span style={{ color: 'darkgrey', fontSize: '.7em' }}>2.</span> Your
            Interests
          </H6>
          <P>
            Tell us what you're interested in so we can make your MoodleNet
            experience tailored to you.
          </P>
          <TagContainer>
            {words2.map(word => (
54
55
56
57
58
59
60
61
              <Tag
                closeable={user.interests.includes(word)}
                focused={user.interests.includes(word)}
                key={word}
                onClick={() => toggleInterest(word)}
              >
                {word}
              </Tag>
Sam Gluck's avatar
Sam Gluck committed
62
63
64
65
66
67
68
            ))}
          </TagContainer>
          <P style={{ fontWeight: 'bold' }}>Popular on MoodleNet</P>
          <P>These tags are popular on MoodleNet.</P>
          <TagContainer>
            {words1.map(word => (
              <Tag
69
                focused={user.interests.includes(word)}
Sam Gluck's avatar
Sam Gluck committed
70
71
72
73
74
75
76
77
78
79
80
81
                key={word}
                onClick={() => toggleInterest(word)}
              >
                {word}
              </Tag>
            ))}
          </TagContainer>
        </Col>
      </Row>
    </>
  );
};