add sharing buttons

commafeed-client/src/app/constants.ts

@@ -1,6 +1,9 @@
 import { t } from "@lingui/macro"
 import { DEFAULT_THEME } from "@mantine/core"
-import { Category } from "./types"
+import { IconType } from "react-icons"
+import { FaAt } from "react-icons/fa"
+import { SiBuffer, SiFacebook, SiGmail, SiInstapaper, SiPocket, SiTumblr, SiTwitter } from "react-icons/si"
+import { Category, SharingSettings } from "./types"
 
 const categories: { [key: string]: Category } = {
     all: {
@@ -20,8 +23,68 @@ const categories: { [key: string]: Category } = {
         position: 1,
     },
 }
+
+const sharing: {
+    [key in keyof SharingSettings]: {
+        label: string
+        icon: IconType
+        color: `#${string}`
+        url: (url: string, description: string) => string
+    }
+} = {
+    email: {
+        label: "Email",
+        icon: FaAt,
+        color: "#000000",
+        url: (url, desc) => `mailto:?subject=${desc}&body=${url}`,
+    },
+    gmail: {
+        label: "Gmail",
+        icon: SiGmail,
+        color: "#EA4335",
+        url: (url, desc) => `https://mail.google.com/mail/?view=cm&fs=1&tf=1&source=mailto&su=${desc}&body=${url}`,
+    },
+    facebook: {
+        label: "Facebook",
+        icon: SiFacebook,
+        color: "#1B74E4",
+        url: url => `https://www.facebook.com/sharer/sharer.php?u=${url}`,
+    },
+    twitter: {
+        label: "Twitter",
+        icon: SiTwitter,
+        color: "#1D9BF0",
+        url: (url, desc) => `http://twitter.com/share?text=${desc}&url=${url}`,
+    },
+    tumblr: {
+        label: "Tumblr",
+        icon: SiTumblr,
+        color: "#375672",
+        url: (url, desc) => `http://www.tumblr.com/share/link?url=${url}&name=${desc}`,
+    },
+    pocket: {
+        label: "Pocket",
+        icon: SiPocket,
+        color: "#EF4154",
+        url: (url, desc) => `https://getpocket.com/save?url=${url}&title=${desc}`,
+    },
+    instapaper: {
+        label: "Instapaper",
+        icon: SiInstapaper,
+        color: "#010101",
+        url: (url, desc) => `https://www.instapaper.com/hello2?url=${url}&title=${desc}`,
+    },
+    buffer: {
+        label: "Buffer",
+        icon: SiBuffer,
+        color: "#000000",
+        url: (url, desc) => `https://bufferapp.com/add?url=${url}&text=${desc}`,
+    },
+}
+
 export const Constants = {
     categories,
+    sharing,
     layout: {
         mobileBreakpoint: DEFAULT_THEME.breakpoints.md,
         headerHeight: 60,

commafeed-client/src/app/slices/user.ts

@@ -3,7 +3,7 @@ import { showNotification } from "@mantine/notifications"
 import { createAsyncThunk, createSlice, isAnyOf } from "@reduxjs/toolkit"
 import { client } from "app/client"
 import { RootState } from "app/store"
-import { ReadingMode, ReadingOrder, Settings, UserModel } from "app/types"
+import { ReadingMode, ReadingOrder, Settings, SharingSettings, UserModel } from "app/types"
 import { reloadEntries } from "./entries"
 
 interface UserState {
@@ -43,6 +43,20 @@ export const changeScrollSpeed = createAsyncThunk<void, boolean, { state: RootSt
     if (!settings) return
     client.user.saveSettings({ ...settings, scrollSpeed: speed ? 400 : 0 })
 })
+export const changeSharingSetting = createAsyncThunk<void, { site: keyof SharingSettings; value: boolean }, { state: RootState }>(
+    "settings/sharingSetting",
+    (sharingSetting, thunkApi) => {
+        const { settings } = thunkApi.getState().user
+        if (!settings) return
+        client.user.saveSettings({
+            ...settings,
+            sharingSettings: {
+                ...settings.sharingSettings,
+                [sharingSetting.site]: sharingSetting.value,
+            },
+        })
+    }
+)
 
 export const userSlice = createSlice({
     name: "user",
@@ -71,7 +85,11 @@ export const userSlice = createSlice({
             if (!state.settings) return
             state.settings.scrollSpeed = action.meta.arg ? 400 : 0
         })
-        builder.addMatcher(isAnyOf(changeLanguage.fulfilled, changeScrollSpeed.fulfilled), () => {
+        builder.addCase(changeSharingSetting.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.sharingSettings[action.meta.arg.site] = action.meta.arg.value
+        })
+        builder.addMatcher(isAnyOf(changeLanguage.fulfilled, changeScrollSpeed.fulfilled, changeSharingSetting.fulfilled), () => {
             showNotification({
                 message: t`Settings saved.`,
                 color: "green",

commafeed-client/src/app/types.ts

@@ -233,16 +233,18 @@ export interface Settings {
     theme?: string
     customCss?: string
     scrollSpeed: number
+    sharingSettings: SharingSettings
+}
+
+export interface SharingSettings {
     email: boolean
     gmail: boolean
     facebook: boolean
     twitter: boolean
-    googleplus: boolean
     tumblr: boolean
     pocket: boolean
     instapaper: boolean
     buffer: boolean
-    readability: boolean
 }
 
 export interface StarRequest {