feat: update memo sort option setting (#326)

feat: add memo display ts
This commit is contained in:
boojack 2022-10-21 19:57:57 +08:00 committed by GitHub
parent 0b34b142c8
commit b68d6e2693
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 58 additions and 39 deletions

View File

@ -37,6 +37,7 @@ type Memo struct {
Content string `json:"content"`
Visibility Visibility `json:"visibility"`
Pinned bool `json:"pinned"`
DisplayTs int64 `json:"displayTs"`
// Related fields
Creator *User `json:"creator"`
@ -59,7 +60,8 @@ type MemoPatch struct {
ID int
// Standard fields
CreatedTs *int64 `json:"createdTs"`
CreatedTs *int64 `json:"createdTs"`
UpdatedTs *int64
RowStatus *RowStatus `json:"rowStatus"`
// Domain specific fields

View File

@ -16,7 +16,7 @@ const (
UserSettingEditorFontStyleKey UserSettingKey = "editorFontStyle"
// UserSettingEditorFontStyleKey is the key type for mobile editor style.
UserSettingMobileEditorStyleKey UserSettingKey = "mobileEditorStyle"
// UserSettingMemoSortOptionKey is the key type for sort time option.
// UserSettingMemoSortOptionKey is the key type for memo sort option.
UserSettingMemoSortOptionKey UserSettingKey = "memoSortOption"
)
@ -42,7 +42,7 @@ var (
UserSettingMemoVisibilityValue = []Visibility{Privite, Protected, Public}
UserSettingEditorFontStyleValue = []string{"normal", "mono"}
UserSettingMobileEditorStyleValue = []string{"normal", "float"}
UserSettingSortTimeOptionKeyValue = []string{"created_ts", "updated_ts"}
UserSettingMemoSortOptionKeyValue = []string{"created_ts", "updated_ts"}
)
type UserSetting struct {
@ -135,7 +135,7 @@ func (upsert UserSettingUpsert) Validate() error {
}
invalid := true
for _, value := range UserSettingSortTimeOptionKeyValue {
for _, value := range UserSettingMemoSortOptionKeyValue {
if memoSortOption == value {
invalid = false
break

View File

@ -4,6 +4,7 @@ import (
"encoding/json"
"fmt"
"net/http"
"sort"
"strconv"
"strings"
"time"
@ -101,8 +102,10 @@ func (s *Server) registerMemoRoutes(g *echo.Group) {
return echo.NewHTTPError(http.StatusInternalServerError, "Failed to find memo").SetInternal(err)
}
currentTs := time.Now().Unix()
memoPatch := &api.MemoPatch{
ID: memoID,
ID: memoID,
UpdatedTs: &currentTs,
}
if err := json.NewDecoder(c.Request().Body).Decode(memoPatch); err != nil {
return echo.NewHTTPError(http.StatusBadRequest, "Malformatted patch memo request").SetInternal(err)
@ -175,6 +178,10 @@ func (s *Server) registerMemoRoutes(g *echo.Group) {
return echo.NewHTTPError(http.StatusInternalServerError, "Failed to fetch memo list").SetInternal(err)
}
sort.Slice(list, func(i, j int) bool {
return list[i].DisplayTs > list[j].DisplayTs
})
c.Response().Header().Set(echo.HeaderContentType, echo.MIMEApplicationJSONCharsetUTF8)
if err := json.NewEncoder(c.Response().Writer).Encode(composeResponse(list)); err != nil {
return echo.NewHTTPError(http.StatusInternalServerError, "Failed to encode memo list response").SetInternal(err)
@ -227,6 +234,10 @@ func (s *Server) registerMemoRoutes(g *echo.Group) {
return echo.NewHTTPError(http.StatusInternalServerError, "Failed to fetch all memo list").SetInternal(err)
}
sort.Slice(list, func(i, j int) bool {
return list[i].DisplayTs > list[j].DisplayTs
})
c.Response().Header().Set(echo.HeaderContentType, echo.MIMEApplicationJSONCharsetUTF8)
if err := json.NewEncoder(c.Response().Writer).Encode(composeResponse(list)); err != nil {
return echo.NewHTTPError(http.StatusInternalServerError, "Failed to encode all memo list response").SetInternal(err)

View File

@ -3,6 +3,7 @@ package store
import (
"context"
"database/sql"
"encoding/json"
"fmt"
"strings"
@ -41,6 +42,7 @@ func (raw *memoRaw) toMemo() *api.Memo {
// Domain specific fields
Content: raw.Content,
Visibility: raw.Visibility,
DisplayTs: raw.CreatedTs,
}
}
@ -62,6 +64,25 @@ func (s *Store) ComposeMemo(ctx context.Context, memo *api.Memo) (*api.Memo, err
return nil, err
}
memoSortOptionKey := api.UserSettingMemoSortOptionKey
memoSortOption, err := s.FindUserSetting(ctx, &api.UserSettingFind{
UserID: memo.CreatorID,
Key: &memoSortOptionKey,
})
if err != nil {
return nil, err
}
memoSortOptionValue := "created_ts"
if memoSortOption != nil {
err = json.Unmarshal([]byte(memoSortOption.Value), &memoSortOptionValue)
if err != nil {
return nil, fmt.Errorf("failed to unmarshal user setting memo sort option value")
}
}
if memoSortOptionValue == "updated_ts" {
memo.DisplayTs = memo.UpdatedTs
}
return memo, nil
}
@ -244,6 +265,9 @@ func patchMemoRaw(ctx context.Context, tx *sql.Tx, patch *api.MemoPatch) (*memoR
if v := patch.CreatedTs; v != nil {
set, args = append(set, "created_ts = ?"), append(args, *v)
}
if v := patch.UpdatedTs; v != nil {
set, args = append(set, "updated_ts = ?"), append(args, *v)
}
if v := patch.RowStatus; v != nil {
set, args = append(set, "row_status = ?"), append(args, *v)
}

View File

@ -7,7 +7,6 @@ import { useNavigate } from "react-router-dom";
import "dayjs/locale/zh";
import { UNKNOWN_ID } from "../helpers/consts";
import { editorStateService, locationService, memoService, userService } from "../services";
import { useAppSelector } from "../store";
import Icon from "./Icon";
import toastHelper from "./Toast";
import MemoContent from "./MemoContent";
@ -33,20 +32,17 @@ export const getFormatedMemoTimeStr = (time: number, locale = "en"): string => {
const Memo: React.FC<Props> = (props: Props) => {
const memo = props.memo;
const user = useAppSelector((state) => state.user.user);
const { t, i18n } = useTranslation();
const navigate = useNavigate();
const [createdAtStr, setCreatedAtStr] = useState<string>(getFormatedMemoTimeStr(memo.createdTs, i18n.language));
const [updatedAtStr, setUpdatedAtStr] = useState<string>(getFormatedMemoTimeStr(memo.updatedTs, i18n.language));
const [displayTimeStr, setDisplayTimeStr] = useState<string>(getFormatedMemoTimeStr(memo.displayTs, i18n.language));
const memoContainerRef = useRef<HTMLDivElement>(null);
const isVisitorMode = userService.isVisitorMode();
useEffect(() => {
let intervalFlag: any = -1;
if (Date.now() - memo.createdTs < 1000 * 60 * 60 * 24) {
if (Date.now() - memo.displayTs < 1000 * 60 * 60 * 24) {
intervalFlag = setInterval(() => {
setCreatedAtStr(getFormatedMemoTimeStr(memo.createdTs, i18n.language));
setUpdatedAtStr(getFormatedMemoTimeStr(memo.updatedTs, i18n.language));
setDisplayTimeStr(getFormatedMemoTimeStr(memo.displayTs, i18n.language));
}, 1000 * 1);
}
@ -186,13 +182,12 @@ const Memo: React.FC<Props> = (props: Props) => {
editorStateService.setEditMemoWithId(memo.id);
};
const timeStr = user?.setting.memoSortOption === "created_ts" ? createdAtStr : `${t("common.update-on")} ${updatedAtStr}`;
return (
<div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned ? "pinned" : ""}`} ref={memoContainerRef}>
<div className="memo-top-wrapper">
<div className="status-text-container">
<span className="time-text" onClick={handleShowMemoStoryDialog}>
{timeStr}
{displayTimeStr}
</span>
{memo.visibility !== "PRIVATE" && !isVisitorMode && (
<span className={`status-text ${memo.visibility.toLocaleLowerCase()}`}>{memo.visibility}</span>

View File

@ -174,7 +174,6 @@ const MemoEditor: React.FC = () => {
});
locationService.clearQuery();
}
locationService.setUpdatedFlag();
} catch (error: any) {
console.error(error);
toastHelper.error(error.response.data.message);

View File

@ -12,8 +12,7 @@ import "../less/memo-list.less";
const MemoList = () => {
const { t } = useTranslation();
const query = useAppSelector((state) => state.location.query);
const updatedTime = useAppSelector((state) => state.location.updatedTime);
const user = useAppSelector((state) => state.user.user);
const memoSortOption = useAppSelector((state) => state.user.user?.setting.memoSortOption);
const { memos, isFetching } = useAppSelector((state) => state.memo);
const { tag: tagQuery, duration, type: memoType, text: textQuery, shortcutId } = query ?? {};
@ -72,8 +71,8 @@ const MemoList = () => {
const pinnedMemos = shownMemos.filter((m) => m.pinned);
const unpinnedMemos = shownMemos.filter((m) => !m.pinned);
const memoSorting = (m1: Memo, m2: Memo) => {
return user?.setting.memoSortOption === "created_ts" ? m2.createdTs - m1.createdTs : m2.updatedTs - m1.updatedTs;
const memoSorting = (mi: Memo, mj: Memo) => {
return mj.displayTs - mi.displayTs;
};
pinnedMemos.sort(memoSorting);
unpinnedMemos.sort(memoSorting);
@ -89,19 +88,19 @@ const MemoList = () => {
console.error(error);
toastHelper.error(error.response.data.message);
});
}, [updatedTime]);
}, [memoSortOption]);
useEffect(() => {
const pageWrapper = document.body.querySelector(".page-wrapper");
if (pageWrapper) {
pageWrapper.scrollTo(0, 0);
}
}, [query, updatedTime]);
}, [query]);
return (
<div className="memo-list-container">
{sortedMemos.map((memo) => (
<Memo key={`${memo.id}-${memo.createdTs}-${memo.updatedTs}`} memo={memo} />
<Memo key={`${memo.id}-${memo.displayTs}`} memo={memo} />
))}
{isFetching ? (
<div className="status-text-container fetching-tip">

View File

@ -1,7 +1,6 @@
import { stringify } from "qs";
import store from "../store";
import { setQuery, setPathname, setUpdatedTime, Query, updateStateWithLocation } from "../store/modules/location";
import { getTimeStampByDate } from "../helpers/utils";
import { setQuery, setPathname, Query, updateStateWithLocation } from "../store/modules/location";
const updateLocationUrl = (method: "replace" | "push" = "replace") => {
const { query, pathname, hash } = store.getState().location;
@ -113,10 +112,6 @@ const locationService = {
);
updateLocationUrl();
},
setUpdatedFlag: () => {
store.dispatch(setUpdatedTime(getTimeStampByDate(new Date()).toString()));
},
};
export default locationService;

View File

@ -8,6 +8,7 @@ const convertResponseModelMemo = (memo: Memo): Memo => {
...memo,
createdTs: memo.createdTs * 1000,
updatedTs: memo.updatedTs * 1000,
displayTs: memo.displayTs * 1000,
};
};

View File

@ -17,7 +17,6 @@ interface State {
pathname: string;
hash: string;
query: Query;
updatedTime: string;
}
const getValidPathname = (pathname: string): string => {
@ -36,7 +35,6 @@ const getStateFromLocation = () => {
pathname: getValidPathname(pathname),
hash: hash,
query: {},
updatedTime: "",
};
if (search !== "") {
@ -88,15 +86,9 @@ const locationSlice = createSlice({
},
};
},
setUpdatedTime: (state, action: PayloadAction<string>) => {
return {
...state,
updatedTime: action.payload,
};
},
},
});
export const { setPathname, setQuery, setUpdatedTime, updateStateWithLocation } = locationSlice.actions;
export const { setPathname, setQuery, updateStateWithLocation } = locationSlice.actions;
export default locationSlice.reducer;

View File

@ -18,13 +18,13 @@ const memoSlice = createSlice({
setMemos: (state, action: PayloadAction<Memo[]>) => {
return {
...state,
memos: action.payload.filter((m) => m.rowStatus === "NORMAL").sort((a, b) => b.createdTs - a.createdTs),
memos: action.payload.filter((m) => m.rowStatus === "NORMAL"),
};
},
createMemo: (state, action: PayloadAction<Memo>) => {
return {
...state,
memos: state.memos.concat(action.payload).sort((a, b) => b.createdTs - a.createdTs),
memos: state.memos.concat(action.payload),
};
},
patchMemo: (state, action: PayloadAction<Partial<Memo>>) => {

View File

@ -13,6 +13,7 @@ interface Memo {
content: string;
visibility: Visibility;
pinned: boolean;
displayTs: TimeStamp;
creator: User;
resourceList: Resource[];