|
1 | 1 | import React from 'react';
|
2 |
| - |
3 |
| -import { gql } from '@apollo/client'; |
4 | 2 | import { Tooltip, Row, useToasts, Spacer } from '@geist-ui/react';
|
5 |
| -import { Settings, Award, RefreshCcw, Edit, Trash2 } from '@geist-ui/react-icons'; |
| 3 | +import { Award, RefreshCcw, Edit, Trash2, Slash, Settings } from '@geist-ui/react-icons'; |
| 4 | +import { gql } from '@apollo/client'; |
6 | 5 |
|
| 6 | +import { useWhitelistCommonMutation, useDelistCommonMutation } from '@core/graphql'; |
| 7 | +import { Hoverable } from '@components/Hoverable'; |
7 | 8 | import { Centered } from '@components/Centered';
|
8 |
| -import { useWhitelistCommonMutation } from '@graphql'; |
9 | 9 |
|
10 | 10 | interface ICommonSettingsProps {
|
11 | 11 | commonId: string;
|
| 12 | + whitelisted: boolean; |
| 13 | + refetch: () => any; |
12 | 14 | }
|
13 | 15 |
|
14 | 16 | const WhitelistCommonMutation = gql`
|
15 |
| - mutation whitelistCommon($commonId: ID!) { |
| 17 | + mutation whitelistCommon($commonId: String!) { |
16 | 18 | whitelistCommon(commonId: $commonId)
|
17 | 19 | }
|
18 | 20 | `;
|
19 | 21 |
|
20 |
| -export const CommonSettings: React.FC<ICommonSettingsProps> = ({ commonId }) => { |
| 22 | +const DelistCommonMutation = gql` |
| 23 | + mutation delistCommon($commonId: String!) { |
| 24 | + delistCommon(commonId: $commonId) |
| 25 | + } |
| 26 | +`; |
| 27 | + |
| 28 | +export const CommonSettings: React.FC<ICommonSettingsProps> = ({ commonId, whitelisted, refetch }) => { |
21 | 29 | const [, setToast] = useToasts();
|
22 | 30 |
|
23 | 31 | // - Networking
|
24 |
| - const [whitelistCommon, { data }] = useWhitelistCommonMutation(); |
| 32 | + const [whitelistCommon, { data: whitelistResult }] = useWhitelistCommonMutation(); |
| 33 | + const [delistCommon, { data: delistResult }] = useDelistCommonMutation(); |
25 | 34 |
|
26 | 35 | // - Actions
|
27 |
| - const onCommonWhitelisted = async () => { |
| 36 | + const onWhitelistCommon = async () => { |
28 | 37 | await whitelistCommon({
|
29 | 38 | variables: {
|
30 | 39 | commonId
|
31 | 40 | }
|
32 | 41 | });
|
| 42 | + |
| 43 | + if (typeof refetch === 'function') { |
| 44 | + refetch(); |
| 45 | + } |
| 46 | + }; |
| 47 | + |
| 48 | + const onCommonDelist = async () => { |
| 49 | + await delistCommon({ |
| 50 | + variables: { |
| 51 | + commonId |
| 52 | + } |
| 53 | + }); |
| 54 | + |
| 55 | + if (typeof refetch === 'function') { |
| 56 | + refetch(); |
| 57 | + } |
33 | 58 | };
|
34 | 59 |
|
35 | 60 | // - Effects
|
36 | 61 | React.useEffect(() => {
|
37 |
| - if (data?.whitelistCommon) { |
| 62 | + if (whitelistResult?.whitelistCommon) { |
38 | 63 | setToast({
|
39 | 64 | text: 'Common whitelisted!'
|
40 | 65 | });
|
41 | 66 | }
|
42 |
| - }, [data]); |
| 67 | + }, [whitelistResult]); |
| 68 | + |
| 69 | + React.useEffect(() => { |
| 70 | + if (delistResult?.delistCommon) { |
| 71 | + setToast({ |
| 72 | + text: 'Common delisted!' |
| 73 | + }); |
| 74 | + } |
| 75 | + }, [delistResult]); |
43 | 76 |
|
44 | 77 | return (
|
45 | 78 | <Tooltip
|
46 | 79 | placement="bottomEnd"
|
47 | 80 | trigger="click"
|
48 | 81 | text={(
|
49 |
| - <div style={{ width: '250px', margin: '.7rem 0' }}> |
50 |
| - <Row style={{ cursor: 'pointer' }} onClick={onCommonWhitelisted}> |
51 |
| - <Award/> |
52 |
| - <Spacer x={.5} /> |
53 |
| - Whitelist Common |
54 |
| - </Row> |
55 |
| - |
56 |
| - <Spacer y={.7} /> |
57 |
| - |
58 |
| - <Row style={{ cursor: 'pointer' }}> |
59 |
| - <RefreshCcw/> |
60 |
| - <Spacer x={.5} /> |
61 |
| - Refresh Common Members |
62 |
| - </Row> |
63 |
| - |
64 |
| - <Spacer y={.7} /> |
65 |
| - |
66 |
| - <Row style={{ cursor: 'pointer' }}> |
67 |
| - <Edit/> |
68 |
| - <Spacer x={.5} /> |
69 |
| - Edit Common Details |
70 |
| - </Row> |
71 |
| - |
72 |
| - <Spacer y={.7} /> |
73 |
| - |
74 |
| - <Row style={{ cursor: 'pointer', color: 'red' }}> |
75 |
| - <Trash2 /> |
76 |
| - <Spacer x={.5} /> |
77 |
| - Delete Common |
78 |
| - </Row> |
| 82 | + <div style={{ width: '270px', margin: '.3em -0.7em' }}> |
| 83 | + <React.Fragment> |
| 84 | + <Hoverable> |
| 85 | + {whitelisted |
| 86 | + ? ( |
| 87 | + <Row style={{ cursor: 'pointer' }} onClick={onCommonDelist}> |
| 88 | + <Slash/> |
| 89 | + <Spacer x={.5}/> |
| 90 | + Delist Common |
| 91 | + </Row> |
| 92 | + ) : ( |
| 93 | + <Row style={{ cursor: 'pointer' }} onClick={onWhitelistCommon}> |
| 94 | + <Award/> |
| 95 | + <Spacer x={.5}/> |
| 96 | + Whitelist Common |
| 97 | + </Row> |
| 98 | + )} |
| 99 | + </Hoverable> |
| 100 | + |
| 101 | + <Spacer y={.5}/> |
| 102 | + </React.Fragment> |
| 103 | + |
| 104 | + <Hoverable> |
| 105 | + <Row style={{ cursor: 'pointer' }}> |
| 106 | + <RefreshCcw/> |
| 107 | + <Spacer x={.5}/> |
| 108 | + Refresh Common Members |
| 109 | + </Row> |
| 110 | + </Hoverable> |
| 111 | + |
| 112 | + <Spacer y={.5}/> |
| 113 | + |
| 114 | + <Hoverable> |
| 115 | + <Row style={{ cursor: 'pointer' }}> |
| 116 | + <Edit/> |
| 117 | + <Spacer x={.5}/> |
| 118 | + Edit Common Details |
| 119 | + </Row> |
| 120 | + </Hoverable> |
| 121 | + |
| 122 | + <Spacer y={.5}/> |
| 123 | + |
| 124 | + <Hoverable> |
| 125 | + <Row style={{ cursor: 'pointer', color: 'red' }}> |
| 126 | + <Trash2/> |
| 127 | + <Spacer x={.5}/> |
| 128 | + Delete Common |
| 129 | + </Row> |
| 130 | + </Hoverable> |
79 | 131 | </div>
|
80 | 132 | )}
|
81 | 133 | >
|
|
0 commit comments