🚀 Release/1.3.1 (#206)

🚀 Release/1.3.1

Author: yjkwon07

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "urlink-chrome-extension",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": true,
   "dependencies": {
     "@date-io/moment": "^1.3.13",

package.json

@@ -1,9 +1,9 @@
 {
   "name": "urLink",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "manifest_version": 2,
   "description": "북마크보다 손쉽게 웹사이트를 보관하고 정리하세요.",
-  "permissions": ["<all_urls>", "identity", "history", "notifications"],
+  "permissions": ["<all_urls>", "identity", "history", "notifications", "bookmarks"],
   "icons": {
     "16": "images/logo/logo16.png",
     "24": "images/logo/logo24.png",

public/manifest.json

@@ -1,19 +1,22 @@
 import React, { useEffect, useCallback, memo, useState, useMemo, useRef } from 'react'
 
+import OutboxIcon from '@mui/icons-material/Outbox'
 import { Badge, List, Popover, Drawer } from '@mui/material'
 import clsx from 'clsx'
 import { useDispatch, useSelector } from 'react-redux'
 
+import { AlertModal } from '@/main/components/modals'
 import { alarmNoticeSelector } from '@/modules/alarmNotice'
-import { categorySelector } from '@/modules/category'
+import { categorySelector, useCategories } from '@/modules/category'
 import { useHistoryLinks } from '@/modules/historyLink'
-import { uiSelector } from '@/modules/ui'
+import { createBookmark, createBookmarkFolder } from '@/utils/chromeApis/bookmarks'
 import alarmImg from '@assets/images/alarm.png'
 import historyImg from '@assets/images/history.png'
 import personImg from '@assets/images/person.png'
 import useDebounce from '@hooks/useDebounce'
 import SearchBar from '@main/components/SearchBar'
-import { linkSearchFilterChangeState } from '@modules/link'
+import { linkSearchFilterChangeState, linkSelector, linksReadThunk, useLinks } from '@modules/link'
+import { uiSelector, useToast, useDialog, MODAL_NAME } from '@modules/ui'
 import { GAEvent } from '@utils/ga'
 
 import AlarmList from './AlarmList'
@@ -33,7 +36,15 @@ function AppBar() {
   const category = useSelector(categorySelector.selectedCategory)
   const alarmList = useSelector(alarmNoticeSelector.listData)
   const isAppBarInversion = useSelector(uiSelector.isAppBarInversion)
-
+  const { categories } = useCategories()
+  const links = useSelector((state) => linkSelector.linksData(state))
+  const { openToast } = useToast()
+
+  const {
+    open: migrateBookmarksOpen,
+    toggle: migrateBookmarksToggle,
+    close: migrateBookmarksClose,
+  } = useDialog(MODAL_NAME.BOOKMARKS_MIGRATION_MODAL)
   const { reload } = useHistoryLinks()
 
   const notReadAlarmList = useMemo(() => {
@@ -46,6 +57,7 @@ function AppBar() {
   const [isHistoryOpen, setIsHistoryOpen] = useState(false)
   const [isAlarmOpen, setIsAlarmOpen] = useState(false)
   const [isProfileOpen, setIsProfileOpen] = useState(false)
+  const [isReadyForMigration, setIsReadyForMigration] = useState(false)
 
   const [selectedName, setSelectedName] = useState(SEARCH_FILTER_LIST[0].search)
   const [keyword, setKeyword] = useState('')
@@ -68,10 +80,48 @@ function AppBar() {
     [handleResetInput]
   )
 
+  const fetchAllLinkData = async () => {
+    //로딩 처리 필요
+    migrateBookmarksClose()
+    if (categories.length) {
+      for (const category of categories) {
+        await dispatch(linksReadThunk({ categoryId: category.id }, { key: category.id }))
+      }
+    }
+    setIsReadyForMigration(true)
+  }
+
+  const handleMigrateBookmarks = useCallback(() => {
+    const callback = (urlinkFolderId) => {
+      for (const category of categories) {
+        //카테고리 별로 북마크 폴더 생성
+        createBookmarkFolder({ id: urlinkFolderId, title: category.name }, (id) => {
+          for (const link of links[category.id]) {
+            //카테고리 북마크 폴더 내에 링크 삽입
+            createBookmark({
+              id,
+              title: link.title,
+              url: link.path,
+            })
+          }
+        })
+      }
+
+      setIsReadyForMigration(false)
+      openToast({ type: 'success', message: '이동이 완료되었습니다. 북마크를 확인해주세요.' })
+    }
+    //유어링크 북마크 폴더 생성
+    createBookmarkFolder({ id: '1', title: 'urLink Bookmarks' }, callback)
+  }, [links, categories, openToast])
+
   useEffect(() => {
     dispatch(linkSearchFilterChangeState({ selectedName, keyword: debouncedKeyword }))
   }, [dispatch, selectedName, debouncedKeyword])
 
+  useEffect(() => {
+    if (isReadyForMigration) handleMigrateBookmarks()
+  }, [isReadyForMigration, handleMigrateBookmarks])
+
   return (
     <>
       <div
@@ -91,6 +141,17 @@ function AppBar() {
           disabled={!category?.id || isHistoryOpen}
         />
         <List className={classes.iconButtonGroup}>
+          <StyledListItem
+            button
+            aria-describedby="bookmarks"
+            onClick={() => {
+              migrateBookmarksToggle()
+              GAEvent('앱바', '북마크 이동 버튼 클릭')
+            }}
+          >
+            <OutboxIcon />
+          </StyledListItem>
+
           <StyledListItem
             button
             aria-describedby="history-drawer"
@@ -155,6 +216,16 @@ function AppBar() {
         </List>
       </div>
 
+      {migrateBookmarksOpen && (
+        <AlertModal
+          openBool={migrateBookmarksOpen}
+          btnYesText="이동"
+          contentText="모든 링크를 북마크로 이동하시겠습니까?"
+          handleClose={migrateBookmarksClose}
+          handleYesClick={fetchAllLinkData}
+        />
+      )}
+
       <Drawer
         className={classes.drawer}
         variant="persistent"

src/main/pages/Home/AppBar/index.jsx

@@ -52,6 +52,7 @@ export const StyledListItem = withStyles((theme) => ({
 
     backgroundColor: 'white',
     borderRadius: 8,
+    justifyContent: 'center',
 
     '&:hover': {
       backgroundColor: '#d6e4f5',

src/main/pages/Home/AppBar/style.js

@@ -5,6 +5,7 @@ import { createRequestAction, createRequestThunk } from '../helpers'
 export const LINK = 'LINK'
 
 export const linksRead = createRequestAction(`${LINK}/LIST/READ`)
+export const linksReadThunk = createRequestThunk(linksRead)
 
 export const linkCreate = createRequestAction(`${LINK}/CREATE`)
 export const linkCreateThunk = createRequestThunk(linkCreate)

src/modules/link/reducer.js

@@ -4,6 +4,7 @@ export const MODAL_NAME = {
   DELETE_CATEGORY_ALERT_MODAL: 'DELETE_CATEGORY_ALERT_MODAL',
   UPDATE_CATEGORY_MODAL: 'UPDATE_CATEGORY_MODAL',
   ADD_CATEGORY_MODAL: 'ADD_CATEGORY_MODAL',
+  BOOKMARKS_MIGRATION_MODAL: 'BOOKMARKS_MIGRATION_MODAL',
 }
 
 export const DRAG = {

src/modules/ui/constants.js

@@ -0,0 +1,30 @@
+export function getBookmarks() {
+  chrome.bookmarks.getTree((data) => console.log(data))
+}
+
+const onBookmarkFolderAdded = (newFolder, fn) => {
+  fn(newFolder.id)
+}
+
+export function createBookmark(data) {
+  const { id, title, url } = data
+  chrome.bookmarks.create({
+    parentId: id,
+    title,
+    url,
+  })
+}
+
+export function createBookmarkFolder(data, fn) {
+  const { id, title } = data
+  const idCheck = chrome.runtime?.id
+  if (idCheck) {
+    chrome.bookmarks.create(
+      {
+        parentId: id,
+        title: title,
+      },
+      (newFolder) => onBookmarkFolderAdded(newFolder, fn)
+    )
+  }
+}