fix(syndicated article): upgrade to graph upsert

Author: collectedmind

clients/web/src/containers/syndicated-article/syndicated-article.js

@@ -36,6 +36,9 @@ import { Toasts } from 'connectors/toasts/toast-list'
 import { ListenLogin as Listen } from 'connectors/listen/listen-login'
 import { ShareToMastodon } from 'components/share-modal/share-mastodon'
 
+import { mutationUpsertTransitionalItem } from 'connectors/items/mutation-upsert.state'
+import { mutationDeleteTransitionalItem } from 'connectors/items/mutation-delete.state'
+
 // Possible query params passed via url
 const validParams = {
   mobile_web_view: false, // hide unneeded elements when rendered by native apps
@@ -52,7 +55,6 @@ export function SyndicatedArticle({ queryParams = validParams, locale }) {
 
   const topics = useSelector((state) => state.topicList?.topicsByName)
   const articleData = useSelector((state) => state.syndicatedArticle.articleData)
-  const saveStatus = useSelector((state) => state.syndicatedArticle.saveStatus)
 
   const [isMastodonOpen, setIsMastodonOpen] = useState(false)
 
@@ -73,6 +75,9 @@ export function SyndicatedArticle({ queryParams = validParams, locale }) {
     showAds
   } = articleData || {}
 
+  const saveItemId = useSelector((state) => state.itemsTransitions[slug])
+  const saveStatus = saveItemId ? 'saved' : 'unsaved'
+
   // modify rendered elements when query params are passed in
   const { mobile_web_view, premium_user } = queryParams
   const isMobileWebView = mobile_web_view === 'true'
@@ -112,15 +117,19 @@ export function SyndicatedArticle({ queryParams = validParams, locale }) {
   const syndicatedFrom = publisherUrl ? publisherUrl : false
   const ArticleLayout = isMobileWebView ? MobileLayout : Layout
 
-  const saveAction = (savedUrl, value) => {
-    if (saveStatus === 'saved') dispatch(unSaveArticleItem(itemId))
-    if (saveStatus !== 'saved') {
-      const analyticsData = { url: savedUrl, value }
-      dispatch(sendSnowplowEvent('syndicated.article.save', analyticsData))
-      dispatch(saveArticleItem(savedUrl))
-    }
+  // Prep save action
+  const onSave = (url, value) => {
+    dispatch(sendSnowplowEvent('syndicated.article.save', { url, value }))
+    dispatch(mutationUpsertTransitionalItem(url, slug))
   }
 
+  const onUnSave = (url, value) => {
+    dispatch(sendSnowplowEvent('syndicated.article.unsave', { url, value }))
+    dispatch(mutationDeleteTransitionalItem(saveItemId, slug))
+  }
+
+  const saveAction = saveItemId ? onUnSave : onSave
+
   const shareAction = (platform) => {
     const analyticsData = { url }
     dispatch(sendSnowplowEvent(`syndicated.share.${platform}`, analyticsData))

clients/web/src/containers/syndicated-article/syndicated-article.state.js

@@ -1,24 +1,12 @@
-import { put, takeEvery } from 'redux-saga/effects'
-import {
-  ARTICLE_HYDRATE,
-  ARTICLE_SAVE_REQUEST,
-  ARTICLE_SAVE_SUCCESS,
-  ARTICLE_SAVE_FAILURE,
-  ARTICLE_UNSAVE_REQUEST,
-  ARTICLE_UNSAVE_SUCCESS,
-  ARTICLE_UNSAVE_FAILURE,
-  ARTICLE_GET_PONG
-} from 'actions'
+import { takeEvery } from 'redux-saga/effects'
+import { ARTICLE_HYDRATE, ARTICLE_GET_PONG } from 'actions'
 import { getSyndicatedArticle } from 'common/api/queries/get-syndicated-article'
-import { saveItem } from 'common/api/_legacy/saveItem'
-import { removeItem } from 'common/api/_legacy/removeItem'
+
 import { HYDRATE } from 'actions'
 
 /** ACTIONS
  --------------------------------------------------------------- */
 export const hydrateArticle = (hydrated) => ({ type: ARTICLE_HYDRATE, hydrated }) //prettier-ignore
-export const saveArticleItem = (url) => ({ type: ARTICLE_SAVE_REQUEST, url })
-export const unSaveArticleItem = (id) => ({ type: ARTICLE_UNSAVE_REQUEST, id })
 export const callGetPong = () => ({ type: ARTICLE_GET_PONG })
 
 /** REDUCERS
@@ -35,26 +23,6 @@ export const syndicatedArticleReducers = (state = initialState, action) => {
       return { ...state, ...hydrated }
     }
 
-    case ARTICLE_SAVE_REQUEST: {
-      return { ...state, saveStatus: 'saving' }
-    }
-
-    case ARTICLE_SAVE_SUCCESS: {
-      return { ...state, saveStatus: 'saved' }
-    }
-
-    case ARTICLE_SAVE_FAILURE: {
-      return { ...state, saveStatus: 'unsaved' }
-    }
-
-    case ARTICLE_UNSAVE_SUCCESS: {
-      return { ...state, saveStatus: 'unsaved' }
-    }
-
-    case ARTICLE_UNSAVE_FAILURE: {
-      return { ...state, saveStatus: 'saved' }
-    }
-
     // SPECIAL HYDRATE:  This is sent from the next-redux wrapper and
     // it represents the state used to build the page on the server.
     case HYDRATE: {
@@ -69,36 +37,10 @@ export const syndicatedArticleReducers = (state = initialState, action) => {
 
 /** SAGAS :: WATCHERS
  --------------------------------------------------------------- */
-export const syndicatedArticleSagas = [
-  takeEvery(ARTICLE_SAVE_REQUEST, articleSaveRequest),
-  takeEvery(ARTICLE_UNSAVE_REQUEST, articleUnSaveRequest),
-  takeEvery(ARTICLE_GET_PONG, articleGetPong)
-]
+export const syndicatedArticleSagas = [takeEvery(ARTICLE_GET_PONG, articleGetPong)]
 
 /** SAGA :: RESPONDERS
  --------------------------------------------------------------- */
-function* articleSaveRequest({ url }) {
-  try {
-    const response = yield saveItem(url)
-    if (response?.status !== 1) throw new Error('Unable to save')
-
-    yield put({ type: ARTICLE_SAVE_SUCCESS })
-  } catch (error) {
-    yield put({ type: ARTICLE_SAVE_FAILURE, error })
-  }
-}
-
-function* articleUnSaveRequest({ id }) {
-  try {
-    const response = yield removeItem(id)
-    if (response?.status !== 1) throw new Error('Unable to remove item')
-
-    yield put({ type: ARTICLE_UNSAVE_SUCCESS })
-  } catch (error) {
-    yield put({ type: ARTICLE_UNSAVE_FAILURE, error })
-  }
-}
-
 function* articleGetPong() {
   yield fetch('/api/pong/get', {
     method: 'post',