color selector

frontend/src/components/ColorSelector.js

@@ -0,0 +1,106 @@
+import { React, useEffect, useState } from "react";
+import {
+  chakra,
+  Box,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverHeader,
+  PopoverBody,
+  PopoverFooter,
+  PopoverArrow,
+  PopoverCloseButton,
+  Portal,
+  Stack,
+  IconButton,
+  Text,
+  Input,
+  useDisclosure,
+  Button,
+} from "@chakra-ui/react";
+import { makeColor } from "../core/utils/makeColor";
+import { BiRefresh } from "react-icons/bi";
+import { GithubPicker } from "react-color";
+
+const _ColorSelector = (props) => {
+  const { onOpen, onClose, isOpen } = useDisclosure();
+  const [color, setColor] = useState(props.initialColor ?? makeColor());
+  const [triggerColor, setTriggerColor] = useState(color);
+
+  useEffect(() => {
+    setTriggerColor(props.initialColor);
+  }, [props.initialColor]);
+
+  const handleChangeColorComplete = (color) => {
+    setColor(color.hex);
+  };
+
+  const handleChangeColor = (event) => setColor(event.target.value);
+
+  return (
+    <Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
+      <PopoverTrigger>
+        <Box
+          {...props}
+          placeSelf="center"
+          boxSize="24px"
+          borderRadius="sm"
+          bgColor={triggerColor}
+        ></Box>
+      </PopoverTrigger>
+      <Portal>
+        <PopoverContent bg={"white.100"}>
+          <PopoverArrow />
+          <PopoverHeader>Change color</PopoverHeader>
+          <PopoverCloseButton />
+          <PopoverBody>
+            <Stack direction="row" pb={2}>
+              <Text fontWeight="600" alignSelf="center">
+                Label color
+              </Text>{" "}
+              <IconButton
+                size="md"
+                // colorScheme="primary"
+                color={"white.100"}
+                _hover={{ bgColor: { color } }}
+                bgColor={color}
+                variant="outline"
+                onClick={() => setColor(makeColor())}
+                icon={<BiRefresh />}
+              />
+              <Input
+                type="input"
+                placeholder="color"
+                name="color"
+                value={color}
+                onChange={handleChangeColor}
+                w="200px"
+                onSubmit={handleChangeColorComplete}
+              ></Input>
+            </Stack>
+            <GithubPicker
+              // color={this.state.background}
+              onChangeComplete={handleChangeColorComplete}
+            />
+          </PopoverBody>
+          <PopoverFooter>
+            <Button
+              onClick={() => {
+                props.callback(color);
+                onClose();
+              }}
+              colorScheme="suggested"
+              variant="outline"
+            >
+              Apply
+            </Button>
+          </PopoverFooter>
+        </PopoverContent>
+      </Portal>
+    </Popover>
+  );
+};
+
+const ColorSelector = chakra(_ColorSelector);
+
+export default ColorSelector;

frontend/src/components/NewSubscription.js

@@ -14,13 +14,17 @@ import {
   Button,
   ModalFooter,
   Spinner,
+  IconButton,
 } from "@chakra-ui/react";
 import RadioCard from "./RadioCard";
 import { useForm } from "react-hook-form";
-
+import { GithubPicker } from "react-color";
+import { BiRefresh } from "react-icons/bi";
+import { makeColor } from "../core/utils/makeColor";
 const NewSubscription = ({ isFreeOption, onClose }) => {
+  const [color, setColor] = useState(makeColor());
   const { typesCache, createSubscription } = useSubscriptions();
-  const { handleSubmit, errors, register } = useForm();
+  const { handleSubmit, errors, register } = useForm({});
   const [radioState, setRadioState] = useState("ethereum_blockchain");
   let { getRootProps, getRadioProps } = useRadioGroup({
     name: "type",
@@ -41,10 +45,15 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
   const createSubscriptionWrap = (props) => {
     createSubscription.mutate({
       ...props,
+      color: color,
       type: isFreeOption ? "free" : radioState,
     });
   };
 
+  const handleChangeColorComplete = (color) => {
+    setColor(color.hex);
+  };
+
   return (
     <form onSubmit={handleSubmit(createSubscriptionWrap)}>
       <ModalHeader>Subscribe to a new address</ModalHeader>
@@ -83,7 +92,7 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
               : `On which source?`}
           </Text>
 
-          <FormControl isInvalid={errors.type}>
+          <FormControl isInvalid={errors.subscription_type}>
             <HStack {...group} alignItems="stretch">
               {typesCache.data.subscriptions.map((type) => {
                 const radio = getRadioProps({
@@ -100,9 +109,54 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
                 );
               })}
             </HStack>
+            <Input
+              type="hidden"
+              placeholder="subscription_type"
+              name="subscription_type"
+              ref={register({ required: "select type" })}
+              value={radioState}
+              onChange={() => null}
+            ></Input>
+            <FormErrorMessage color="unsafe.400" pl="1">
+              {errors.subscription_type_ && errors.subscription_type_.message}
+            </FormErrorMessage>
           </FormControl>
         </Stack>
-        <Input placeholder="color" name="color" ref={register()}></Input>
+        <FormControl isInvalid={errors.color}>
+          <Stack direction="row" pb={2}>
+            <Text fontWeight="600" alignSelf="center">
+              Label color
+            </Text>{" "}
+            <IconButton
+              size="md"
+              // colorScheme="primary"
+              color={"white.100"}
+              _hover={{ bgColor: { color } }}
+              bgColor={color}
+              variant="outline"
+              onClick={() => setColor(makeColor())}
+              icon={<BiRefresh />}
+            />
+            <Input
+              type="input"
+              placeholder="color"
+              name="color"
+              ref={register({ required: "color is required!" })}
+              value={color}
+              onChange={() => null}
+              w="200px"
+            ></Input>
+          </Stack>
+
+          <GithubPicker
+            // color={this.state.background}
+            onChangeComplete={handleChangeColorComplete}
+          />
+
+          <FormErrorMessage color="unsafe.400" pl="1">
+            {errors.color && errors.color.message}
+          </FormErrorMessage>
+        </FormControl>
       </ModalBody>
       <ModalFooter>
         <Button
@@ -112,7 +166,9 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
         >
           Confirm
         </Button>
-        <Button colorScheme="gray">Cancel</Button>
+        <Button colorScheme="gray" onClick={onClose}>
+          Cancel
+        </Button>
       </ModalFooter>
     </form>
   );

frontend/src/components/SubscriptionsList.js

@@ -17,13 +17,17 @@ import moment from "moment";
 import CopyButton from "./CopyButton";
 import { useSubscriptions } from "../core/hooks";
 import ConfirmationRequest from "./ConfirmationRequest";
+import ColorSelector from "./ColorSelector";
 
 const SubscriptionsList = () => {
-  const { subscriptionsCache, changeNote, deleteSubscription } =
+  const { subscriptionsCache, updateSubscription, deleteSubscription } =
     useSubscriptions();
 
-  const updateCallback = ({ id, note }) => {
+  const updateCallback = ({ id, label, color }) => {
-    changeNote.mutate({ id, note });
+    const data = { id: id };
+    label && (data.label = label);
+    color && (data.color = color);
+    updateSubscription.mutate(data);
   };
 
   if (subscriptionsCache.data) {
@@ -45,6 +49,7 @@ const SubscriptionsList = () => {
             <Th>Token</Th>
             <Th>Label</Th>
             <Th>Address</Th>
+            <Th>Color</Th>
             <Th>Date Created</Th>
             <Th>Actions</Th>
           </Tr>
@@ -99,6 +104,15 @@ const SubscriptionsList = () => {
                 <Td mr={4} p={0}>
                   <CopyButton>{subscription.address}</CopyButton>
                 </Td>
+                <Td>
+                  <ColorSelector
+                    // subscriptionId={subscription.id}
+                    initialColor={subscription.color}
+                    callback={(color) =>
+                      updateCallback({ id: subscription.id, color: color })
+                    }
+                  />
+                </Td>
                 <Td py={0}>{moment(subscription.created_at).format("L")}</Td>
 
                 <Td py={0}>

frontend/src/core/hooks/useSubscriptions.js

@@ -50,12 +50,15 @@ const useSubscriptions = () => {
     }
   );
 
-  const changeNote = useMutation(SubscriptionsService.modifySubscription(), {
+  const updateSubscription = useMutation(
+    SubscriptionsService.modifySubscription(),
+    {
       onError: (error) => toast(error, "error"),
       onSuccess: () => {
         subscriptionsCache.refetch();
       },
-  });
+    }
+  );
 
   const deleteSubscription = useMutation(
     SubscriptionsService.deleteSubscription(),
@@ -71,7 +74,7 @@ const useSubscriptions = () => {
     createSubscription,
     subscriptionsCache,
     typesCache,
-    changeNote,
+    updateSubscription,
     deleteSubscription,
   };
 };

frontend/src/core/services/subscriptions.service.js

@@ -62,9 +62,10 @@ export const createSubscription =
 
 export const modifySubscription =
   () =>
-  ({ id, note }) => {
+  ({ id, label, color }) => {
     const data = new FormData();
-    data.append("note", note);
+    color && data.append("color", color);
+    label && data.append("label", label);
     data.append("id", id);
     return http({
       method: "POST",

frontend/src/core/utils/makeColor.js

@@ -0,0 +1,9 @@
+export const makeColor = () => {
+  var result = "#";
+  var characters = "0123456789ABCDEF";
+  var charactersLength = characters.length;
+  for (var i = 0; i < 6; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+};