use syncAccountButton

packages/app/constants/settings/sync/components/spotifySync/index.jsx

@@ -1,62 +0,0 @@
-import React from "react"
-
-import { Button, Spin, Avatar, Modal } from "antd"
-import { Icons } from "components/Icons"
-
-import SyncModel from "models/sync"
-
-import "./index.less"
-
-export default (props) => {
-    const onLogout = async () => {
-        Modal.confirm({
-            title: "Are you sure you want to logout?",
-            content: "You will be logged out of your Spotify account",
-            okText: "Logout",
-            okType: "danger",
-            cancelText: "Cancel",
-            onOk: async () => {
-                await SyncModel.spotifyCore.unlinkAccount()
-                    .then(() => {
-                        app.message.success("Successfully logged out of Spotify")
-                    })
-                    .catch((err) => {
-                        console.error(err)
-                        app.message.error("Failed to logout of Spotify")
-                    })
-            }
-        })
-    }
-
-    if (props.ctx.spotifyAccount) {
-        return <div className="spotifyAccount">
-            <div className="spotifyAccount_info">
-                <img
-                    src={props.ctx.spotifyAccount.images[0].url}
-                    alt="Spotify account avatar"
-                />
-                <p>
-                    {
-                        props.ctx.spotifyAccount.display_name
-                    }
-                </p>
-            </div>
-
-            <div className="spotifyAccount_actions">
-                <Button
-                    onClick={onLogout}
-                    icon={<Icons.LogoutOutlined />}
-                >
-                    Logout
-                </Button>
-            </div>
-        </div>
-    }
-
-    return <Button
-        type="primary"
-        onClick={SyncModel.spotifyCore.authorizeAccount}
-    >
-        Sync account
-    </Button>
-}

packages/app/constants/settings/sync/components/syncAccountButton/index.jsx

@@ -0,0 +1,94 @@
+import React from "react"
+
+import { Button, Modal, Skeleton } from "antd"
+import { Icons, createIconRender } from "components/Icons"
+
+import SyncModel from "models/sync"
+
+import "./index.less"
+
+export default (props) => {
+    const { namespace } = props
+
+    const onUnlink = async () => {
+        Modal.confirm({
+            title: "Are you sure you want to unlink?",
+            content: "The linked service will be unlinked from your account and you loose access to their features",
+            okText: "Logout",
+            okType: "danger",
+            cancelText: "Cancel",
+            onOk: async () => {
+                await SyncModel.unlinkService(namespace)
+                    .then(() => {
+                        app.message.success("Successfully unlinked account")
+                    })
+                    .catch((err) => {
+                        console.error(err)
+                        app.message.error("Failed to unlink")
+                    })
+            }
+        })
+    }
+
+    const onLink = async () => {
+        const response = await SyncModel.linkService(namespace).catch((err) => {
+            console.error(err)
+            app.message.error(err.message)
+
+            return null
+        })
+
+        if (!response) {
+            return null
+        }
+
+        app.message.info("Successfully linked account")
+    }
+
+    if (!namespace) {
+        return null
+    }
+
+    if (!props.ctx.processedCtx.publicData) {
+        return null
+    }
+
+    if (props.ctx.processedCtx.publicData[namespace]) {
+        return <div className="syncButton">
+            <div className="syncButton_info">
+                {
+                    props.ctx.processedCtx.publicData[namespace].avatar
+                        ? <img
+                            src={props.ctx.processedCtx.publicData[namespace].avatar}
+                            alt="Account avatar"
+                        />
+                        :
+
+                        createIconRender(props.icon)
+                }
+
+                <p>
+                    {
+                        props.ctx.processedCtx.publicData[namespace].username
+                    }
+                </p>
+            </div>
+
+            <div className="syncButton_actions">
+                <Button
+                    onClick={onUnlink}
+                    icon={<Icons.LogoutOutlined />}
+                >
+                    Unlink
+                </Button>
+            </div>
+        </div>
+    }
+
+    return <Button
+        type="primary"
+        onClick={onLink}
+    >
+        Sync account
+    </Button>
+}

packages/app/constants/settings/sync/components/syncAccountButton/index.less

@@ -1,4 +1,4 @@
-.spotifyAccount {
+.syncButton {
     display: flex;
     flex-direction: row;
 
@@ -11,7 +11,7 @@
 
     border-radius: 12px;
 
-    .spotifyAccount_info {
+    .syncButton_info {
         display: flex;
         flex-direction: row;
 
@@ -29,14 +29,14 @@
         }
 
         p {
-            font-size: 16px;
+            font-size: 0.8rem;
             font-weight: 500;
             line-height: 1.5;
             margin: 0;
         }
     }
 
-    .spotifyAccount_actions {
+    .syncButton_actions {
         display: flex;
 
         align-items: center;

packages/app/constants/settings/sync/index.jsx

@@ -15,8 +15,15 @@ export default {
             return null
         })
 
+        const tidalData = await SyncModel.tidalCore.getCurrentUser().catch((err) => {
+            return null
+        })
+
         return {
-            spotifyAccount
+            publicData: {
+                spotify: spotifyAccount,
+                tidal: tidalData,
+            }
         }
     },
     settings: [
@@ -26,71 +33,34 @@ export default {
             title: "Sync Settings",
             description: "Sync your settings across all devices stored in the cloud",
             group: "sync.settings",
-            component: "Switch"
+            component: "Switch",
+            disabled: true,
+            storaged: false,
         },
         {
             id: "spotify",
             icon: "SiSpotify",
             title: "Spotify",
-            description: "Sync your Spotify account to get access to Spaces, playlists and more",
+            description: "Sync your Spotify account to get access to your playlists and other features",
             group: "sync.accounts",
-            component: loadable(() => import("./components/spotifySync")),
+            component: loadable(() => import("./components/syncAccountButton")),
+            props: {
+                icon: "SiSpotify",
+                namespace: "spotify"
+            },
             storaged: false
         },
         {
-            id: "soundcloud",
+            id: "tidal",
-            icon: "SiSoundcloud",
+            icon: "SiTidal",
-            title: "SoundCloud",
+            title: "Tidal",
+            description: "Sync your Tidal account to get access to your audio playback and playlists sync",
             group: "sync.accounts",
-            component: () => <p>Not implemented</p>,
+            component: loadable(() => import("./components/syncAccountButton")),
-            storaged: false
+            props: {
+                icon: "SiTidal",
+                namespace: "tidal"
             },
-        {
-            id: "youtube",
-            icon: "SiYoutube",
-            title: "YouTube",
-            group: "sync.accounts",
-            component: () => <p>Not implemented</p>,
-            storaged: false
-        },
-        {
-            id: "twitch",
-            icon: "SiTwitch",
-            title: "Twitch",
-            group: "sync.accounts",
-            component: () => <p>Not implemented</p>,
-            storaged: false
-        },
-        {
-            id: "twitter",
-            icon: "SiTwitter",
-            title: "Twitter",
-            group: "sync.accounts",
-            component: () => <p>Not implemented</p>,
-            storaged: false
-        },
-        {
-            id: "instagram",
-            icon: "SiInstagram",
-            title: "Instagram",
-            group: "sync.accounts",
-            component: () => <p>Not implemented</p>,
-            storaged: false
-        },
-        {
-            id: "mixcloud",
-            icon: "SiMixcloud",
-            title: "Mixcloud",
-            group: "sync.accounts",
-            component: () => <p>Not implemented</p>,
-            storaged: false
-        },
-        {
-            id: "discord",
-            icon: "SiDiscord",
-            title: "Discord",
-            group: "sync.accounts",
-            component: () => <p>Not implemented</p>,
             storaged: false
         }
     ]