Merge pull request #4325 from brave/ca-2971

Refactor DnD on NTP Top Sites

components/brave_new_tab_ui/actions/grid_sites_actions.ts

@@ -0,0 +1,69 @@
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+// Types
+import { types } from '../constants/grid_sites_types'
+import { action } from 'typesafe-actions'
+import { InitialData } from '../api/initialData'
+import { Dispatch } from 'redux'
+
+// API
+import {
+  fetchAllBookmarkTreeNodes,
+  updateBookmarkTreeNode
+} from '../api/bookmarks'
+
+export const setFirstRenderGridSitesData = (initialData: InitialData) => {
+  return action(types.GRID_SITES_SET_FIRST_RENDER_DATA, initialData)
+}
+
+export const gridSitesDataUpdated = (gridSites: NewTab.Site[]) => {
+  return action(types.GRID_SITES_DATA_UPDATED, { gridSites })
+}
+
+export const toggleGridSitePinned = (pinnedSite: NewTab.Site) => {
+  return action(types.GRID_SITES_TOGGLE_SITE_PINNED, { pinnedSite })
+}
+
+export const removeGridSite = (removedSite: NewTab.Site) => {
+  return action(types.GRID_SITES_REMOVE_SITE, { removedSite })
+}
+
+export const undoRemoveGridSite = () => {
+  return action(types.GRID_SITES_UNDO_REMOVE_SITE)
+}
+
+export const undoRemoveAllGridSites = () => {
+  return action(types.GRID_SITES_UNDO_REMOVE_ALL_SITES)
+}
+
+export const updateGridSitesBookmarkInfo = (
+  sites: chrome.topSites.MostVisitedURL[]
+) => {
+  return async (dispatch: Dispatch) => {
+    const bookmarkInfo = await fetchAllBookmarkTreeNodes(sites)
+    dispatch(action(types.GRID_SITES_UPDATE_SITE_BOOKMARK_INFO, {
+      bookmarkInfo
+    }))
+  }
+}
+
+export const toggleGridSiteBookmarkInfo = (site: NewTab.Site) => {
+  return async (dispatch: Dispatch) => {
+    const bookmarkInfo = await updateBookmarkTreeNode(site)
+    dispatch(action(types.GRID_SITES_TOGGLE_SITE_BOOKMARK_INFO, {
+      url: site.url,
+      bookmarkInfo
+    }))
+  }
+}
+
+export const addGridSites = (site: NewTab.Site) => {
+  return action(types.GRID_SITES_ADD_SITES, { site })
+}
+
+export const showGridSiteRemovedNotification = (shouldShow: boolean) => {
+  return action(types.GRID_SITES_SHOW_SITE_REMOVED_NOTIFICATION, { shouldShow })
+}

components/brave_new_tab_ui/actions/new_tab_actions.ts

@@ -1,6 +1,7 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this file,
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
 
 import { action } from 'typesafe-actions'
 
@@ -11,56 +12,6 @@ import { Stats } from '../api/stats'
 import { PrivateTabData } from '../api/privateTabData'
 import { InitialData, InitialRewardsData, PreInitialRewardsData } from '../api/initialData'
 
-export const bookmarkAdded = (url: string) => action(types.BOOKMARK_ADDED, {
-  url
-})
-
-export const bookmarkRemoved = (url: string) => action(types.BOOKMARK_REMOVED, {
-  url
-})
-
-export const sitePinned = (url: string) => action(types.NEW_TAB_SITE_PINNED, {
-  url
-})
-
-export const siteUnpinned = (url: string) => action(types.NEW_TAB_SITE_UNPINNED, {
-  url
-})
-
-export const siteIgnored = (url: string) => action(types.NEW_TAB_SITE_IGNORED, {
-  url
-})
-
-export const undoSiteIgnored = (url: string) => action(types.NEW_TAB_UNDO_SITE_IGNORED, {
-  url
-})
-
-export const undoAllSiteIgnored = (url: string) => action(types.NEW_TAB_UNDO_ALL_SITE_IGNORED, {
-  url
-})
-
-export const siteDragged = (fromUrl: string, toUrl: string, dragRight: boolean) => action(types.NEW_TAB_SITE_DRAGGED, {
-  fromUrl,
-  toUrl,
-  dragRight
-})
-
-export const siteDragEnd = (url: string, didDrop: boolean) => action(types.NEW_TAB_SITE_DRAG_END, {
-  url,
-  didDrop
-})
-
-export const onHideSiteRemovalNotification = () => action(types.NEW_TAB_HIDE_SITE_REMOVAL_NOTIFICATION)
-
-export const bookmarkInfoAvailable = (queryUrl: string, bookmarkTreeNode: NewTab.Bookmark) => action(types.NEW_TAB_BOOKMARK_INFO_AVAILABLE, {
-  queryUrl,
-  bookmarkTreeNode
-})
-
-export const gridSitesUpdated = (gridSites: NewTab.Site[]) => action(types.NEW_TAB_GRID_SITES_UPDATED, {
-  gridSites
-})
-
 export const statsUpdated = (stats: Stats) =>
   action(types.NEW_TAB_STATS_UPDATED, {
     stats

components/brave_new_tab_ui/api/bookmarks.ts

@@ -0,0 +1,47 @@
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+/**
+ * Obtain the URLs bookmark info
+ */
+export const fetchBookmarkTreeNode = (
+  url: string
+): Promise<chrome.bookmarks.BookmarkTreeNode> => {
+  return new Promise(resolve => {
+    chrome.bookmarks.search(
+      url,
+      (bookmarkTreeNodes) => {
+        resolve(bookmarkTreeNodes[0])
+      }
+    )
+  })
+}
+
+/**
+ * Iterate over the sites array and obtain all URLs
+ * bookmark info
+ */
+export const fetchAllBookmarkTreeNodes = (
+  sites: chrome.topSites.MostVisitedURL[]
+): Promise<chrome.bookmarks.BookmarkTreeNode[]> => {
+  return Promise
+    .all(sites.map(site => fetchBookmarkTreeNode(site.url)))
+}
+
+/**
+ * Update bookmark info based on user interaction
+ */
+export const updateBookmarkTreeNode = (site: NewTab.Site) => {
+  return new Promise(async resolve => {
+    const bookmarkInfo = await fetchBookmarkTreeNode(site.url)
+    // Toggle the bookmark state
+    if (bookmarkInfo) {
+      chrome.bookmarks.remove(bookmarkInfo.id)
+    } else {
+      chrome.bookmarks.create({ title: site.title, url: site.url })
+    }
+    resolve(bookmarkInfo)
+  })
+}

components/brave_new_tab_ui/api/getActions.ts

@@ -1,19 +1,22 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this file,
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
 
 import { bindActionCreators } from 'redux'
 import * as newTabActions from '../actions/new_tab_actions'
+import * as gridSitesActions from '../actions/grid_sites_actions'
 import store from '../store'
 
 /**
  * Get actions from the C++ back-end down to front-end components
  */
-let actions: typeof newTabActions
+let actions: typeof newTabActions & typeof gridSitesActions
 export default function getActions () {
   if (actions) {
     return actions
   }
-  actions = bindActionCreators(newTabActions, store.dispatch.bind(store))
+  const allActions = Object.assign({}, newTabActions, gridSitesActions)
+  actions = bindActionCreators(allActions, store.dispatch.bind(store))
   return actions
 }

components/brave_new_tab_ui/api/initialData.ts

@@ -13,7 +13,7 @@ export type InitialData = {
   preferences: preferencesAPI.Preferences
   stats: statsAPI.Stats
   privateTabData: privateTabDataAPI.PrivateTabData
-  topSites: topSitesAPI.TopSitesData,
+  topSites: chrome.topSites.MostVisitedURL[]
   brandedWallpaperData: undefined | NewTab.BrandedWallpaper
 }
 

components/brave_new_tab_ui/api/topSites/index.ts → components/brave_new_tab_ui/api/topSites.ts

@@ -1,16 +1,14 @@
-// Copyright (c) 2019 The Brave Authors. All rights reserved.
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
 // you can obtain one at http://mozilla.org/MPL/2.0/.
 
-export type TopSitesData = NewTab.Site[]
-
 /**
  * Obtains the top sites
  */
-export function getTopSites (): Promise<TopSitesData> {
+export function getTopSites (): Promise<chrome.topSites.MostVisitedURL[]> {
   return new Promise(resolve => {
-    chrome.topSites.get((topSites: NewTab.Site[]) => {
+    chrome.topSites.get((topSites: chrome.topSites.MostVisitedURL[]) => {
       resolve(topSites || [])
     })
   })

components/brave_new_tab_ui/apiEventsToStore.ts

@@ -38,6 +38,8 @@ export function wireApiEventsToStore () {
       setRewardsFetchInterval()
     }
     getActions().setInitialData(initialData)
+    getActions().setFirstRenderGridSitesData(initialData)
+    getActions().updateGridSitesBookmarkInfo(initialData.topSites)
     // Listen for API changes and dispatch to store
     statsAPI.addChangeListener(updateStats)
     preferencesAPI.addChangeListener(updatePreferences)