aiden
/
memos
mirror of https://github.com/usememos/memos
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: fix missing observer

Browse Source
pull/4734/head
Johnny 5 months ago
parent fd99e10962
commit e6fe088ac0
19 changed files with 146 additions and 131 deletions
Show Stats Download Patch File Download Diff File

185
web/src/components/ActivityCalendar/ActivityCalendar.tsx
Unescape Escape View File

@ -1,5 +1,6 @@
import { Tooltip } from "@mui/joy";
import dayjs from "dayjs";
import { observer } from "mobx-react-lite";
import { memo, useMemo } from "react";
import { workspaceStore } from "@/store/v2";
import type { ActivityCalendarProps, CalendarDay } from "@/types/statistics";
@ -67,104 +68,106 @@ const CalendarCell = memo(
CalendarCell.displayName = "CalendarCell";
export const ActivityCalendar = memo((props: ActivityCalendarProps) => {
const t = useTranslate();
const { month: monthStr, data, onClick } = props;
const weekStartDayOffset = workspaceStore.state.generalSetting.weekStartDayOffset;
export const ActivityCalendar = memo(
observer((props: ActivityCalendarProps) => {
const t = useTranslate();
const { month: monthStr, data, onClick } = props;
const weekStartDayOffset = workspaceStore.state.generalSetting.weekStartDayOffset;
const { days, weekDays, maxCount } = useMemo(() => {
const yearValue = dayjs(monthStr).toDate().getFullYear();
const monthValue = dayjs(monthStr).toDate().getMonth();
const dayInMonth = new Date(yearValue, monthValue + 1, 0).getDate();
const firstDay = (((new Date(yearValue, monthValue, 1).getDay() - weekStartDayOffset) % 7) + 7) % 7;
const lastDay = new Date(yearValue, monthValue, dayInMonth).getDay() - weekStartDayOffset;
const prevMonthDays = new Date(yearValue, monthValue, 0).getDate();
const WEEK_DAYS = [t("days.sun"), t("days.mon"), t("days.tue"), t("days.wed"), t("days.thu"), t("days.fri"), t("days.sat")];
const weekDaysOrdered = WEEK_DAYS.slice(weekStartDayOffset).concat(WEEK_DAYS.slice(0, weekStartDayOffset));
const daysArray: CalendarDay[] = [];
// Previous month's days
for (let i = firstDay - 1; i >= 0; i--) {
daysArray.push({ day: prevMonthDays - i, isCurrentMonth: false });
}
// Current month's days
for (let i = 1; i <= dayInMonth; i++) {
const date = dayjs(`${yearValue}-${monthValue + 1}-${i}`).format("YYYY-MM-DD");
daysArray.push({ day: i, isCurrentMonth: true, date });
}
// Next month's days
for (let i = 1; i < 7 - lastDay; i++) {
daysArray.push({ day: i, isCurrentMonth: false });
}
const maxCountValue = Math.max(...Object.values(data), 1);
return {
year: yearValue,
month: monthValue,
days: daysArray,
weekDays: weekDaysOrdered,
maxCount: maxCountValue,
};
}, [monthStr, data, weekStartDayOffset, t]);
const today = useMemo(() => dayjs().format("YYYY-MM-DD"), []);
const selectedDateFormatted = useMemo(() => dayjs(props.selectedDate).format("YYYY-MM-DD"), [props.selectedDate]);
const { days, weekDays, maxCount } = useMemo(() => {
const yearValue = dayjs(monthStr).toDate().getFullYear();
const monthValue = dayjs(monthStr).toDate().getMonth();
const dayInMonth = new Date(yearValue, monthValue + 1, 0).getDate();
const firstDay = (((new Date(yearValue, monthValue, 1).getDay() - weekStartDayOffset) % 7) + 7) % 7;
const lastDay = new Date(yearValue, monthValue, dayInMonth).getDay() - weekStartDayOffset;
const prevMonthDays = new Date(yearValue, monthValue, 0).getDate();
const WEEK_DAYS = [t("days.sun"), t("days.mon"), t("days.tue"), t("days.wed"), t("days.thu"), t("days.fri"), t("days.sat")];
const weekDaysOrdered = WEEK_DAYS.slice(weekStartDayOffset).concat(WEEK_DAYS.slice(0, weekStartDayOffset));
const daysArray: CalendarDay[] = [];
// Previous month's days
for (let i = firstDay - 1; i >= 0; i--) {
daysArray.push({ day: prevMonthDays - i, isCurrentMonth: false });
}
// Current month's days
for (let i = 1; i <= dayInMonth; i++) {
const date = dayjs(`${yearValue}-${monthValue + 1}-${i}`).format("YYYY-MM-DD");
daysArray.push({ day: i, isCurrentMonth: true, date });
}
// Next month's days
for (let i = 1; i < 7 - lastDay; i++) {
daysArray.push({ day: i, isCurrentMonth: false });
}
return (
<div className={cn("w-full h-auto shrink-0 grid grid-cols-7 grid-flow-row gap-1")}>
{weekDays.map((day, index) => (
<div key={index} className={cn("w-6 h-5 text-xs flex justify-center items-center cursor-default opacity-60")}>
{day}
</div>
))}
{days.map((dayInfo, index) => {
if (!dayInfo.isCurrentMonth) {
return (
<CalendarCell
key={`prev-next-${index}`}
dayInfo={dayInfo}
count={0}
maxCount={maxCount}
isToday={false}
isSelected={false}
tooltipText=""
/>
);
}
const date = dayInfo.date!;
const count = data[date] || 0;
const isToday = today === date;
const isSelected = selectedDateFormatted === date;
const tooltipText =
count === 0
? date
: t("memo.count-memos-in-date", {
count: count,
memos: count === 1 ? t("common.memo") : t("common.memos"),
date: date,
}).toLowerCase();
const maxCountValue = Math.max(...Object.values(data), 1);
return {
year: yearValue,
month: monthValue,
days: daysArray,
weekDays: weekDaysOrdered,
maxCount: maxCountValue,
};
}, [monthStr, data, weekStartDayOffset, t]);
const today = useMemo(() => dayjs().format("YYYY-MM-DD"), []);
const selectedDateFormatted = useMemo(() => dayjs(props.selectedDate).format("YYYY-MM-DD"), [props.selectedDate]);
return (
<div className={cn("w-full h-auto shrink-0 grid grid-cols-7 grid-flow-row gap-1")}>
{weekDays.map((day, index) => (
<div key={index} className={cn("w-6 h-5 text-xs flex justify-center items-center cursor-default opacity-60")}>
{day}
</div>
))}
{days.map((dayInfo, index) => {
if (!dayInfo.isCurrentMonth) {
return (
<CalendarCell
key={`prev-next-${index}`}
key={date}
dayInfo={dayInfo}
count={0}
count={count}
maxCount={maxCount}
isToday={false}
isSelected={false}
tooltipText=""
isToday={isToday}
isSelected={isSelected}
onClick={() => onClick?.(date)}
tooltipText={tooltipText}
/>
);
}
const date = dayInfo.date!;
const count = data[date] || 0;
const isToday = today === date;
const isSelected = selectedDateFormatted === date;
const tooltipText =
count === 0
? date
: t("memo.count-memos-in-date", {
count: count,
memos: count === 1 ? t("common.memo") : t("common.memos"),
date: date,
}).toLowerCase();
return (
<CalendarCell
key={date}
dayInfo={dayInfo}
count={count}
maxCount={maxCount}
isToday={isToday}
isSelected={isSelected}
onClick={() => onClick?.(date)}
tooltipText={tooltipText}
/>
);
})}
</div>
);
});
})}
</div>
);
}),
);
ActivityCalendar.displayName = "ActivityCalendar";

5
web/src/components/BrandBanner.tsx
Unescape Escape View File

@ -1,3 +1,4 @@
import { observer } from "mobx-react-lite";
import { workspaceStore } from "@/store/v2";
import { cn } from "@/utils";
import UserAvatar from "./UserAvatar";
@ -7,7 +8,7 @@ interface Props {
collapsed?: boolean;
}
const BrandBanner = (props: Props) => {
const BrandBanner = observer((props: Props) => {
const { collapsed } = props;
const workspaceGeneralSetting = workspaceStore.state.generalSetting;
const title = workspaceGeneralSetting.customProfile?.title || "Memos";
@ -21,6 +22,6 @@ const BrandBanner = (props: Props) => {
</div>
</div>
);
};
});
export default BrandBanner;

3
web/src/components/MemoActionMenu.tsx
Unescape Escape View File

@ -16,8 +16,7 @@ import toast from "react-hot-toast";
import { useLocation } from "react-router-dom";
import { markdownServiceClient } from "@/grpcweb";
import useNavigateTo from "@/hooks/useNavigateTo";
import { memoStore } from "@/store/v2";
import { userStore } from "@/store/v2";
import { memoStore, userStore } from "@/store/v2";
import { State } from "@/types/proto/api/v1/common";
import { NodeType } from "@/types/proto/api/v1/markdown_service";
import { Memo } from "@/types/proto/api/v1/memo_service";

9
web/src/components/MemoContent/Tag.tsx
Unescape Escape View File

@ -1,9 +1,10 @@
import { observer } from "mobx-react-lite";
import { useContext } from "react";
import { useLocation } from "react-router-dom";
import useNavigateTo from "@/hooks/useNavigateTo";
import { Routes } from "@/router";
import memoFilterStore, { MemoFilter } from "@/store/v2/memoFilter";
import { stringifyFilters } from "@/store/v2/memoFilter";
import { memoFilterStore } from "@/store/v2";
import { stringifyFilters, MemoFilter } from "@/store/v2/memoFilter";
import { cn } from "@/utils";
import { RendererContext } from "./types";
@ -11,7 +12,7 @@ interface Props {
content: string;
}
const Tag: React.FC<Props> = ({ content }: Props) => {
const Tag = observer(({ content }: Props) => {
const context = useContext(RendererContext);
const location = useLocation();
const navigateTo = useNavigateTo();
@ -50,6 +51,6 @@ const Tag: React.FC<Props> = ({ content }: Props) => {
#{content}
</span>
);
};
});
export default Tag;

7
web/src/components/MemoFilters.tsx
Unescape Escape View File

@ -1,12 +1,13 @@
import { isEqual } from "lodash-es";
import { CalendarIcon, CheckCircleIcon, CodeIcon, EyeIcon, HashIcon, LinkIcon, BookmarkIcon, SearchIcon, XIcon } from "lucide-react";
import { observer } from "mobx-react-lite";
import { useEffect } from "react";
import { useSearchParams } from "react-router-dom";
import memoFilterStore from "@/store/v2/memoFilter";
import { memoFilterStore } from "@/store/v2";
import { FilterFactor, getMemoFilterKey, MemoFilter, stringifyFilters } from "@/store/v2/memoFilter";
import { useTranslate } from "@/utils/i18n";
const MemoFilters = () => {
const MemoFilters = observer(() => {
const t = useTranslate();
const [, setSearchParams] = useSearchParams();
const filters = memoFilterStore.filters;
@ -60,7 +61,7 @@ const MemoFilters = () => {
))}
</div>
);
};
});
const FactorIcon = ({ factor, className }: { factor: FilterFactor; className?: string }) => {
const iconMap = {

5
web/src/components/MemoReactionListView.tsx
Unescape Escape View File

@ -1,4 +1,5 @@
import { uniq } from "lodash-es";
import { observer } from "mobx-react-lite";
import { memo, useEffect, useState } from "react";
import useCurrentUser from "@/hooks/useCurrentUser";
import { userStore } from "@/store/v2";
@ -14,7 +15,7 @@ interface Props {
reactions: Reaction[];
}
const MemoReactionListView = (props: Props) => {
const MemoReactionListView = observer((props: Props) => {
const { memo, reactions } = props;
const currentUser = useCurrentUser();
const [reactionGroup, setReactionGroup] = useState<Map<string, User[]>>(new Map());
@ -43,6 +44,6 @@ const MemoReactionListView = (props: Props) => {
</div>
)
);
};
});
export default memo(MemoReactionListView);

3
web/src/components/MemoView.tsx
Unescape Escape View File

@ -6,8 +6,7 @@ import { Link, useLocation } from "react-router-dom";
import useAsyncEffect from "@/hooks/useAsyncEffect";
import useCurrentUser from "@/hooks/useCurrentUser";
import useNavigateTo from "@/hooks/useNavigateTo";
import { memoStore } from "@/store/v2";
import { userStore, workspaceStore } from "@/store/v2";
import { memoStore, userStore, workspaceStore } from "@/store/v2";
import { State } from "@/types/proto/api/v1/common";
import { Memo, MemoRelation_Type, Visibility } from "@/types/proto/api/v1/memo_service";
import { cn } from "@/utils";

3
web/src/components/ReactionSelector.tsx
Unescape Escape View File

@ -5,8 +5,7 @@ import { useRef, useState } from "react";
import useClickAway from "react-use/lib/useClickAway";
import { memoServiceClient } from "@/grpcweb";
import useCurrentUser from "@/hooks/useCurrentUser";
import { memoStore } from "@/store/v2";
import { workspaceStore } from "@/store/v2";
import { memoStore, workspaceStore } from "@/store/v2";
import { Memo } from "@/types/proto/api/v1/memo_service";
import { cn } from "@/utils";

7
web/src/components/SearchBar.tsx
Unescape Escape View File

@ -1,10 +1,11 @@
import { SearchIcon } from "lucide-react";
import { observer } from "mobx-react-lite";
import { useState } from "react";
import memoFilterStore from "@/store/v2/memoFilter";
import { memoFilterStore } from "@/store/v2";
import { useTranslate } from "@/utils/i18n";
import MemoDisplaySettingMenu from "./MemoDisplaySettingMenu";
const SearchBar = () => {
const SearchBar = observer(() => {
const t = useTranslate();
const [queryText, setQueryText] = useState("");
@ -41,6 +42,6 @@ const SearchBar = () => {
<MemoDisplaySettingMenu className="absolute right-2 top-2" />
</div>
);
};
});
export default SearchBar;

5
web/src/components/Settings/MemberSection.tsx
Unescape Escape View File

@ -2,6 +2,7 @@ import { Dropdown, Menu, MenuButton, MenuItem, Radio, RadioGroup } from "@mui/jo
import { Button, Input } from "@usememos/mui";
import { sortBy } from "lodash-es";
import { MoreVerticalIcon } from "lucide-react";
import { observer } from "mobx-react-lite";
import React, { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { userServiceClient } from "@/grpcweb";
@ -16,7 +17,7 @@ interface LocalState {
creatingUser: User;
}
const MemberSection = () => {
const MemberSection = observer(() => {
const t = useTranslate();
const currentUser = useCurrentUser();
const [state, setState] = useState<LocalState>({
@ -239,6 +240,6 @@ const MemberSection = () => {
</div>
</div>
);
};
});
export default MemberSection;

5
web/src/components/Settings/MemoRelatedSettings.tsx
Unescape Escape View File

@ -2,6 +2,7 @@ import { Switch, Chip, ChipDelete } from "@mui/joy";
import { Button, Input } from "@usememos/mui";
import { isEqual, uniq } from "lodash-es";
import { CheckIcon } from "lucide-react";
import { observer } from "mobx-react-lite";
import { useState } from "react";
import { toast } from "react-hot-toast";
import { workspaceSettingNamePrefix } from "@/store/common";
@ -10,7 +11,7 @@ import { WorkspaceSettingKey } from "@/store/v2/workspace";
import { WorkspaceMemoRelatedSetting } from "@/types/proto/api/v1/workspace_setting_service";
import { useTranslate } from "@/utils/i18n";
const MemoRelatedSettings = () => {
const MemoRelatedSettings = observer(() => {
const t = useTranslate();
const [originalSetting, setOriginalSetting] = useState<WorkspaceMemoRelatedSetting>(workspaceStore.state.memoRelatedSetting);
const [memoRelatedSetting, setMemoRelatedSetting] = useState<WorkspaceMemoRelatedSetting>(originalSetting);
@ -197,6 +198,6 @@ const MemoRelatedSettings = () => {
</div>
</div>
);
};
});
export default MemoRelatedSettings;

5
web/src/components/Settings/StorageSection.tsx
Unescape Escape View File

@ -2,6 +2,7 @@ import { Divider, List, ListItem, Radio, RadioGroup, Tooltip, Switch } from "@mu
import { Button, Input } from "@usememos/mui";
import { isEqual } from "lodash-es";
import { HelpCircleIcon } from "lucide-react";
import { observer } from "mobx-react-lite";
import React, { useEffect, useMemo, useState } from "react";
import { toast } from "react-hot-toast";
import { Link } from "react-router-dom";
@ -15,7 +16,7 @@ import {
} from "@/types/proto/api/v1/workspace_setting_service";
import { useTranslate } from "@/utils/i18n";
const StorageSection = () => {
const StorageSection = observer(() => {
const t = useTranslate();
const [workspaceStorageSetting, setWorkspaceStorageSetting] = useState<WorkspaceStorageSetting>(
WorkspaceStorageSetting.fromPartial(workspaceStore.getWorkspaceSettingByKey(WorkspaceSettingKey.STORAGE)?.storageSetting || {}),
@ -223,6 +224,6 @@ const StorageSection = () => {
</div>
</div>
);
};
});
export default StorageSection;

5
web/src/components/TagTree.tsx
Unescape Escape View File

@ -1,4 +1,5 @@
import { ChevronRightIcon, HashIcon } from "lucide-react";
import { observer } from "mobx-react-lite";
import { useEffect, useState } from "react";
import useToggle from "react-use/lib/useToggle";
import memoFilterStore, { MemoFilter } from "@/store/v2/memoFilter";
@ -83,7 +84,7 @@ interface TagItemContainerProps {
tag: Tag;
}
const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContainerProps) => {
const TagItemContainer = observer((props: TagItemContainerProps) => {
const { tag } = props;
const tagFilters = memoFilterStore.getFiltersByFactor("tagSearch");
const isActive = tagFilters.some((f: MemoFilter) => f.value === tag.text);
@ -145,6 +146,6 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
) : null}
</>
);
};
});
export default TagTree;

5
web/src/pages/AdminSignIn.tsx
Unescape Escape View File

@ -1,8 +1,9 @@
import { observer } from "mobx-react-lite";
import AuthFooter from "@/components/AuthFooter";
import PasswordSignInForm from "@/components/PasswordSignInForm";
import { workspaceStore } from "@/store/v2";
const AdminSignIn = () => {
const AdminSignIn = observer(() => {
const workspaceGeneralSetting = workspaceStore.state.generalSetting;
return (
@ -20,6 +21,6 @@ const AdminSignIn = () => {
<AuthFooter />
</div>
);
};
});
export default AdminSignIn;

5
web/src/pages/Archived.tsx
Unescape Escape View File

@ -1,4 +1,5 @@
import dayjs from "dayjs";
import { observer } from "mobx-react-lite";
import { useMemo } from "react";
import MemoView from "@/components/MemoView";
import PagedMemoList from "@/components/PagedMemoList";
@ -8,7 +9,7 @@ import memoFilterStore from "@/store/v2/memoFilter";
import { Direction, State } from "@/types/proto/api/v1/common";
import { Memo } from "@/types/proto/api/v1/memo_service";
const Archived = () => {
const Archived = observer(() => {
const user = useCurrentUser();
const memoListFilter = useMemo(() => {
@ -49,6 +50,6 @@ const Archived = () => {
oldFilter={memoListFilter}
/>
);
};
});
export default Archived;

5
web/src/pages/AuthCallback.tsx
Unescape Escape View File

@ -1,5 +1,6 @@
import { last } from "lodash-es";
import { LoaderIcon } from "lucide-react";
import { observer } from "mobx-react-lite";
import { ClientError } from "nice-grpc-web";
import { useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom";
@ -13,7 +14,7 @@ interface State {
errorMessage: string;
}
const AuthCallback = () => {
const AuthCallback = observer(() => {
const navigateTo = useNavigateTo();
const [searchParams] = useSearchParams();
const [state, setState] = useState<State>({
@ -77,6 +78,6 @@ const AuthCallback = () => {
)}
</div>
);
};
});
export default AuthCallback;

5
web/src/pages/Explore.tsx
Unescape Escape View File

@ -1,4 +1,5 @@
import dayjs from "dayjs";
import { observer } from "mobx-react-lite";
import { useMemo } from "react";
import MemoView from "@/components/MemoView";
import PagedMemoList from "@/components/PagedMemoList";
@ -8,7 +9,7 @@ import memoFilterStore from "@/store/v2/memoFilter";
import { Direction, State } from "@/types/proto/api/v1/common";
import { Memo } from "@/types/proto/api/v1/memo_service";
const Explore = () => {
const Explore = observer(() => {
const user = useCurrentUser();
const memoListFilter = useMemo(() => {
@ -59,6 +60,6 @@ const Explore = () => {
oldFilter={memoListFilter}
/>
);
};
});
export default Explore;

5
web/src/pages/SignIn.tsx
Unescape Escape View File

@ -1,5 +1,6 @@
import { Divider } from "@mui/joy";
import { Button } from "@usememos/mui";
import { observer } from "mobx-react-lite";
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { Link } from "react-router-dom";
@ -14,7 +15,7 @@ import { workspaceStore } from "@/store/v2";
import { IdentityProvider, IdentityProvider_Type } from "@/types/proto/api/v1/idp_service";
import { useTranslate } from "@/utils/i18n";
const SignIn = () => {
const SignIn = observer(() => {
const t = useTranslate();
const currentUser = useCurrentUser();
const [identityProviderList, setIdentityProviderList] = useState<IdentityProvider[]>([]);
@ -98,6 +99,6 @@ const SignIn = () => {
<AuthFooter />
</div>
);
};
});
export default SignIn;

5
web/src/pages/SignUp.tsx
Unescape Escape View File

@ -1,5 +1,6 @@
import { Button, Input } from "@usememos/mui";
import { LoaderIcon } from "lucide-react";
import { observer } from "mobx-react-lite";
import { ClientError } from "nice-grpc-web";
import { useState } from "react";
import { toast } from "react-hot-toast";
@ -12,7 +13,7 @@ import { workspaceStore } from "@/store/v2";
import { initialUserStore } from "@/store/v2/user";
import { useTranslate } from "@/utils/i18n";
const SignUp = () => {
const SignUp = observer(() => {
const t = useTranslate();
const navigateTo = useNavigateTo();
const actionBtnLoadingState = useLoading(false);
@ -135,6 +136,6 @@ const SignUp = () => {
<AuthFooter />
</div>
);
};
});
export default SignUp;

Write Preview
Loading…
Cancel
Save