temp state of subscription.

frontend/pages/subscriptions.js

@@ -100,7 +100,7 @@ const Subscriptions = () => {
                 Add new
               </Button>
             </Flex>
-            <SubscriptionsList />
+            <SubscriptionsList data={subscriptionsCache.data} />
           </Flex>
         </ScaleFade>
       )}

frontend/sample.env

@@ -1,7 +0,0 @@
-export REACT_APP_SIMIOTICS_SEARCH_URL=http://localhost:5000
-export REACT_APP_MIXPANEL_TOKEN="<YOUR MIXPANEL TOKEN HERE>"
-export REACT_APP_SIMIOTICS_AUTH_URL=http://localhost:7474
-export REACT_APP_SIMIOTICS_JOURNALS_URL=http://localhost:7475
-export REACT_APP_BUGOUT_CONTACTUS_TOKEN="<Brood token for contact user>"
-export REACT_APP_BUGOUT_CONTACTUS_JOURNAL_ID="<journal ID for contact journal>"
-export REACT_APP_STRIPE_PUBLISHABLE_KEY="<stripe publishable key>"

frontend/src/components/NewSubscription.js

@@ -44,6 +44,7 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
       type: isFreeOption ? "free" : radioState,
     });
   };
+  console.log(typesCache.data);
   return (
     <form onSubmit={handleSubmit(createSubscriptionWrap)}>
       <ModalHeader>Subscribe to a new address</ModalHeader>
@@ -68,9 +69,9 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
 
           <FormControl isInvalid={errors.type}>
             <HStack {...group} alignItems="stretch">
-              {typesCache.data.map((type) => {
+              {typesCache.data.subscriptions.map((type) => {
                 const radio = getRadioProps({
-                  value: type.subscription_type,
+                  value: type.id,
                   isDisabled:
                     !type.active ||
                     (isFreeOption &&
@@ -79,8 +80,8 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
                 if (!type.subscription_plan_id) return "";
                 return (
                   <RadioCard
-                    onClick={() => console.log("hello")}
-                    key={`subscription-type-${type.id}`}
+                    onClick={() => setRadioState(type.id)}
+                    key={`subscription_type_${type.id}`}
                     {...radio}
                   >
                     {type.name}
@@ -90,9 +91,10 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
             </HStack>
           </FormControl>
         </Stack>
+        <Input placeholder="color" name="color" ref={register()}></Input>
         <Input
           placeholder="Add some notes"
-          name="note"
+          name="label"
           ref={register()}
         ></Input>
       </ModalBody>

frontend/src/components/SubscriptionsList.js

@@ -18,13 +18,14 @@ import CopyButton from "./CopyButton";
 import { useSubscriptions } from "../core/hooks";
 import ConfirmationRequest from "./ConfirmationRequest";
 
-const List = () => {
+const List = (data) => {
   const { subscriptionsCache, changeNote, deleteSubscription } =
     useSubscriptions();
 
   const updateCallback = ({ id, note }) => {
     changeNote.mutate({ id, note });
   };
+  console.log(data);
 
   if (subscriptionsCache.data) {
     return (
@@ -45,7 +46,7 @@ const List = () => {
             <Th>Token</Th>
             <Th>Address</Th>
             <Th>Date Created</Th>
-            <Th>Note</Th>
+            <Th>label</Th>
             <Th>Actions</Th>
           </Tr>
         </Thead>
@@ -85,11 +86,11 @@ const List = () => {
                   <Editable
                     colorScheme="primary"
                     placeholder="enter note here"
-                    defaultValue={subscription.note}
+                    defaultValue={subscription.label}
                     onSubmit={(nextValue) =>
                       updateCallback({
                         id: subscription.id,
-                        note: nextValue,
+                        label: nextValue,
                       })
                     }
                   >

frontend/src/core/hooks/useSubscriptions.js

@@ -27,7 +27,9 @@ const useSubscriptions = () => {
 
   const getSubscriptions = async () => {
     const response = await SubscriptionsService.getSubscriptions();
-    return response.data.data;
+    console.log("getSubscriptions");
+    console.log(response.data);
+    return response.data;
   };
 
   const subscriptionsCache = useQuery(["subscriptions"], getSubscriptions, {
@@ -39,7 +41,7 @@ const useSubscriptions = () => {
 
   const getSubscriptionTypes = async () => {
     const response = await SubscriptionsService.getTypes();
-    return response.data.data;
+    return response.data;
   };
 
   const typesCache = useQuery(["subscription_types"], getSubscriptionTypes, {
@@ -73,14 +75,23 @@ const useSubscriptions = () => {
     },
   });
 
-  const deleteSubscription = useMutation(SubscriptionsService.deleteSubscription(), {
-    onError: (error) => toast(error, "error"),
-    onSuccess: (response) => {
-      subscriptionsCache.refetch();
-    },
-  });
+  const deleteSubscription = useMutation(
+    SubscriptionsService.deleteSubscription(),
+    {
+      onError: (error) => toast(error, "error"),
+      onSuccess: (response) => {
+        subscriptionsCache.refetch();
+      },
+    }
+  );
 
-  return { createSubscription, subscriptionsCache, typesCache, changeNote, deleteSubscription };
+  return {
+    createSubscription,
+    subscriptionsCache,
+    typesCache,
+    changeNote,
+    deleteSubscription,
+  };
 };
 
 export default useSubscriptions;

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

@@ -1,18 +1,31 @@
 import { http } from "../utils";
 // import axios from "axios";
 
-const API = process.env.NEXT_PUBLIC_SIMIOTICS_AUTH_URL;
+const API = process.env.NEXT_PUBLIC_MOONSTREAM_API_URL;
+console.log(API);
+
+// export const getTypes = () =>
+//   http({
+//     method: "GET",
+//     url: `${API}/subscription_types/`,
+//   });
+
+// export const getSubscriptions = () =>
+//   http({
+//     method: "GET",
+//     url: `${API}/subscriptions/`,
+//   });
 
 export const getTypes = () =>
   http({
     method: "GET",
-    url: `${API}/subscription_types/`,
+    url: `${API}/subscriptions/types`,
   });
 
 export const getSubscriptions = () =>
   http({
     method: "GET",
-    url: `${API}/subscriptions/`,
+    url: `${API}/subscriptions`,
   });
 
 export const create = ({ address, note, blockchain }) => {
@@ -35,12 +48,13 @@ export const deleteJournal = (id) => () =>
 
 export const createSubscription =
   () =>
-  ({ address, type, note }) => {
-    console.log("createSubscription: ", address, type, note);
+  ({ address, type, label, color }) => {
+    console.log("createSubscription: ", address, type, label);
     const data = new FormData();
     data.append("address", address);
-    data.append("subscription_type", type);
-    data.append("note", note);
+    data.append("subscription_type_id", type);
+    data.append("color", color);
+    data.append("label", label);
     return http({
       method: "POST",
       url: `${API}/subscriptions/`,

frontend/src/core/utils/mockupRequests.js

@@ -90,12 +90,12 @@ const enableMockupRequests = (axiosInstance) => {
     ],
   });
 
-  mock.onGet(`${MOCK_API}/subscriptions/`).reply(200, {
-    data: {
-      is_free_subscription_availible: true,
-      subscriptions: MockSubscriptions,
-    },
-  });
+  // mock.onGet(`${MOCK_API}/subscriptions/`).reply(200, {
+  //   data: {
+  //     is_free_subscription_availible: true,
+  //     subscriptions: MockSubscriptions,
+  //   },
+  // });
 
   mock.onPost(`${MOCK_API}/subscriptions/`).reply((config) => {
     const params = config.data; // FormData of {name: ..., file: ...}