API tools faq
paste
View difference between Paste ID: H5rxdx5S and ndE9q83a
SHOW: | | - or go back to the newest paste.
1-
import React, { Component } from "react";
1+
import React, { Component, Fragment } from "react";
2
import ConnectDB from "../ConnectDB";
3
import { Segment, Header, Button, Icon, Container } from 'semantic-ui-react'
4
5
class EventData extends Component {

6
  state = {

7
    basket: [{ product: '', count: '' }]

8
  }

9
10
  constructor(props) {

11
    super(props);

12
    let eventID;

13
    let tempAddressID;

14
    const tempID = JSON.parse(window.localStorage.getItem('user')).id;

15
    eventID = this.props.match.params.event;

16
    this.state = { event: [], address: [], loading: true };

17
18
    ConnectDB.getEvent(eventID).then(res => {

19
      this.setState({ event: res, loading: false });

20
      tempAddressID = this.state.event.idAddress;

21
      ConnectDB.getAddress(tempAddressID).then(resp => {

22
        this.setState({ address: resp, loading: false });

23
      });

24
25
      this.setState({ eventID: eventID, userID: tempID });

26
    });

27
  }

28
29
  joinToEvent() {

30
    ConnectDB.postUserEventsJunction(this.state.eventID, this.state.userID)

31
      .then(res => {

32
        console.log(this.state.userID);

33
        console.log(this.state.eventID);

34
      });

35
  }

36
37
  static showEvent(event, address) {

38
    return (

39
      <ul>

40
        <div class="ui grid">

41
          <div class="four wide column"><p><Icon name='calendar alternate outline' /><b>Data:</b> {event.date.substring(0, 10)}</p> </div>

42
          <div class="four wide column"><p><Icon name='clock outline' /><b>Godzina:</b>  {event.time.substring(0, 5)}</p></div>

43
          <div class="four wide column"><p><Icon name='building outline' /><b>Miasto:</b> {address.city} </p> </div>

44
          <div class="four wide column"><p><Icon name='street view' /><b>Ulica:</b> {address.street} {address.apartmentNumber} </p> </div>

45
        </div>

46
      </ul>

47
    );

48
  }

49
50
  static showDescription(event) {

51
    return (

52
      <ul>

53
        <div class="ui grid">

54
          <div class="eight wide column"><p><b>{event.description}</b></p> </div>

55
          <div class="eight wide column">

56
            <div class="eight column row">

57
              <div class="ui right left color blue animated button" tabindex="0">

58
                <div class="visible content">Uczestnicy</div>

59
                <div class="hidden content">

60
                  <i class="child icon"></i>

61
                </div>

62
              </div>

63
              <button class="circular right floated color blue ui icon button">

64
                <i class="icon user outline"></i>

65
              </button>

66
              <button class="circular right floated color blue ui icon button">

67
                <i class="icon user outline"></i>

68
              </button>

69
              <button class="circular right floated color blue ui icon button">

70
                <i class="icon user outline"></i>

71
              </button>

72
              <button class="circular right floated color blue ui icon button">

73
                <i class="icon user outline"></i>

74
              </button>

75
              <button class="circular right floated color blue ui icon button">

76
                <i class="icon user outline"></i>

77
              </button>

78
              <button class="circular right floated color blue ui icon button">

79
                <i class="icon user outline"></i>

80
              </button>

81
              <button class="circular right floated color blue ui icon button">

82
                <i class="icon user outline"></i>

83
              </button>

84
            </div>

85
            <div class="eight column row">

86
              {this.state.basket && this.state.basket.map(row =>

87
                <Fragment>

88
                  <div class="ui left icon input">

89
                    <input type="text" placeholder="Wpisz produkt"></input>

90
                    <i class="birthday cake icon"></i>

91
                  </div>

92
                  <div class="ui right labeled input">

93
                    <input type="text" placeholder="Wpisz ilość"></input>

94
                    <div class="ui basic label">

95
                      szt

96
                    </div>

97
                  </div>

98
                </Fragment>

99
              )}

100
            </div>

101
            <div class="eight column row">

102
              <div class="ui left floated vertical animated button" tabindex="0" onClick={() => handleAddNewProduct()}>

103
                <div class="hidden content">Dodaj</div>

104
                <div class="visible content">

105
                  <i class="plus icon"></i>

106
                </div>

107
              </div>

108
            </div>

109
110
          </div>

111
        </div>

112
      </ul>

113
    );

114
  }

115
116
  handleAddNewProduct = () => {

117
    this.setState(prevState => ({ basket: [...prevState.basket, { product: '', count: '' }] }))

118
  }

119
120
  render() {

121
    let contents = this.state.loading

122
      ? <p><em>Loading...</em></p>

123
      : EventData.showEvent(this.state.event, this.state.address);

124
    let descriptionContents = this.state.loading

125
      ? <p><em>Loading...</em></p>

126
      : EventData.showDescription(this.state.event, this.state.address);

127
    return (

128
      <div>

129
130
        <Segment.Group>

131
          <Segment inverted color='blue' secondary>

132
            <Header as="h2" textAlign="center">Wydarzenie</Header>

133
          </Segment>

134
          <Container>

135
            <Header

136
              as='h1'

137
              inverted

138
              style={{

139
                width: "100%",

140
                height: 250,

141
                display: 'inline-block',

142
                opacity: 1,

143
                backgroundImage: `url(${"https://i.imgur.com/A3SxaVn.png"})`,

144
                backgroundSize: 'cover',

145
                fontWeight: 'bold',

146
                marginBottom: 0,

147
                marginLeft: 'auto',

148
                marginRight: 'auto',

149
                paddingTop: 210,

150
                fontSize: 'xx-large'

151
              }}

152
            >

153
              {this.state.event.title}

154
            </Header>

155
          </Container>

156
          <Segment textAlign="left">

157
            {contents}

158
          </Segment>

159
          <Segment textAlign="left">

160
            {descriptionContents}

161
          </Segment>

162
          <Segment>

163
            <Button color="blue" icon labelPosition='left'

164
              onClick={() => { window.location.href = ('#/home/events/search-event'); }}>

165
              Wróć

166
              <Icon name='reply' />

167
            </Button>

168
            <Button color="blue" icon labelPosition='right'

169
              onClick={() => this.joinToEvent()}>

170
              Dołącz do wydarzenia

171
              <Icon name='check circle' />

172
            </Button>

173
          </Segment>

174
        </Segment.Group>

175
      </div>

176
    );

177
  }

178
}

179
180
export default EventData;

181
    super(props);

182
    let eventID;

183
    let tempAddressID;

184
    const tempID = JSON.parse(window.localStorage.getItem('user')).id;

185
    eventID = this.props.match.params.event;

186
    this.state = { event: [], address: [], loading: true };

187
188
    ConnectDB.getEvent(eventID).then(res => {

189
      this.setState({ event: res, loading: false });

190
      tempAddressID = this.state.event.idAddress;

191
      ConnectDB.getAddress(tempAddressID).then(resp => {

192
        this.setState({ address: resp, loading: false });

193
        });

194
195
      this.setState({eventID:eventID, userID:tempID});

196
      });

197
    }  

198
199
  joinToEvent(){

200
    ConnectDB.postUserEventsJunction(this.state.eventID,this.state.userID)

201
      .then(res => {

202
        console.log(this.state.userID);

203
        console.log(this.state.eventID);

204
      });

205
  }

206
207
  static showEvent(event, address) {

208
    return (

209
      <ul>

210
        <div class="ui grid">

211
          <div class="four wide column"><p><Icon name='calendar alternate outline' /><b>Data:</b> {event.date.substring(0,10)}</p> </div>

212
          <div class="four wide column"><p><Icon name='clock outline' /><b>Godzina:</b>  {event.time.substring(0,5)}</p></div>

213
          <div class="four wide column"><p><Icon name='building outline' /><b>Miasto:</b> {address.city} </p> </div>

214
          <div class="four wide column"><p><Icon name='street view' /><b>Ulica:</b> {address.street} {address.apartmentNumber} </p> </div>

215
        </div>

216
      </ul>

217
    );

218
  }

219
220
  static showDescription(event) {

221
    return (

222
      <ul>

223
        <div class="ui grid">

224
          <div class="eight wide column"><p><b>{event.description}</b></p> </div>

225
          <div class="eight wide column">

226
            <div class="eight column row">

227
              <div class="ui right left color blue animated button" tabindex="0">

228
                <div class="visible content">Uczestnicy</div>

229
                <div class="hidden content">

230
                  <i class="child icon"></i>

231
                </div>

232
              </div>

233
              <button class="circular right floated color blue ui icon button">

234
                <i class="icon user outline"></i>

235
              </button>

236
              <button class="circular right floated color blue ui icon button">

237
                <i class="icon user outline"></i>

238
              </button>

239
              <button class="circular right floated color blue ui icon button">

240
                <i class="icon user outline"></i>

241
              </button>

242
              <button class="circular right floated color blue ui icon button">

243
                <i class="icon user outline"></i>

244
              </button>

245
              <button class="circular right floated color blue ui icon button">

246
                <i class="icon user outline"></i>

247
              </button>

248
              <button class="circular right floated color blue ui icon button">

249
                <i class="icon user outline"></i>

250
              </button>

251
              <button class="circular right floated color blue ui icon button">

252
                <i class="icon user outline"></i>

253
              </button>

254
            </div>

255
            <div class="eight column row">

256
              <div class="ui left icon input">

257
                <input type="text" placeholder="Wpisz produkt"></input>

258
                <i class="birthday cake icon"></i>

259
              </div>

260
              <div class="ui right labeled input">

261
                <input type="text" placeholder="Wpisz ilość"></input>

262
                <div class="ui basic label">

263
                  szt

264
                </div>

265
              </div>

266
            </div>

267
            <div class="eight column row">

268
              <div class="ui left floated vertical animated button" tabindex="0">

269
                  <div class="hidden content">Dodaj</div>

270
                    <div class="visible content">

271
                      <i class="plus icon"></i>

272
                    </div>

273
              </div>

274
            </div>

275
            

276
          </div>

277
        </div>

278
      </ul>

279
    );

280
  }

281
282
  render() {

283
    let contents = this.state.loading

284
      ? <p><em>Loading...</em></p>

285
      : EventData.showEvent(this.state.event, this.state.address);

286
    let descriptionContents = this.state.loading

287
      ? <p><em>Loading...</em></p>

288
      : EventData.showDescription(this.state.event, this.state.address);

289
    return (

290
      <div>

291
        

292
        <Segment.Group>

293
          <Segment inverted color='blue' secondary>

294
            <Header as="h2" textAlign="center">Wydarzenie</Header>

295
          </Segment>

296
          <Container>

297
          <Header

298
            as='h1'

299
            inverted

300
            style={{

301
                width: "100%",

302
                height: 250,

303
                display: 'inline-block',

304
                opacity: 1,

305
                backgroundImage: `url(${"https://i.imgur.com/A3SxaVn.png"})`,

306
                backgroundSize: 'cover',

307
                fontWeight: 'bold',

308
                marginBottom: 0,

309
                marginLeft: 'auto',

310
                marginRight: 'auto',

311
                paddingTop: 210,

312
                fontSize: 'xx-large'

313
            }}

314
          >

315
          {this.state.event.title}

316
          </Header>

317
          </Container>

318
          <Segment textAlign="left">

319
            {contents} 

320
          </Segment>

321
          <Segment textAlign="left">

322
            {descriptionContents}

323
          </Segment>

324
          <Segment>

325
          <Button color="blue" icon labelPosition='left'

326
              onClick={() => {window.location.href = ('#/home/events/search-event');}}>

327
              Wróć

328
              <Icon name='reply' />

329
            </Button>

330
            <Button color="blue" icon labelPosition='right' 

331
              onClick={() => this.joinToEvent()}>

332
              Dołącz do wydarzenia

333
              <Icon name='check circle' />

334
            </Button>

335
          </Segment>

336
        </Segment.Group> 

337
      </div>

338
    );

339
  }

340
}

341
 

342
export default EventData;
        

    


            


                                


        

            



                
    

        Public Pastes
    

    
            

    

                    

        

    





    


    
    
    
    
    
    
    
    




    


    



                

            We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.             OK, I Understand
        

    
                

            

                
                    
                
            

            

                Not a member of Pastebin yet?

                Sign Up, it unlocks many cool features!