Passed
Push — master ( c49fa8...c04ae7 )
by Guangyu
05:06 queued 11s
created

src/components/MyEMS/Notification/Notifiction.js   A

Complexity

Total Complexity 5
Complexity/F 0

Size

Lines of Code 636
Function Count 0

Duplication

Duplicated Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
wmc 5
eloc 564
mnd 5
bc 5
fnc 0
dl 0
loc 636
rs 10
bpm 0
cpm 0
noi 0
c 0
b 0
f 0
1
import React, { createRef, Fragment, useEffect, useState } from 'react';
2
import paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';
3
import BootstrapTable from 'react-bootstrap-table-next';
4
import {
5
  Row,
6
  Col,
7
  Card,
8
  CardBody,
9
  Button,
10
  CustomInput,
11
  DropdownItem,
12
  DropdownMenu,
13
  DropdownToggle,
14
  InputGroup,
15
  UncontrolledDropdown
16
} from 'reactstrap';
17
import ButtonIcon from '../../common/ButtonIcon';
18
import { Link } from 'react-router-dom';
19
import Badge from 'reactstrap/es/Badge';
20
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
21
import FalconCardHeader from '../../common/FalconCardHeader';
22
import uuid from 'uuid/v1';
23
import { getPaginationArray } from '../../../helpers/utils';
24
import { getCookieValue, createCookie } from '../../../helpers/utils';
25
import withRedirect from '../../../hoc/withRedirect';
26
import { withTranslation } from 'react-i18next';
27
28
29
30
31
const Notification = ({ setRedirect, setRedirectUrl, t }) => {
32
  useEffect(() => {
33
    let is_logged_in = getCookieValue('is_logged_in');
34
    let user_name = getCookieValue('user_name');
35
    let user_display_name = getCookieValue('user_display_name');
36
    let user_uuid = getCookieValue('user_uuid');
37
    let token = getCookieValue('token');
38
    if (is_logged_in === null || !is_logged_in) {
39
      setRedirectUrl(`/authentication/basic/login`);
40
      setRedirect(true);
41
    } else {
42
      //update expires time of cookies
43
      createCookie('is_logged_in', true, 1000 * 60 * 60 * 8);
44
      createCookie('user_name', user_name, 1000 * 60 * 60 * 8);
45
      createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8);
46
      createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8);
47
      createCookie('token', token, 1000 * 60 * 60 * 8);
48
    }
49
  }, );
50
  // State
51
  let table = createRef();
52
53
  const [isSelected, setIsSelected] = useState(false);
54
  const handleNextPage = ({ page, onPageChange }) => () => {
55
    onPageChange(page + 1);
56
  };
57
58
  const handlePrevPage = ({ page, onPageChange }) => () => {
59
    onPageChange(page - 1);
60
  };
61
62
  const onSelect = () => {
63
    setImmediate(() => {
64
      setIsSelected(!!table.current.selectionContext.selected.length);
65
    });
66
  };
67
68
69
  const orderFormatter = (dataField, { id, name, email }) => (
70
    <Fragment>
71
      <Link to="/e-commerce/order-details">
72
        <strong>#{id}</strong>
73
      </Link>{' '}
74
    by <strong>{name}</strong>
75
      <br />
76
      <a href={`mailto:${email}`}>{email}</a>
77
    </Fragment>
78
  );
79
80
  const shippingFormatter = (address, { shippingType }) => (
81
    <Fragment>
82
      {address}
83
      <p className="mb-0 text-500">{shippingType}</p>
84
    </Fragment>
85
  );
86
87
  const badgeFormatter = status => {
88
    let color = '';
89
    let icon = '';
90
    let text = '';
91
    switch (status) {
92
      case 'success':
93
        color = 'success';
94
        icon = 'check';
95
        text = 'Completed';
96
        break;
97
      case 'hold':
98
        color = 'secondary';
99
        icon = 'ban';
100
        text = 'On hold';
101
        break;
102
      case 'processing':
103
        color = 'primary';
104
        icon = 'redo';
105
        text = 'Processing';
106
        break;
107
      case 'pending':
108
        color = 'warning';
109
        icon = 'stream';
110
        text = 'Pending';
111
        break;
112
      default:
113
        color = 'warning';
114
        icon = 'stream';
115
        text = 'Pending';
116
    }
117
118
    return (
119
      <Badge color={`soft-${color}`} className="rounded-capsule fs--1 d-block">
120
        {text}
121
        <FontAwesomeIcon icon={icon} transform="shrink-2" className="ml-1" />
122
      </Badge>
123
    );
124
  };
125
126
  const actionFormatter = (dataField, { id }) => (
127
    // Control your row with this id
128
    <UncontrolledDropdown>
129
      <DropdownToggle color="link" size="sm" className="text-600 btn-reveal mr-3">
130
        <FontAwesomeIcon icon="ellipsis-h" className="fs--1" />
131
      </DropdownToggle>
132
      <DropdownMenu right className="border py-2">
133
        <DropdownItem onClick={() => console.log('Completed: ', id)}>Completed</DropdownItem>
134
        <DropdownItem onClick={() => console.log('Processing: ', id)}>Processing</DropdownItem>
135
        <DropdownItem onClick={() => console.log('On hold: ', id)}>On hold</DropdownItem>
136
        <DropdownItem onClick={() => console.log('Pending: ', id)}>Pending</DropdownItem>
137
        <DropdownItem divider />
138
        <DropdownItem onClick={() => console.log('Delete: ', id)} className="text-danger">
139
          Delete
140
      </DropdownItem>
141
      </DropdownMenu>
142
    </UncontrolledDropdown>
143
  );
144
  const orders = [
145
    {
146
      id: uuid().split('-')[0],
147
      // id: 181,
148
      name: 'Ricky Antony',
149
      email: '[email protected]',
150
      date: '20/04/2019',
151
      address: 'Ricky Antony, 2392 Main Avenue, Penasauka, New Jersey 02149',
152
      shippingType: 'Via Flat Rate',
153
      status: 'success',
154
      amount: 99
155
    },
156
    {
157
      id: uuid().split('-')[0],
158
      // id: 182,
159
      name: 'Kin Rossow',
160
      email: '[email protected]',
161
      date: '20/04/2019',
162
      address: 'Kin Rossow, 1 Hollywood Blvd,Beverly Hills, California 90210',
163
      shippingType: 'Via Free Shipping',
164
      status: 'success',
165
      amount: 120
166
    },
167
    {
168
      id: uuid().split('-')[0],
169
      // id: 183,
170
      name: 'Merry Diana',
171
      email: '[email protected]',
172
      date: '30/04/2019',
173
      address: 'Merry Diana, 1 Infinite Loop, Cupertino, California 90210',
174
      shippingType: 'Via Link Road',
175
      status: 'hold',
176
      amount: 70
177
    },
178
    {
179
      id: uuid().split('-')[0],
180
      // id: 184,
181
      name: 'Bucky Robert',
182
      email: '[email protected]',
183
      date: '30/04/2019',
184
      address: 'Bucky Robert, 1 Infinite Loop, Cupertino, California 90210',
185
      shippingType: 'Via Free Shipping',
186
      status: 'pending',
187
      amount: 92
188
    },
189
    {
190
      id: uuid().split('-')[0],
191
      // id: 185,
192
      name: 'Rocky Zampa',
193
      email: '[email protected]',
194
      date: '30/04/2019',
195
      address: 'Rocky Zampa, 1 Infinite Loop, Cupertino, California 90210',
196
      shippingType: 'Via Free Road',
197
      status: 'hold',
198
      amount: 120
199
    },
200
    {
201
      id: uuid().split('-')[0],
202
      // id: 186,
203
      name: 'Ricky John',
204
      email: '[email protected]',
205
      date: '30/04/2019',
206
      address: 'Ricky John, 1 Infinite Loop, Cupertino, California 90210',
207
      shippingType: 'Via Free Shipping',
208
      status: 'processing',
209
      amount: 145
210
    },
211
    {
212
      id: uuid().split('-')[0],
213
      // id: 187,
214
      name: 'Cristofer Henric',
215
      email: '[email protected]',
216
      date: '30/04/2019',
217
      address: 'Cristofer Henric, 1 Infinite Loop, Cupertino, California 90210',
218
      shippingType: 'Via Flat Rate',
219
      status: 'success',
220
      amount: 55
221
    },
222
    {
223
      id: uuid().split('-')[0],
224
      // id: 188,
225
      name: 'Brate Lee',
226
      email: '[email protected]',
227
      date: '29/04/2019',
228
      address: 'Brate Lee, 1 Infinite Loop, Cupertino, California 90210',
229
      shippingType: 'Via Link Road',
230
      status: 'hold',
231
      amount: 90
232
    },
233
    {
234
      id: uuid().split('-')[0],
235
      // id: 189,
236
      name: 'Thomas Stephenson',
237
      email: '[email protected]',
238
      date: '29/04/2019',
239
      address: 'Thomas Stephenson, 116 Ballifeary Road, Bamff',
240
      shippingType: 'Via Flat Rate',
241
      status: 'processing',
242
      amount: 52
243
    },
244
    {
245
      id: uuid().split('-')[0],
246
      // id: 190,
247
      name: 'Evie Singh',
248
      email: '[email protected]',
249
      date: '29/04/2019',
250
      address: 'Evie Singh, 54 Castledore Road, Tunstead',
251
      shippingType: 'Via Flat Rate',
252
      status: 'success',
253
      amount: 90
254
    },
255
    {
256
      id: uuid().split('-')[0],
257
      // id: 191,
258
      name: 'David Peters',
259
      email: '[email protected]',
260
      date: '29/04/2019',
261
      address: 'David Peters, Rhyd Y Groes, Rhosgoch, LL66 0AT',
262
      shippingType: 'Via Link Road',
263
      status: 'success',
264
      amount: 69
265
    },
266
    {
267
      id: uuid().split('-')[0],
268
      // id: 192,
269
      name: 'Jennifer Johnson',
270
      email: '[email protected]',
271
      date: '28/04/2019',
272
      address: 'Jennifer Johnson, Rhyd Y Groes, Rhosgoch, LL66 0AT',
273
      shippingType: 'Via Flat Rate',
274
      status: 'processing',
275
      amount: 112
276
    },
277
    {
278
      id: uuid().split('-')[0],
279
      // id: 193,
280
      name: ' Demarcus Okuneva',
281
      email: '[email protected]',
282
      date: '28/04/2019',
283
      address: ' Demarcus Okuneva, 90555 Upton Drive Jeffreyview, UT 08771',
284
      shippingType: 'Via Flat Rate',
285
      status: 'success',
286
      amount: 99
287
    },
288
    {
289
      id: uuid().split('-')[0],
290
      // id: 194,
291
      name: 'Simeon Harber',
292
      email: '[email protected]',
293
      date: '27/04/2019',
294
      address: 'Simeon Harber, 702 Kunde Plain Apt. 634 East Bridgetview, HI 13134-1862',
295
      shippingType: 'Via Free Shipping',
296
      status: 'hold',
297
      amount: 129
298
    },
299
    {
300
      id: uuid().split('-')[0],
301
      // id: 195,
302
      name: 'Lavon Haley',
303
      email: '[email protected]',
304
      date: '27/04/2019',
305
      address: 'Lavon Haley, 30998 Adonis Locks McGlynnside, ID 27241',
306
      shippingType: 'Via Free Shipping',
307
      status: 'pending',
308
      amount: 70
309
    },
310
    {
311
      id: uuid().split('-')[0],
312
      // id: 196,
313
      name: 'Ashley Kirlin',
314
      email: '[email protected]',
315
      date: '26/04/2019',
316
      address: 'Ashley Kirlin, 43304 Prosacco Shore South Dejuanfurt, MO 18623-0505',
317
      shippingType: 'Via Link Road',
318
      status: 'processing',
319
      amount: 39
320
    },
321
    {
322
      id: uuid().split('-')[0],
323
      // id: 197,
324
      name: 'Johnnie Considine',
325
      email: '[email protected]',
326
      date: '26/04/2019',
327
      address: 'Johnnie Considine, 6008 Hermann Points Suite 294 Hansenville, TN 14210',
328
      shippingType: 'Via Flat Rate',
329
      status: 'pending',
330
      amount: 70
331
    },
332
    {
333
      id: uuid().split('-')[0],
334
      // id: 198,
335
      name: 'Trace Farrell',
336
      email: '[email protected]',
337
      date: '26/04/2019',
338
      address: 'Trace Farrell, 431 Steuber Mews Apt. 252 Germanland, AK 25882',
339
      shippingType: 'Via Free Shipping',
340
      status: 'success',
341
      amount: 70
342
    },
343
    {
344
      id: uuid().split('-')[0],
345
      // id: 199,
346
      name: 'Estell Nienow',
347
      email: '[email protected]',
348
      date: '26/04/2019',
349
      address: 'Estell Nienow, 4167 Laverna Manor Marysemouth, NV 74590',
350
      shippingType: 'Via Free Shipping',
351
      status: 'success',
352
      amount: 59
353
    },
354
    {
355
      id: uuid().split('-')[0],
356
      // id: 200,
357
      name: 'Daisha Howe',
358
      email: '[email protected]',
359
      date: '25/04/2019',
360
      address: 'Daisha Howe, 829 Lavonne Valley Apt. 074 Stehrfort, RI 77914-0379',
361
      shippingType: 'Via Free Shipping',
362
      status: 'success',
363
      amount: 39
364
    },
365
    {
366
      id: uuid().split('-')[0],
367
      // id: 201,
368
      name: 'Miles Haley',
369
      email: '[email protected]',
370
      date: '24/04/2019',
371
      address: 'Miles Haley, 53150 Thad Squares Apt. 263 Archibaldfort, MO 00837',
372
      shippingType: 'Via Flat Rate',
373
      status: 'success',
374
      amount: 55
375
    },
376
    {
377
      id: uuid().split('-')[0],
378
      // id: 202,
379
      name: 'Brenda Watsica',
380
      email: '[email protected]',
381
      date: '24/04/2019',
382
      address: "Brenda Watsica, 9198 O'Kon Harbors Morarborough, IA 75409-7383",
383
      shippingType: 'Via Free Shipping',
384
      status: 'success',
385
      amount: 89
386
    },
387
    {
388
      id: uuid().split('-')[0],
389
      // id: 203,
390
      name: "Ellie O'Reilly",
391
      email: '[email protected]',
392
      date: '24/04/2019',
393
      address: "Ellie O'Reilly, 1478 Kaitlin Haven Apt. 061 Lake Muhammadmouth, SC 35848",
394
      shippingType: 'Via Free Shipping',
395
      status: 'success',
396
      amount: 47
397
    },
398
    {
399
      id: uuid().split('-')[0],
400
      // id: 204,
401
      name: 'Garry Brainstrow',
402
      email: '[email protected]',
403
      date: '23/04/2019',
404
      address: 'Garry Brainstrow, 13572 Kurt Mews South Merritt, IA 52491',
405
      shippingType: 'Via Free Shipping',
406
      status: 'success',
407
      amount: 139
408
    },
409
    {
410
      id: uuid().split('-')[0],
411
      // id: 205,
412
      name: 'Estell Pollich',
413
      email: '[email protected]',
414
      date: '23/04/2019',
415
      address: 'Estell Pollich, 13572 Kurt Mews South Merritt, IA 52491',
416
      shippingType: 'Via Free Shipping',
417
      status: 'hold',
418
      amount: 49
419
    },
420
    {
421
      id: uuid().split('-')[0],
422
      // id: 206,
423
      name: 'Ara Mueller',
424
      email: '[email protected]',
425
      date: '23/04/2019',
426
      address: 'Ara Mueller, 91979 Kohler Place Waelchiborough, CT 41291',
427
      shippingType: 'Via Flat Rate',
428
      status: 'hold',
429
      amount: 19
430
    },
431
    {
432
      id: uuid().split('-')[0],
433
      // id: 207,
434
      name: 'Lucienne Blick',
435
      email: '[email protected]',
436
      date: '23/04/2019',
437
      address: 'Lucienne Blick, 6757 Giuseppe Meadows Geraldinemouth, MO 48819-4970',
438
      shippingType: 'Via Flat Rate',
439
      status: 'hold',
440
      amount: 59
441
    },
442
    {
443
      id: uuid().split('-')[0],
444
      // id: 208,
445
      name: 'Laverne Haag',
446
      email: '[email protected]',
447
      date: '22/04/2019',
448
      address: 'Laverne Haag, 2327 Kaylee Mill East Citlalli, AZ 89582-3143',
449
      shippingType: 'Via Flat Rate',
450
      status: 'hold',
451
      amount: 49
452
    },
453
    {
454
      id: uuid().split('-')[0],
455
      // id: 209,
456
      name: 'Brandon Bednar',
457
      email: '[email protected]',
458
      date: '22/04/2019',
459
      address: 'Brandon Bednar, 25156 Isaac Crossing Apt. 810 Lonborough, CO 83774-5999',
460
      shippingType: 'Via Flat Rate',
461
      status: 'hold',
462
      amount: 39
463
    },
464
    {
465
      id: uuid().split('-')[0],
466
      // id: 210,
467
      name: 'Dimitri Boehm',
468
      email: '[email protected]',
469
      date: '23/04/2019',
470
      address: 'Dimitri Boehm, 71603 Wolff Plains Apt. 885 Johnstonton, MI 01581',
471
      shippingType: 'Via Flat Rate',
472
      status: 'hold',
473
      amount: 111
474
    }
475
  ];
476
  const columns = [
477
    {
478
      dataField: 'id',
479
      text: 'Space',
480
      classes: 'py-2 align-middle',
481
      formatter: orderFormatter,
482
      sort: true
483
    },
484
    {
485
      dataField: 'date',
486
      text: 'Date',
487
      classes: 'py-2 align-middle',
488
      sort: true
489
    },
490
    {
491
      dataField: 'address',
492
      text: 'Description',
493
      classes: 'py-2 align-middle',
494
      formatter: shippingFormatter,
495
      sort: true
496
    },
497
    {
498
      dataField: 'status',
499
      text: 'Status',
500
      classes: 'py-2 align-middle',
501
      formatter: badgeFormatter,
502
      sort: true
503
    },
504
    {
505
      dataField: '',
506
      text: '',
507
      classes: 'py-2 align-middle',
508
      formatter: actionFormatter,
509
      align: 'right'
510
    }
511
  ];
512
513
514
515
  const options = {
516
    custom: true,
517
    sizePerPage: 10,
518
    totalSize: orders.length
519
  };
520
521
  const SelectRowInput = ({ indeterminate, rowIndex, ...rest }) => (
522
    <div className="custom-control custom-checkbox">
523
      <input
524
        className="custom-control-input"
525
        {...rest}
526
        onChange={() => { }}
527
        ref={input => {
528
          if (input) input.indeterminate = indeterminate;
529
        }}
530
      />
531
      <label className="custom-control-label" />
532
    </div>
533
  );
534
535
  const selectRow = onSelect => ({
536
    mode: 'checkbox',
537
    classes: 'py-2 align-middle',
538
    clickToSelect: false,
539
    selectionHeaderRenderer: ({ mode, ...rest }) => <SelectRowInput type="checkbox" {...rest} />,
540
    selectionRenderer: ({ mode, ...rest }) => <SelectRowInput type={mode} {...rest} />,
541
    onSelect: onSelect,
542
    onSelectAll: onSelect
543
  });
544
545
546
  return (
547
    <Fragment>
548
      <Card className="mb-3">
549
        <FalconCardHeader title={t('Notification List')} light={false}>
550
          {isSelected ? (
551
            <InputGroup size="sm" className="input-group input-group-sm">
552
              <CustomInput type="select" id="bulk-select">
553
                <option>Bulk actions</option>
554
                <option value="Refund">Refund</option>
555
                <option value="Delete">Delete</option>
556
                <option value="Archive">Archive</option>
557
              </CustomInput>
558
              <Button color="falcon-default" size="sm" className="ml-2">
559
                Apply
560
                </Button>
561
            </InputGroup>
562
          ) : (
563
              <Fragment>
564
                <ButtonIcon icon="external-link-alt" transform="shrink-3 down-2" color="falcon-default" size="sm">
565
                  {t('Export')}
566
                </ButtonIcon>
567
              </Fragment>
568
            )}
569
        </FalconCardHeader>
570
        <CardBody className="p-0">
571
          <PaginationProvider pagination={paginationFactory(options)}>
572
            {({ paginationProps, paginationTableProps }) => {
573
              const lastIndex = paginationProps.page * paginationProps.sizePerPage;
574
575
              return (
576
                <Fragment>
577
                  <div className="table-responsive">
578
                    <BootstrapTable
579
                      ref={table}
580
                      bootstrap4
581
                      keyField="id"
582
                      data={orders}
583
                      columns={columns}
584
                      selectRow={selectRow(onSelect)}
585
                      bordered={false}
586
                      classes="table-dashboard table-striped table-sm fs--1 border-bottom mb-0 table-dashboard-th-nowrap"
587
                      rowClasses="btn-reveal-trigger"
588
                      headerClasses="bg-200 text-900"
589
                      {...paginationTableProps}
590
                    />
591
                  </div>
592
                  <Row noGutters className="px-1 py-3 flex-center">
593
                    <Col xs="auto">
594
                      <Button
595
                        color="falcon-default"
596
                        size="sm"
597
                        onClick={handlePrevPage(paginationProps)}
598
                        disabled={paginationProps.page === 1}
599
                      >
600
                        <FontAwesomeIcon icon="chevron-left" />
601
                      </Button>
602
                      {getPaginationArray(paginationProps.totalSize, paginationProps.sizePerPage).map(pageNo => (
603
                        <Button
604
                          color={paginationProps.page === pageNo ? 'falcon-primary' : 'falcon-default'}
605
                          size="sm"
606
                          className="ml-2"
607
                          onClick={() => paginationProps.onPageChange(pageNo)}
608
                          key={pageNo}
609
                        >
610
                          {pageNo}
611
                        </Button>
612
                      ))}
613
                      <Button
614
                        color="falcon-default"
615
                        size="sm"
616
                        className="ml-2"
617
                        onClick={handleNextPage(paginationProps)}
618
                        disabled={lastIndex >= paginationProps.totalSize}
619
                      >
620
                        <FontAwesomeIcon icon="chevron-right" />
621
                      </Button>
622
                    </Col>
623
                  </Row>
624
                </Fragment>
625
              );
626
            }}
627
          </PaginationProvider>
628
        </CardBody>
629
      </Card>
630
631
    </Fragment>
632
  );
633
};
634
635
export default withTranslation()(withRedirect(Notification));
636