Merge branch 'main' of github.com:electh/ReactFlux

electh · Mar 26, 2024 · 6a01245 · 6a01245
2 parents 37c81de + a4af40d
commit 6a01245
Show file tree

Hide file tree

Showing 20 changed files with 701 additions and 529 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,16 +1,3 @@
-/*@media screen and (max-width: 700px) {*/
-/*  .sidebar {*/
-/*    display: none !important;*/
-/*  }*/
-/*}*/
-
-/*@media screen and (max-width: 700px) {*/
-/*  .main {*/
-/*    padding-left: 0 !important;*/
-/*    width: 100% !important;*/
-/*  }*/
-/*}*/
-
 .arco-menu-collapse-button {
   display: none;
 }
@@ -86,6 +73,7 @@
 
 ::-webkit-scrollbar {
   background-color: transparent;
+  height: 0;
   width: 6px;
 }
 

diff --git a/src/Store.js b/src/Store.js
@@ -11,22 +11,31 @@ import {
 import { applyColor } from "./utils/Colors";
 import { getConfig, setConfig } from "./utils/Config";
 
-const calculateUnread = (currentUnread, status) => {
+const calculateUnreadCount = (currentCount, status) => {
   if (status === "read") {
-    return Math.max(0, currentUnread - 1);
+    return Math.max(0, currentCount - 1);
   }
-  return currentUnread + 1;
+  return currentCount + 1;
 };
 
-const updateUnreadCount = (items, itemId, status) => {
-  return items.map((item) =>
-    item.id === itemId
-      ? {
-          ...item,
-          unread: calculateUnread(item.unread, status),
-        }
-      : item,
-  );
+const updateUnreadCount = (items, itemId, countOrStatus) => {
+  return items.map((item) => {
+    if (item.id === itemId) {
+      let newUnreadCount;
+
+      if (typeof countOrStatus === "string") {
+        newUnreadCount = calculateUnreadCount(item.unreadCount, countOrStatus);
+      } else {
+        newUnreadCount = countOrStatus;
+      }
+
+      return {
+        ...item,
+        unreadCount: newUnreadCount,
+      };
+    }
+    return item;
+  });
 };
 
 const useStore = create((set, get) => ({
@@ -48,18 +57,14 @@ const useStore = create((set, get) => ({
   collapsed: window.innerWidth <= 992,
   activeContent: null,
 
-  setUnreadTotal: (unreadTotal) => {
-    set({ unreadTotal: unreadTotal });
-  },
-  setUnreadToday: (unreadToday) => {
-    set({ unreadToday: unreadToday });
-  },
-  setStarredCount: (starredCount) => {
-    set({ starredCount: starredCount });
-  },
-  setReadCount: (readCount) => {
-    set({ readCount: readCount });
-  },
+  setUnreadTotal: (updater) =>
+    set((state) => ({ unreadTotal: updater(state.unreadTotal) })),
+  setUnreadToday: (updater) =>
+    set((state) => ({ unreadToday: updater(state.unreadToday) })),
+  setStarredCount: (updater) =>
+    set((state) => ({ starredCount: updater(state.starredCount) })),
+  setReadCount: (updater) =>
+    set((state) => ({ readCount: updater(state.readCount) })),
   setActiveContent: (activeContent) => {
     set({ activeContent: activeContent });
   },
@@ -100,7 +105,7 @@ const useStore = create((set, get) => ({
 
       const feedsWithUnread = feedResponse.data.map((feed) => ({
         ...feed,
-        unread: unreadInfo[feed.id] || 0,
+        unreadCount: unreadInfo[feed.id] || 0,
       }));
 
       set({
@@ -115,14 +120,14 @@ const useStore = create((set, get) => ({
 
         for (const feed of feedsWithUnread) {
           if (feed.category.id === group.id) {
-            unreadCount += feed.unread;
+            unreadCount += feed.unreadCount;
             feedCount += 1;
           }
         }
 
         return {
           ...group,
-          unread: unreadCount,
+          unreadCount: unreadCount,
           feed: feedCount,
         };
       });
@@ -140,15 +145,15 @@ const useStore = create((set, get) => ({
     }
   },
 
-  updateFeedUnread: (feedId, status) => {
+  updateFeedUnreadCount: (feedId, countOrStatus) => {
     set((state) => ({
-      feeds: updateUnreadCount(state.feeds, feedId, status),
+      feeds: updateUnreadCount(state.feeds, feedId, countOrStatus),
     }));
   },
 
-  updateGroupUnread: (groupId, status) => {
+  updateGroupUnreadCount: (groupId, countOrStatus) => {
     set((state) => ({
-      groups: updateUnreadCount(state.groups, groupId, status),
+      groups: updateUnreadCount(state.groups, groupId, countOrStatus),
     }));
   },
 

diff --git a/src/apis/index.js b/src/apis/index.js
@@ -1,73 +1,58 @@
 import { get24HoursAgoTimestamp } from "../utils/Date";
 import { apiClient } from "./axios";
 
-export async function updateEntriesStatus(entryIds, newStatus) {
-  return apiClient.put("/v1/entries", {
+export const updateEntriesStatus = async (entryIds, newStatus) =>
+  apiClient.put("/v1/entries", {
     entry_ids: entryIds,
     status: newStatus,
   });
-}
 
-export async function updateEntryStatus(entryId, newStatus) {
-  return updateEntriesStatus([entryId], newStatus);
-}
+export const updateEntryStatus = async (entryId, newStatus) =>
+  updateEntriesStatus([entryId], newStatus);
 
-export async function toggleEntryStarred(entryId) {
-  return apiClient.put(`/v1/entries/${entryId}/bookmark`);
-}
+export const toggleEntryStarred = async (entryId) =>
+  apiClient.put(`/v1/entries/${entryId}/bookmark`);
 
-export async function fetchOriginalArticle(entryId) {
-  return apiClient.get(`/v1/entries/${entryId}/fetch-content`);
-}
+export const fetchOriginalArticle = async (entryId) =>
+  apiClient.get(`/v1/entries/${entryId}/fetch-content`);
 
-export async function getCurrentUser() {
-  return apiClient.get("/v1/me");
-}
+export const getCurrentUser = async () => apiClient.get("/v1/me");
 
-export async function getUnreadInfo() {
-  return apiClient.get("/v1/feeds/counters");
-}
+export const getUnreadInfo = async () => apiClient.get("/v1/feeds/counters");
 
-export async function getFeeds() {
-  return apiClient.get("/v1/feeds");
-}
+export const getFeeds = async () => apiClient.get("/v1/feeds");
 
-export async function getGroups() {
-  return apiClient.get("/v1/categories");
-}
+export const getGroups = async () => apiClient.get("/v1/categories");
 
-export async function deleteGroup(id) {
-  return apiClient.delete(`/v1/categories/${id}`);
-}
+export const deleteGroup = async (id) =>
+  apiClient.delete(`/v1/categories/${id}`);
 
-export async function addGroup(title) {
-  return apiClient.post("/v1/categories", { title });
-}
+export const addGroup = async (title) =>
+  apiClient.post("/v1/categories", { title });
 
-export async function editGroup(id, newTitle) {
-  return apiClient.put(`/v1/categories/${id}`, { title: newTitle });
-}
+export const editGroup = async (id, newTitle) =>
+  apiClient.put(`/v1/categories/${id}`, { title: newTitle });
 
-export async function editFeed(feedId, newUrl, newTitle, groupId, isFullText) {
-  return apiClient.put(`/v1/feeds/${feedId}`, {
+export const editFeed = async (feedId, newUrl, newTitle, groupId, isFullText) =>
+  apiClient.put(`/v1/feeds/${feedId}`, {
     feed_url: newUrl,
     title: newTitle,
     category_id: groupId,
     crawler: isFullText,
   });
-}
 
-export async function deleteFeed(feedId) {
-  return apiClient.delete(`/v1/feeds/${feedId}`);
-}
+export const refreshFeed = async (feedId) =>
+  apiClient.put(`/v1/feeds/${feedId}/refresh`);
 
-export async function addFeed(feedUrl, groupId, isFullText) {
-  return apiClient.post("/v1/feeds", {
+export const deleteFeed = async (feedId) =>
+  apiClient.delete(`/v1/feeds/${feedId}`);
+
+export const addFeed = async (feedUrl, groupId, isFullText) =>
+  apiClient.post("/v1/feeds", {
     feed_url: feedUrl,
     category_id: groupId,
     crawler: isFullText,
   });
-}
 
 export const getAllEntries = async (offset = 0, status = null) => {
   const base_url = `/v1/entries?order=published_at&direction=desc&offset=${offset}`;

diff --git a/src/components/Article/ArticleCard.jsx b/src/components/Article/ArticleCard.jsx
@@ -7,6 +7,32 @@ import { generateRelativeTime } from "../../utils/Date";
 import "./ArticleCard.css";
 import ImageWithLazyLoading from "./ImageWithLazyLoading";
 
+const FeedIcon = ({ url }) => (
+  <img
+    className="feed-icon"
+    src={`https://icons.duckduckgo.com/ip3/${new URL(url).hostname}.ico`}
+    alt="Icon"
+  />
+);
+
+const ArticleCardContent = ({ entry, showFeedIcon }) => (
+  <div>
+    <Typography.Text
+      className={entry.status === "unread" ? "title-unread" : "title-read"}
+    >
+      {entry.title}
+    </Typography.Text>
+    <Typography.Text className="article-info">
+      <br />
+      {showFeedIcon && <FeedIcon url={entry.feed.site_url} />}
+      {entry.feed.title}
+      <br />
+      {generateRelativeTime(entry.published_at)}
+    </Typography.Text>
+    {entry.starred && <IconStarFill className="icon-starred" />}
+  </div>
+);
+
 const ArticleCard = ({ entry, handleEntryClick }) => {
   const activeContent = useStore((state) => state.activeContent);
   const showFeedIcon = useStore((state) => state.showFeedIcon);
@@ -27,32 +53,6 @@ const ArticleCard = ({ entry, handleEntryClick }) => {
     </div>
   ) : null;
 
-  const FeedIcon = ({ url }) => (
-    <img
-      className="feed-icon"
-      src={`https://icons.duckduckgo.com/ip3/${new URL(url).hostname}.ico`}
-      alt="Icon"
-    />
-  );
-
-  const ArticleCardContent = ({ entry, showFeedIcon }) => (
-    <div>
-      <Typography.Text
-        className={entry.status === "unread" ? "title-unread" : "title-read"}
-      >
-        {entry.title}
-      </Typography.Text>
-      <Typography.Text className="article-info">
-        <br />
-        {showFeedIcon && <FeedIcon url={entry.feed.site_url} />}
-        {entry.feed.title}
-        <br />
-        {generateRelativeTime(entry.published_at)}
-      </Typography.Text>
-      {entry.starred && <IconStarFill className="icon-starred" />}
-    </div>
-  );
-
   return (
     <div className="article-card" key={entry.id}>
       <Card