Merge pull request #163 from sparcs-kaist/feature/share

sparcs-kaist · Oct 6, 2023 · 90b3d78 · 90b3d78
2 parents c53fc6b + ec0932f
commit 90b3d78
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 4 deletions.
diff --git a/src/components/molecules/StatBox/StatBox.js b/src/components/molecules/StatBox/StatBox.js
@@ -1,11 +1,11 @@
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
-import { useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 import throttle from "lodash.throttle";
 
-import { toggleZaboLike, toggleZaboPin } from "store/reducers/zabo";
+import { toggleZaboLike, toggleZaboPin, toggleZaboShare } from "store/reducers/zabo";
 import { isAuthedSelector } from "lib/utils";
 
 import bookmarkImg from "static/images/bookmark.svg";
@@ -16,6 +16,7 @@ import whiteEmptyBookmarkImg from "static/images/whiteBookmakrEmpty.svg";
 import whiteBookmarkImg from "static/images/whiteBookmark.svg";
 import whiteLikeImg from "static/images/whiteLike.svg";
 import whiteEmptyLikeImg from "static/images/whiteLikeEmpty.svg";
+import shareImg from "static/images/whiteShare.svg";
 
 import { alerts } from "../../../lib/variables";
 
@@ -29,6 +30,10 @@ const icons = {
       filled: likeImg,
       empty: emptyLikeImg,
     },
+    share: {
+      filled: shareImg,
+      empty: shareImg,
+    },
   },
   white: {
     pin: {
@@ -39,11 +44,16 @@ const icons = {
       filled: whiteLikeImg,
       empty: whiteEmptyLikeImg,
     },
+    share: {
+      filled: shareImg,
+      empty: shareImg,
+    },
   },
 };
 const toggleActions = {
   pin: toggleZaboPin,
   like: toggleZaboLike,
+  share: toggleZaboShare,
 };
 
 const Icon = styled.img`
@@ -113,6 +123,7 @@ const Text = styled.div`
 const StatBox = ({ stat, type, ...props }) => {
   const { type: statType, count, zaboId, active } = stat;
   const dispatch = useDispatch();
+  const location = useLocation();
   const isAuthed = useSelector(isAuthedSelector);
   const history = useHistory();
   const colored = type === "button";
@@ -127,12 +138,26 @@ const StatBox = ({ stat, type, ...props }) => {
 
   const onClick = (e) => {
     e.preventDefault();
-    if (isAuthed) throttledAction();
+    if (stat.type === "share") clipBoardCopy();
+    else if (isAuthed) throttledAction();
     else if (window.confirm(alerts.login)) {
       history.replace({ pathname: "/auth/login", state: { referrer: history.location.pathname } });
     }
   };
 
+  const clipBoardCopy = async () => {
+    try {
+      const location = window.location;
+      await navigator.clipboard.writeText(
+        `${location.protocol}//${location.host}/s/${zaboId.slice(-6)}`,
+        // https://zabo.sparcs.org/s/2j412h
+      );
+      alert("클립보드에 링크가 복사되었습니다.");
+    } catch (e) {
+      alert("복사에 실패하였습니다");
+    }
+  };
+
   if (type === "text") {
     return (
       <Text onClick={onClick} {...props}>
@@ -151,7 +176,7 @@ const StatBox = ({ stat, type, ...props }) => {
 
 StatBox.propTypes = {
   stat: PropTypes.shape({
-    type: PropTypes.oneOf(["pin", "like"]).isRequired,
+    type: PropTypes.oneOf(["pin", "like", "share"]).isRequired,
     count: PropTypes.number,
     zaboId: PropTypes.string.isRequired,
     active: PropTypes.bool,

diff --git a/src/components/pages/ZaboPage/ZaboDetailPage.js b/src/components/pages/ZaboPage/ZaboDetailPage.js
@@ -119,6 +119,8 @@ const ZaboDetailPage = (props) => {
     likesCount,
     isPinned,
     pinsCount,
+    isShared,
+    sharesCount,
     views,
     effectiveViews,
     isMyZabo,
@@ -141,6 +143,12 @@ const ZaboDetailPage = (props) => {
       zaboId,
       active: isPinned,
     },
+    {
+      type: "share",
+      count: pinsCount,
+      zaboId,
+      active: isPinned,
+    },
   ];
 
   return (

diff --git a/src/lib/api/zabo.js b/src/lib/api/zabo.js
@@ -29,6 +29,7 @@ export const getPins = ({ username, lastSeen }) =>
 
 export const toggleZaboPin = (zaboId) => axios.post(`/zabo/${zaboId}/pin`);
 export const toggleZaboLike = (zaboId) => axios.post(`/zabo/${zaboId}/like`);
+export const toggleZaboShare = (zaboId) => axios.post(`/zabo/${zaboId}/share`);
 
 export const getGroupZaboList = ({ groupName, lastSeen }) =>
   axios.get(`/group/${groupName}/zabo/list`, { params: { lastSeen } });

diff --git a/src/static/images/whiteShare.svg b/src/static/images/whiteShare.svg
diff --git a/src/store/reducers/zabo.ts b/src/store/reducers/zabo.ts
@@ -16,6 +16,7 @@ const GET_ZABO = "zabo/GET_ZABO";
 const GET_PINS = "zabo/GET_PINS";
 const TOGGLE_ZABO_PIN = "zabo/TOGGLE_ZABO_PIN";
 const TOGGLE_ZABO_LIKE = "zabo/TOGGLE_ZABO_LIKE";
+const TOGGLE_ZABO_SHARE = "zabo/TOGGLE_ZABO_SHARE";
 const GET_GROUP_ZABO_LIST = "zabo/GET_GROUP_ZABO_LIST";
 const GET_SEARCH_ZABO_LIST = "zabo/GET_SEARCH_ZABO_LIST";
 const GET_SEARCH = "zabo/GET_SEARCH";
@@ -34,6 +35,12 @@ export const toggleZaboLike = createAction(
   ZaboAPI.toggleZaboLike,
   (meta) => meta,
 );
+export const toggleZaboShare = createAction(
+  TOGGLE_ZABO_SHARE,
+  ZaboAPI.toggleZaboShare,
+  (meta) => meta,
+);
+
 export const getGroupZaboList = createAction(
   GET_GROUP_ZABO_LIST,
   ZaboAPI.getGroupZaboList,
@@ -166,6 +173,13 @@ export default handleActions(
           Object.assign(draft.zabos[action.meta], action.payload);
         }),
     }),
+    ...pender({
+      type: TOGGLE_ZABO_SHARE,
+      onSuccess: (state, action) =>
+        produce(state, (draft: IZaboState) => {
+          Object.assign(draft.zabos[action.meta], action.payload);
+        }),
+    }),
     ...pender({
       type: GET_GROUP_ZABO_LIST,
       onSuccess: (state, action) => {