Implement unsubscribe trigger and adjust style of all pingers page

src/pages/Pingers/Pingers.tsx

@@ -1,17 +1,36 @@
-import { useQuery } from "@apollo/client";
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { loader } from "graphql.macro";
+import React from "react";
 /// <reference types="googlemaps" />
 import { GoogleMap, useLoadScript } from "@react-google-maps/api";
 /**
  * TODO: should we move conversion to some common place?
  * seems odd to pull from component
  */
-import convert from "../../components/RegionSelector/conversion";
 import RegionSelector from "../../components/RegionSelector";
 import { TRANSLATION_MAP } from "../../components/Form/Form";
 import { useParams } from "react-router-dom";
+import {
+ Button,
+ ButtonGroup,
+ Grid,
+ GridColumn,
+ Icon,
+ Label,
+ List,
+ ListItem,
+ Segment,
+} from "semantic-ui-react";
 
 const GET_PINGERS = loader("../../graphql/get-pingers.graphql");
+const UNSUBSCRIBE_PINGER = gql(`
+ mutation UnsubscribePinger($id: String!, $unsubscribe_key: String!, $all: Boolean!) {
+ unsubscribePinger(
+ id: $id,
+ unsubscribe_key: $unsubscribe_key,
+ all: $all,
+ )
+ }`);
 
 type Pinger = {
  id: string;
@@ -61,24 +80,78 @@ export default function Pingers() {
  return (
  <>
  <h1>Reģistrētie Pingeri:</h1>
- <ul>
+ <List>
  {data.pingers.results.map((pinger) => {
  return (
- <li key={pinger.id}>
- <h2>{pinger.email}</h2>
- <RegionSelector
- value={pinger.region || ""}
- onChange={(region) => console.log(region)}
- />
- <p>
- {TRANSLATION_MAP.category[pinger.category]} |{" "}
- {TRANSLATION_MAP.type[pinger.type]} |{" "}
- {TRANSLATION_MAP.frequency[pinger.frequency]}
- </p>
- </li>
+ <ListItem key={pinger.id}>
+ <Segment>
+ <h2>{pinger.email}</h2>
+ <RegionSelector
+ value={pinger.region || ""}
+ onChange={(region) => console.log(region)}
+ />
+ <Grid>
+ <GridColumn floated={"left"} width={8}>
+ <Details pinger={pinger} />
+ </GridColumn>
+ <GridColumn floated={"right"} width={7}>
+ <Controls pinger={pinger} />
+ </GridColumn>
+ </Grid>
+ </Segment>
+ </ListItem>
  );
  })}
- </ul>
+ </List>
  </>
  );
 }
+
+const Details: React.FC<{ pinger: Pinger }> = ({ pinger }) => {
+ return (
+ <div>
+ <Label color={"blue"}>
+ <Icon name={"info circle"} />
+ {TRANSLATION_MAP.category[pinger.category]}
+ </Label>
+ <Label color={"blue"}>
+ <Icon name={"handshake outline"} />
+ {TRANSLATION_MAP.type[pinger.type]}
+ </Label>
+ <Label color={"blue"}>
+ <Icon name={"calendar outline"} />
+ {TRANSLATION_MAP.frequency[pinger.frequency]}
+ </Label>
+ </div>
+ );
+};
+
+const Controls: React.FC<{ pinger: Pinger }> = ({ pinger }) => {
+ const [unsubscribePinger, { loading: unsubscribing }] =
+ useMutation(UNSUBSCRIBE_PINGER);
+
+ return (
+ <ButtonGroup floated={"right"}>
+ <Button
+ loading={unsubscribing}
+ disabled={unsubscribing}
+ onClick={React.useCallback(() => {
+ unsubscribePinger({
+ variables: {
+ id: pinger.id,
+ unsubscribe_key: pinger.unsubscribe_key,
+ all: false,
+ },
+ });
+ }, [pinger])}
+ >
+ <Icon name={"calendar minus outline"} />
+ Atrakstīties
+ </Button>
+ <Button>
+ <Icon name={"edit"} />
+ Labot
+ </Button>
+ </ButtonGroup>
+ );
+};