From 6859a81131d9280ca5d42cd94a87ca9e39471791 Mon Sep 17 00:00:00 2001 From: wwills2 Date: Tue, 20 Feb 2024 19:30:54 -0500 Subject: [PATCH] feat: subscriptions table body feat: edit store label block and modal feat: edit store label modal --- package.json | 16 ++-- .../blocks/layout/SelectedStoreIdCard.tsx | 40 --------- .../blocks/layout/SetStoreLabel.tsx | 53 +++++++++++ .../components/blocks/layout/StoreId.tsx | 65 ++++++++++++++ .../components/blocks/layout/index.tsx | 5 +- .../SetStoreLabelModal/SetStoreLabelModal.tsx | 35 ++++++++ .../modals/SetStoreLabelModal/index.tsx | 1 + .../blocks/tables/OwnedStoresTable.tsx | 11 ++- .../blocks/tables/SubscriptionsTable.tsx | 90 +++++++++++++++---- src/renderer/pages/EditStore/EditStore.tsx | 6 +- .../pages/Subscriptions/Subscriptions.tsx | 38 +++++++- src/renderer/pages/ViewStore/ViewStore.tsx | 4 +- src/renderer/translations/tokens/en-US.json | 4 +- 13 files changed, 288 insertions(+), 80 deletions(-) delete mode 100644 src/renderer/components/blocks/layout/SelectedStoreIdCard.tsx create mode 100644 src/renderer/components/blocks/layout/SetStoreLabel.tsx create mode 100644 src/renderer/components/blocks/layout/StoreId.tsx create mode 100644 src/renderer/components/blocks/modals/SetStoreLabelModal/SetStoreLabelModal.tsx create mode 100644 src/renderer/components/blocks/modals/SetStoreLabelModal/index.tsx diff --git a/package.json b/package.json index 35c5096..6b90920 100644 --- a/package.json +++ b/package.json @@ -23,12 +23,12 @@ "electron:package:linux": "npm run clean && npm run build && electron-builder -l -c.extraMetadata.main=build/main.js" }, "dependencies": { - "@reduxjs/toolkit": "^2.1.0", + "@reduxjs/toolkit": "^2.2.1", "@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/forms": "^0.5.7", "@types/styled-components": "^5.1.34", "chia-dat-seeder": "^1.0.1", - "chia-datalayer": "^2.0.13", + "chia-datalayer": "^2.0.14", "chia-datalayer-fs-deploy": "^1.0.15", "chia-root-resolver": "^1.0.0", "chia-wallet": "^1.0.18", @@ -36,7 +36,7 @@ "components": "^0.1.0", "express": "^4.18.2", "fast-folder-size": "^2.2.0", - "flowbite": "^2.2.1", + "flowbite": "^2.3.0", "flowbite-react": "^0.7.2", "flowbite-typography": "^1.0.3", "lodash": "^4.17.21", @@ -44,7 +44,7 @@ "react-dom": "^18.2.0", "react-intl": "^6.6.2", "react-redux": "^9.1.0", - "react-router-dom": "^6.22.0", + "react-router-dom": "^6.22.1", "react-webview": "^0.1.0", "redux-persist": "^6.0.0", "styled-components": "^6.1.8", @@ -52,7 +52,7 @@ "xterm": "^5.3.0" }, "devDependencies": { - "@types/react": "^18.2.55", + "@types/react": "^18.2.57", "@types/react-dom": "^18.2.19", "@types/react-router-dom": "^5.3.3", "@typescript-eslint/eslint-plugin": "^6.21.0", @@ -61,15 +61,15 @@ "autoprefixer": "^10.4.17", "concurrently": "^8.2.2", "cross-env": "^7.0.3", - "electron": "^28.2.2", - "electron-builder": "^24.9.1", + "electron": "^28.2.3", + "electron-builder": "^24.12.0", "eslint": "^8.56.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", "postcss": "^8.4.35", "tailwindcss": "^3.4.1", "typescript": "^5.3.3", - "vite": "^5.1.0", + "vite": "^5.1.3", "wait-on": "^7.2.0" }, "build": { diff --git a/src/renderer/components/blocks/layout/SelectedStoreIdCard.tsx b/src/renderer/components/blocks/layout/SelectedStoreIdCard.tsx deleted file mode 100644 index f1ee600..0000000 --- a/src/renderer/components/blocks/layout/SelectedStoreIdCard.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import { useMemo } from 'react'; -import { Card, Label, TextInput } from 'flowbite-react'; -import { FormattedMessage } from 'react-intl'; -import { useSelector, useDispatch } from 'react-redux'; -import { setStoreLabel } from '@/store/slices/userOptions'; - -interface SelectedStoreIdCardProps { - storeId: string; -} - -const SelectedStoreIdCard: React.FC = ({ - storeId, -}: SelectedStoreIdCardProps) => { - const dispatch = useDispatch(); - const userOptionsStore = useSelector((state: any) => state.userOptions); - - const label = useMemo(() => { - return userOptionsStore.storeLabels?.[storeId]; - }, [storeId, userOptionsStore.storeLabels]); - - const handleStoreLabelChange = (event) => { - dispatch(setStoreLabel({ storeId, label: event.target.value })); - }; - - return ( - -
- : - {storeId} -
- - - - ); -}; - -export { SelectedStoreIdCard }; diff --git a/src/renderer/components/blocks/layout/SetStoreLabel.tsx b/src/renderer/components/blocks/layout/SetStoreLabel.tsx new file mode 100644 index 0000000..e5da8a0 --- /dev/null +++ b/src/renderer/components/blocks/layout/SetStoreLabel.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { useMemo } from 'react'; +import { Label, TextInput } from 'flowbite-react'; +import { FormattedMessage } from 'react-intl'; +import { useSelector, useDispatch } from 'react-redux'; +import { setStoreLabel } from '@/store/slices/userOptions'; + +interface SelectedStoreIdCardProps { + storeId: string; +} + +const SetStoreLabel: React.FC = ({ + storeId, +}: SelectedStoreIdCardProps) => { + const dispatch = useDispatch(); + const userOptionsStore = useSelector((state: any) => state.userOptions); + + const label = useMemo(() => { + return userOptionsStore.storeLabels?.[storeId]; + }, [storeId, userOptionsStore.storeLabels]); + + const handleStoreLabelChange = (event) => { + dispatch(setStoreLabel({ storeId, label: event.target.value })); + }; + + return ( +
+
+

+ : {storeId} +

+
+
+
+ +
+
+ +
+
+
+ ); +}; + +export {SetStoreLabel}; diff --git a/src/renderer/components/blocks/layout/StoreId.tsx b/src/renderer/components/blocks/layout/StoreId.tsx new file mode 100644 index 0000000..125b025 --- /dev/null +++ b/src/renderer/components/blocks/layout/StoreId.tsx @@ -0,0 +1,65 @@ +import React, {useMemo} from "react"; +import {Button, Tooltip} from "flowbite-react"; +import {FormattedMessage} from "react-intl"; +import {useSelector} from "react-redux"; + +interface StoreIdProps { + storeId: string; + setStoreIdToEdit?: (storeId: string) => void; +} + +const StoreId: React.FC = ({storeId, setStoreIdToEdit}) => { + + const userOptions = useSelector((state: any) => state.userOptions); + + const storeLabel = useMemo(() => { + return userOptions.storeLabels?.[storeId]; + }, [storeId, userOptions.storeLabels]); + + const IDWithEditTooltip: React.FC = () => { + return ( + + { + setStoreIdToEdit && + <> + + + } +
+

+ {storeLabel &&

{storeId}
} +

+
+ + } + > + {storeLabel || storeId} + + ); + } + + return ( + <> + { + (setStoreIdToEdit || storeLabel) + ? + :
{storeId}
+ } + + ); +} + +export {StoreId} diff --git a/src/renderer/components/blocks/layout/index.tsx b/src/renderer/components/blocks/layout/index.tsx index 6593727..9788919 100644 --- a/src/renderer/components/blocks/layout/index.tsx +++ b/src/renderer/components/blocks/layout/index.tsx @@ -1,5 +1,6 @@ export * from './LeftNav'; export * from './Template'; export * from './WebView'; -export * from './SelectedStoreIdCard'; -export * from './XTerm'; \ No newline at end of file +export * from './SetStoreLabel'; +export * from './XTerm'; +export * from './StoreId' \ No newline at end of file diff --git a/src/renderer/components/blocks/modals/SetStoreLabelModal/SetStoreLabelModal.tsx b/src/renderer/components/blocks/modals/SetStoreLabelModal/SetStoreLabelModal.tsx new file mode 100644 index 0000000..a298ce5 --- /dev/null +++ b/src/renderer/components/blocks/modals/SetStoreLabelModal/SetStoreLabelModal.tsx @@ -0,0 +1,35 @@ +import {Modal} from "flowbite-react"; +import React, {useEffect, useState} from "react"; +import {FormattedMessage} from "react-intl"; +import {SetStoreLabel} from "@/components"; + +interface SetStoreLabelModalProps { + storeId: string; + setStoreId: (storeId: string) => void; +} + +const SetStoreLabelModal: React.FC = ({storeId, setStoreId }) => { + + const [showModal, setOpenModal] = useState(false); + + useEffect(() => { + if (storeId) { + setOpenModal(true); + }else{ + setOpenModal(false); + } + }, [storeId]); + + return ( + setStoreId('')} size="3xl"> + + + + + + + + ); +} + +export {SetStoreLabelModal} diff --git a/src/renderer/components/blocks/modals/SetStoreLabelModal/index.tsx b/src/renderer/components/blocks/modals/SetStoreLabelModal/index.tsx new file mode 100644 index 0000000..daa1999 --- /dev/null +++ b/src/renderer/components/blocks/modals/SetStoreLabelModal/index.tsx @@ -0,0 +1 @@ +export * from './SetStoreLabelModal'; \ No newline at end of file diff --git a/src/renderer/components/blocks/tables/OwnedStoresTable.tsx b/src/renderer/components/blocks/tables/OwnedStoresTable.tsx index b79852a..0dc159c 100644 --- a/src/renderer/components/blocks/tables/OwnedStoresTable.tsx +++ b/src/renderer/components/blocks/tables/OwnedStoresTable.tsx @@ -1,7 +1,7 @@ -import React, { useEffect, useState } from 'react'; +import React, {useEffect, useState} from 'react'; import { Button, Card, Table, TableBody } from 'flowbite-react'; import { FormattedMessage } from 'react-intl'; -import { useGetOwnedStoresQuery } from '@/api/ipc/datalayer'; +import {useGetOwnedStoresQuery} from '@/api/ipc/datalayer'; import { LoadingSpinnerCard, Spacer } from '@/components'; import { useSelector } from 'react-redux'; import {Link} from "react-router-dom"; @@ -15,7 +15,12 @@ const OwnedStoresTable: React.FC = ( {setTableContentsLoaded}: OwnedStoreSelectionTableProps ) => { const userOptions = useSelector((state: any) => state.userOptions); - const { data, isLoading, error, refetch } = useGetOwnedStoresQuery({}); + const { + data, + isLoading, + error, + refetch, + } = useGetOwnedStoresQuery({}); const [numStores, setNumStores] = useState(0); diff --git a/src/renderer/components/blocks/tables/SubscriptionsTable.tsx b/src/renderer/components/blocks/tables/SubscriptionsTable.tsx index 2b5975e..d3775bb 100644 --- a/src/renderer/components/blocks/tables/SubscriptionsTable.tsx +++ b/src/renderer/components/blocks/tables/SubscriptionsTable.tsx @@ -1,41 +1,93 @@ -import React, {useEffect, useMemo} from "react"; -import {DataTable, LoadingSpinnerCard} from "@/components"; +import React, {useEffect, useMemo, useState} from "react"; +import {DataTable, LoadingSpinnerCard, StoreId} from "@/components"; import {useGetSubscriptionsQuery} from "@/api/ipc/datalayer"; import {FormattedMessage} from "react-intl"; +import ROUTES from "@/routes/route-constants"; +import {Link} from "react-router-dom"; +import {Button} from 'flowbite-react'; +import {SetStoreLabelModal} from "@/components/blocks/modals/SetStoreLabelModal"; +import {useSelector} from "react-redux"; -interface SubscriptionsTableProps {} +interface SubscriptionsTableProps { + setTableContentsLoaded?: (loaded: boolean) => void; +} -const SubscriptionsTable: React.FC = ({}) => { +const SubscriptionsTable: React.FC = ({setTableContentsLoaded}) => { const storeId: string = "storeId"; - const {data: subscriptionsData, isLoading: subscriptionsLoading, error: getSubscriptionsError} - = useGetSubscriptionsQuery({}); + const view: string = "view"; + const { + data: subscriptionsData, + isLoading: subscriptionQueryLoading, + error: getSubscriptionsError, + refetch: refetchSubscriptions + } = useGetSubscriptionsQuery({}); + const [storeIdToEdit, setStoreIdToEdit] = useState(''); + const userOptions = useSelector((state: any) => state.userOptions); + + useEffect(() => { + if (setTableContentsLoaded && subscriptionsData?.success && !subscriptionQueryLoading && !getSubscriptionsError){ + setTableContentsLoaded(true); + }else if (setTableContentsLoaded){ + setTableContentsLoaded(false); + } + }, [subscriptionsData, subscriptionQueryLoading, getSubscriptionsError, setTableContentsLoaded]); + + const ReloadButton: React.FC = () => { + return ( + + ); + } const columns = useMemo(() => [ { title: , key: storeId, + render: (row: any) => { + return ( + + ); + } + }, + { + title: '', + key: view, + render: (row: any) => { + return ( + + + + ); + } } - ], []); - - useEffect(() => { - if (!subscriptionsLoading){ - console.log('subscriptionsData:', subscriptionsData); - } - }, [subscriptionsData, subscriptionsLoading]); + ], [userOptions.storeLabels, setStoreIdToEdit]); - const data = [{storeId: "foo"}, {storeId: "bar"}]; + const tableData: {storeId: string}[] = subscriptionsData?.store_ids?.map(storeId => ({storeId})); return ( <> - {subscriptionsLoading - ? + {subscriptionQueryLoading + ? : // not loading, handle error or display data - (getSubscriptionsError || !subscriptionsData.success - ?
getSubscriptionsError
- : + (getSubscriptionsError || !subscriptionsData?.success + ? + : ) } + ); } diff --git a/src/renderer/pages/EditStore/EditStore.tsx b/src/renderer/pages/EditStore/EditStore.tsx index 1548cab..193adf1 100644 --- a/src/renderer/pages/EditStore/EditStore.tsx +++ b/src/renderer/pages/EditStore/EditStore.tsx @@ -7,7 +7,7 @@ import { } from 'flowbite-react'; import { FormattedMessage } from 'react-intl'; import { - SelectedStoreIdCard, + SetStoreLabel, Spacer, XTerm, FolderSelector @@ -93,7 +93,9 @@ const EditStore: React.FC = () => { return ( <> - + + + diff --git a/src/renderer/pages/Subscriptions/Subscriptions.tsx b/src/renderer/pages/Subscriptions/Subscriptions.tsx index fc3ac9a..6cbfb61 100644 --- a/src/renderer/pages/Subscriptions/Subscriptions.tsx +++ b/src/renderer/pages/Subscriptions/Subscriptions.tsx @@ -1,10 +1,44 @@ -import {SubscriptionsTable} from "@/components"; +import {Spacer, SubscriptionsTable} from "@/components"; +import {useCallback, useState} from "react"; +import {Button, TextInput, Tooltip} from "flowbite-react"; +import {FormattedMessage} from "react-intl"; const Subscriptions: React.FC = () => { + const [subscriptionsLoaded, setSubscriptionsLoaded] = useState(false); + + const handleAddSubscription = useCallback(() => { + + }, []) + return ( <> - + {subscriptionsLoaded && +
+
+ }> +

+ +

+ +
+
+ +
+ +
+ } + + ); } diff --git a/src/renderer/pages/ViewStore/ViewStore.tsx b/src/renderer/pages/ViewStore/ViewStore.tsx index 4982981..522cc9a 100644 --- a/src/renderer/pages/ViewStore/ViewStore.tsx +++ b/src/renderer/pages/ViewStore/ViewStore.tsx @@ -1,5 +1,5 @@ import React, {useCallback, useEffect, useState} from "react"; -import {DatalayerStoreKeysTable, InvalidStoreIdErrorModal, SelectedStoreIdCard, Spacer} from "@/components"; +import {DatalayerStoreKeysTable, InvalidStoreIdErrorModal, SetStoreLabel, Spacer} from "@/components"; import {visitPage} from "@/store/slices/browser"; import {useGetOwnedStoresQuery} from "@/api/ipc/datalayer"; import {useDispatch, useSelector} from "react-redux"; @@ -44,7 +44,7 @@ const ViewStore: React.FC = () => { return ( <> - +