chore: fix some typos (#587)

api/memo.go

@@ -8,8 +8,8 @@ const (
 	Public Visibility = "PUBLIC"
 	// Protected is the PROTECTED visibility.
 	Protected Visibility = "PROTECTED"
-	// Privite is the PRIVATE visibility.
-	Privite Visibility = "PRIVATE"
+	// Private is the PRIVATE visibility.
+	Private Visibility = "PRIVATE"
 )
 
 func (e Visibility) String() string {
@@ -18,7 +18,7 @@ func (e Visibility) String() string {
 		return "PUBLIC"
 	case Protected:
 		return "PROTECTED"
-	case Privite:
+	case Private:
 		return "PRIVATE"
 	}
 	return "PRIVATE"

api/user_setting.go

@@ -31,7 +31,7 @@ func (key UserSettingKey) String() string {
 
 var (
 	UserSettingLocaleValue                 = []string{"en", "zh", "vi", "fr"}
-	UserSettingMemoVisibilityValue         = []Visibility{Privite, Protected, Public}
+	UserSettingMemoVisibilityValue         = []Visibility{Private, Protected, Public}
 	UserSettingEditorFontStyleValue        = []string{"normal", "mono"}
 	UserSettingMemoDisplayTsOptionKeyValue = []string{"created_ts", "updated_ts"}
 )
@@ -68,7 +68,7 @@ func (upsert UserSettingUpsert) Validate() error {
 			return fmt.Errorf("invalid user setting locale value")
 		}
 	} else if upsert.Key == UserSettingMemoVisibilityKey {
-		memoVisibilityValue := Privite
+		memoVisibilityValue := Private
 		err := json.Unmarshal([]byte(upsert.Value), &memoVisibilityValue)
 		if err != nil {
 			return fmt.Errorf("failed to unmarshal user setting memo visibility value")

server/memo.go

@@ -45,7 +45,7 @@ func (s *Server) registerMemoRoutes(g *echo.Group) {
 			}
 
 			if userMemoVisibilitySetting != nil {
-				memoVisibility := api.Privite
+				memoVisibility := api.Private
 				err := json.Unmarshal([]byte(userMemoVisibilitySetting.Value), &memoVisibility)
 				if err != nil {
 					return echo.NewHTTPError(http.StatusInternalServerError, "Failed to unmarshal user setting value").SetInternal(err)
@@ -53,7 +53,7 @@ func (s *Server) registerMemoRoutes(g *echo.Group) {
 				memoCreate.Visibility = memoVisibility
 			} else {
 				// Private is the default memo visibility.
-				memoCreate.Visibility = api.Privite
+				memoCreate.Visibility = api.Private
 			}
 		}
 
@@ -176,10 +176,10 @@ func (s *Server) registerMemoRoutes(g *echo.Group) {
 			contentSearch := "#" + tag + " "
 			memoFind.ContentSearch = &contentSearch
 		}
-		visibilitListStr := c.QueryParam("visibility")
-		if visibilitListStr != "" {
+		visibilityListStr := c.QueryParam("visibility")
+		if visibilityListStr != "" {
 			visibilityList := []api.Visibility{}
-			for _, visibility := range strings.Split(visibilitListStr, ",") {
+			for _, visibility := range strings.Split(visibilityListStr, ",") {
 				visibilityList = append(visibilityList, api.Visibility(visibility))
 			}
 			memoFind.VisibilityList = visibilityList
@@ -271,7 +271,7 @@ func (s *Server) registerMemoRoutes(g *echo.Group) {
 			if *memoFind.CreatorID != currentUserID {
 				memoFind.VisibilityList = []api.Visibility{api.Public, api.Protected}
 			} else {
-				memoFind.VisibilityList = []api.Visibility{api.Public, api.Protected, api.Privite}
+				memoFind.VisibilityList = []api.Visibility{api.Public, api.Protected, api.Private}
 			}
 		}
 
@@ -313,10 +313,10 @@ func (s *Server) registerMemoRoutes(g *echo.Group) {
 			contentSearch := "#" + tag + " "
 			memoFind.ContentSearch = &contentSearch
 		}
-		visibilitListStr := c.QueryParam("visibility")
-		if visibilitListStr != "" {
+		visibilityListStr := c.QueryParam("visibility")
+		if visibilityListStr != "" {
 			visibilityList := []api.Visibility{}
-			for _, visibility := range strings.Split(visibilitListStr, ",") {
+			for _, visibility := range strings.Split(visibilityListStr, ",") {
 				visibilityList = append(visibilityList, api.Visibility(visibility))
 			}
 			memoFind.VisibilityList = visibilityList
@@ -372,7 +372,7 @@ func (s *Server) registerMemoRoutes(g *echo.Group) {
 		}
 
 		userID, ok := c.Get(getUserIDContextKey()).(int)
-		if memo.Visibility == api.Privite {
+		if memo.Visibility == api.Private {
 			if !ok || memo.CreatorID != userID {
 				return echo.NewHTTPError(http.StatusForbidden, "this memo is private only")
 			}

server/resource.go

@@ -93,13 +93,13 @@ func (s *Server) registerResourceRoutes(g *echo.Group) {
 		}
 
 		for _, resource := range list {
-			memoResoureceList, err := s.Store.FindMemoResourceList(ctx, &api.MemoResourceFind{
+			memoResourceList, err := s.Store.FindMemoResourceList(ctx, &api.MemoResourceFind{
 				ResourceID: &resource.ID,
 			})
 			if err != nil {
 				return echo.NewHTTPError(http.StatusInternalServerError, "Failed to find memo resource list").SetInternal(err)
 			}
-			resource.LinkedMemoAmount = len(memoResoureceList)
+			resource.LinkedMemoAmount = len(memoResourceList)
 		}
 
 		c.Response().Header().Set(echo.HeaderContentType, echo.MIMEApplicationJSONCharsetUTF8)

store/store.go

@@ -49,7 +49,7 @@ func (s *Store) Vacuum(ctx context.Context) error {
 	return nil
 }
 
-// Exec vacuum records in a transcation.
+// Exec vacuum records in a transaction.
 func vacuum(ctx context.Context, tx *sql.Tx) error {
 	if err := vacuumMemo(ctx, tx); err != nil {
 		return err

web/src/components/AboutSiteDialog.tsx

@@ -30,7 +30,7 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
         <img className="logo-img" src="/logo-full.webp" alt="" />
         <p>{t("slogan")}</p>
         <br />
-        <div className="addtion-info-container">
+        <div className="addition-info-container">
           <GitHubBadge />
           <>
             {t("common.version")}:

web/src/components/CreateShortcutDialog.tsx

@@ -192,7 +192,7 @@ const MemoFilterInputer: React.FC<MemoFilterInputerProps> = (props: MemoFilterIn
     if (["AND", "OR"].includes(value)) {
       handleFilterChange(index, {
         ...filter,
-        relation: value as MemoFilterRalation,
+        relation: value as MemoFilterRelation,
       });
     }
   };

web/src/components/MemoEditor.tsx

@@ -53,7 +53,7 @@ const MemoEditor = () => {
   const [allowSave, setAllowSave] = useState<boolean>(false);
   const prevGlobalStateRef = useRef(editorState);
   const editorRef = useRef<EditorRefActions>(null);
-  const tagSeletorRef = useRef<HTMLDivElement>(null);
+  const tagSelectorRef = useRef<HTMLDivElement>(null);
   const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
     return {
       value: item.value,
@@ -337,8 +337,8 @@ const MemoEditor = () => {
     });
   };
 
-  const handleTagSeletorClick = useCallback((event: React.MouseEvent) => {
-    if (tagSeletorRef.current !== event.target && tagSeletorRef.current?.contains(event.target as Node)) {
+  const handleTagSelectorClick = useCallback((event: React.MouseEvent) => {
+    if (tagSelectorRef.current !== event.target && tagSelectorRef.current?.contains(event.target as Node)) {
       editorRef.current?.insertText(`#${(event.target as HTMLElement).textContent} ` ?? "");
       handleEditorFocus();
     }
@@ -415,7 +415,7 @@ const MemoEditor = () => {
         <div className="common-tools-container">
           <div className="action-btn tag-action">
             <Icon.Hash className="icon-img" />
-            <div ref={tagSeletorRef} className="tag-list" onClick={handleTagSeletorClick}>
+            <div ref={tagSelectorRef} className="tag-list" onClick={handleTagSelectorClick}>
               {tags.length > 0 ? (
                 tags.map((tag) => {
                   return (

web/src/components/MemoResources.tsx

@@ -24,7 +24,7 @@ const MemoResources: React.FC<Props> = (props: Props) => {
   const availableResourceList = resourceList.filter((resource) => resource.type.startsWith("image") || resource.type.startsWith("video"));
   const otherResourceList = resourceList.filter((resource) => !availableResourceList.includes(resource));
 
-  const handlPreviewBtnClick = (resource: Resource) => {
+  const handlePreviewBtnClick = (resource: Resource) => {
     const resourceUrl = `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
     window.open(resourceUrl);
   };
@@ -54,7 +54,7 @@ const MemoResources: React.FC<Props> = (props: Props) => {
       <div className="other-resource-wrapper">
         {otherResourceList.map((resource) => {
           return (
-            <div className="other-resource-container" key={resource.id} onClick={() => handlPreviewBtnClick(resource)}>
+            <div className="other-resource-container" key={resource.id} onClick={() => handlePreviewBtnClick(resource)}>
               <Icon.FileText className="icon-img" />
               <span className="name-text">{resource.filename}</span>
             </div>

web/src/components/MemosHeader.tsx

@@ -3,7 +3,7 @@ import { memoService, shortcutService } from "../services";
 import { useAppSelector } from "../store";
 import Icon from "./Icon";
 import SearchBar from "./SearchBar";
-import { toggleSiderbar } from "./Sidebar";
+import { toggleSidebar } from "./Sidebar";
 import "../less/memos-header.less";
 
 let prevRequestTimestamp = Date.now();
@@ -38,7 +38,7 @@ const MemosHeader = () => {
   return (
     <div className="section-header-container memos-header-container">
       <div className="title-container">
-        <div className="action-btn" onClick={() => toggleSiderbar(true)}>
+        <div className="action-btn" onClick={() => toggleSidebar(true)}>
           <Icon.Menu className="icon-img" />
         </div>
         <span className="title-text" onClick={handleTitleTextClick}>

web/src/components/ResourcesDialog.tsx

@@ -83,15 +83,15 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
     inputEl.click();
   };
 
-  const getResouceUrl = useCallback((resource: Resource) => {
+  const getResourceUrl = useCallback((resource: Resource) => {
     return `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
   }, []);
 
   const handlePreviewBtnClick = (resource: Resource) => {
-    const resourceUrl = getResouceUrl(resource);
+    const resourceUrl = getResourceUrl(resource);
     if (resource.type.startsWith("image")) {
       showPreviewImageDialog(
-        resources.filter((r) => r.type.startsWith("image")).map((r) => getResouceUrl(r)),
+        resources.filter((r) => r.type.startsWith("image")).map((r) => getResourceUrl(r)),
         resources.findIndex((r) => r.id === resource.id)
       );
     } else {

web/src/components/Sidebar.tsx

@@ -17,7 +17,7 @@ const Sidebar = () => {
   const location = useAppSelector((state) => state.location);
 
   useEffect(() => {
-    toggleSiderbar(false);
+    toggleSidebar(false);
   }, [location.query]);
 
   const handleSettingBtnClick = () => {
@@ -26,7 +26,7 @@ const Sidebar = () => {
 
   return (
     <>
-      <div className="mask" onClick={() => toggleSiderbar(false)}></div>
+      <div className="mask" onClick={() => toggleSidebar(false)}></div>
       <aside className="sidebar-wrapper">
         <UserBanner />
         <UsageHeatMap />
@@ -52,7 +52,7 @@ const Sidebar = () => {
   );
 };
 
-export const toggleSiderbar = (show?: boolean) => {
+export const toggleSidebar = (show?: boolean) => {
   const sidebarEl = document.body.querySelector(".sidebar-wrapper") as HTMLDivElement;
   const maskEl = document.body.querySelector(".mask") as HTMLDivElement;
 

web/src/components/Toast.tsx

@@ -14,22 +14,22 @@ type ToastItemProps = {
   type: ToastType;
   content: string;
   duration: number;
-  destory: FunctionType;
+  destroy: FunctionType;
 };
 
 const Toast: React.FC<ToastItemProps> = (props: ToastItemProps) => {
-  const { destory, duration } = props;
+  const { destroy, duration } = props;
 
   useEffect(() => {
     if (duration > 0) {
       setTimeout(() => {
-        destory();
+        destroy();
       }, duration);
     }
   }, []);
 
   return (
-    <div className="toast-container" onClick={destory}>
+    <div className="toast-container" onClick={destroy}>
       <p className="content-text">{props.content}</p>
     </div>
   );
@@ -57,8 +57,8 @@ const initialToastHelper = () => {
     shownToastContainers.push([toast, tempDiv]);
 
     const cbs = {
-      destory: () => {
-        tempDiv.classList.add("destory");
+      destroy: () => {
+        tempDiv.classList.add("destroy");
 
         setTimeout(() => {
           if (!tempDiv.parentElement) {
@@ -77,7 +77,7 @@ const initialToastHelper = () => {
       },
     };
 
-    toast.render(<Toast {...config} destory={cbs.destory} />);
+    toast.render(<Toast {...config} destroy={cbs.destroy} />);
 
     setTimeout(() => {
       tempDiv.classList.add("showup");

web/src/components/UsageHeatMap.tsx

@@ -11,11 +11,11 @@ const tableConfig = {
   height: 7,
 };
 
-const getInitialUsageStat = (usedDaysAmount: number, beginDayTimestemp: number): DailyUsageStat[] => {
+const getInitialUsageStat = (usedDaysAmount: number, beginDayTimestamp: number): DailyUsageStat[] => {
   const initialUsageStat: DailyUsageStat[] = [];
   for (let i = 1; i <= usedDaysAmount; i++) {
     initialUsageStat.push({
-      timestamp: beginDayTimestemp + DAILY_TIMESTAMP * i,
+      timestamp: beginDayTimestamp + DAILY_TIMESTAMP * i,
       count: 0,
     });
   }
@@ -32,19 +32,19 @@ const UsageHeatMap = () => {
   const todayDay = new Date(todayTimeStamp).getDay() + 1;
   const nullCell = new Array(7 - todayDay).fill(0);
   const usedDaysAmount = (tableConfig.width - 1) * tableConfig.height + todayDay;
-  const beginDayTimestemp = todayTimeStamp - usedDaysAmount * DAILY_TIMESTAMP;
+  const beginDayTimestamp = todayTimeStamp - usedDaysAmount * DAILY_TIMESTAMP;
 
   const { memos } = useAppSelector((state) => state.memo);
-  const [allStat, setAllStat] = useState<DailyUsageStat[]>(getInitialUsageStat(usedDaysAmount, beginDayTimestemp));
+  const [allStat, setAllStat] = useState<DailyUsageStat[]>(getInitialUsageStat(usedDaysAmount, beginDayTimestamp));
   const [currentStat, setCurrentStat] = useState<DailyUsageStat | null>(null);
   const containerElRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     getMemoStats(userService.getCurrentUserId())
       .then(({ data: { data } }) => {
-        const newStat: DailyUsageStat[] = getInitialUsageStat(usedDaysAmount, beginDayTimestemp);
+        const newStat: DailyUsageStat[] = getInitialUsageStat(usedDaysAmount, beginDayTimestamp);
         for (const record of data) {
-          const index = (utils.getDateStampByDate(record * 1000) - beginDayTimestemp) / (1000 * 3600 * 24) - 1;
+          const index = (utils.getDateStampByDate(record * 1000) - beginDayTimestamp) / (1000 * 3600 * 24) - 1;
           if (index >= 0) {
             newStat[index].count += 1;
           }

web/src/components/common/DatePicker.tsx

@@ -6,7 +6,7 @@ import "../../less/common/date-picker.less";
 interface DatePickerProps {
   className?: string;
   datestamp: DateStamp;
-  handleDateStampChange: (datastamp: DateStamp) => void;
+  handleDateStampChange: (datestamp: DateStamp) => void;
 }
 
 const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {

web/src/components/common/Selector.tsx

@@ -26,7 +26,7 @@ const Selector: React.FC<Props> = (props: Props) => {
   const { t } = useTranslation();
   const [showSelector, toggleSelectorStatus] = useToggle(false);
 
-  const seletorElRef = useRef<HTMLDivElement>(null);
+  const selectorElRef = useRef<HTMLDivElement>(null);
 
   let currentItem = nullItem;
   for (const d of dataSource) {
@@ -39,7 +39,7 @@ const Selector: React.FC<Props> = (props: Props) => {
   useEffect(() => {
     if (showSelector) {
       const handleClickOutside = (event: MouseEvent) => {
-        if (!seletorElRef.current?.contains(event.target as Node)) {
+        if (!selectorElRef.current?.contains(event.target as Node)) {
           toggleSelectorStatus(false);
         }
       };
@@ -63,7 +63,7 @@ const Selector: React.FC<Props> = (props: Props) => {
   };
 
   return (
-    <div className={`selector-wrapper ${className ?? ""}`} ref={seletorElRef}>
+    <div className={`selector-wrapper ${className ?? ""}`} ref={selectorElRef}>
       <div className={`current-value-container ${showSelector ? "active" : ""}`} onClick={handleCurrentValueClick}>
         <span className="value-text">{currentItem.text}</span>
         <span className="arrow-text">

web/src/hooks/useToggle.ts

@@ -5,7 +5,7 @@ const useToggle = (initialState = false): [boolean, (nextState?: boolean) => voi
   // Initialize the state
   const [state, setState] = useState(initialState);
 
-  // Define and memorize toggler function in case we pass down the comopnent,
+  // Define and memorize toggler function in case we pass down the component,
   // This function change the boolean value to it's opposite value
   const toggle = useCallback((nextState?: boolean) => {
     if (nextState !== undefined) {

web/src/labs/marked/parser/Blockquote.ts

@@ -12,7 +12,7 @@ const renderer = (rawStr: string): string => {
 };
 
 export default {
-  name: "blockqoute",
+  name: "blockquote",
   regex: BLOCKQUOTE_REG,
   renderer,
 };

web/src/less/about-site-dialog.less

@@ -19,7 +19,7 @@
         @apply font-mono mx-1;
       }
 
-      > .addtion-info-container {
+      > .addition-info-container {
         @apply flex flex-row text-sm justify-start items-center;
 
         > .github-badge-container {

web/src/less/home.less

@@ -21,7 +21,7 @@
         background-color: #f6f5f4;
       }
 
-      > .addtion-btn-container {
+      > .addition-btn-container {
         @apply fixed bottom-12 left-1/2 -translate-x-1/2;
 
         > .btn {

web/src/pages/Home.tsx

@@ -48,7 +48,7 @@ function Home() {
           </div>
           <MemoList />
           {userService.isVisitorMode() && (
-            <div className="addtion-btn-container">
+            <div className="addition-btn-container">
               {user ? (
                 <button className="btn" onClick={() => (window.location.href = "/")}>
                   <span className="icon">🏠</span> {t("common.back-to-home")}

web/src/services/userService.ts

@@ -5,7 +5,7 @@ import store from "../store";
 import { setLocale } from "../store/modules/global";
 import { setUser, patchUser, setHost, setOwner } from "../store/modules/user";
 
-const defauleSetting: Setting = {
+const defaultSetting: Setting = {
   locale: "en",
   memoVisibility: "PRIVATE",
   memoDisplayTsOption: "created_ts",
@@ -13,7 +13,7 @@ const defauleSetting: Setting = {
 
 export const convertResponseModelUser = (user: User): User => {
   const setting: Setting = {
-    ...defauleSetting,
+    ...defaultSetting,
   };
 
   if (user.userSettingList) {

web/src/types/filter.d.ts

@@ -1,4 +1,4 @@
-type MemoFilterRalation = "AND" | "OR";
+type MemoFilterRelation = "AND" | "OR";
 
 interface BaseFilter {
   type: FilterType;
@@ -6,7 +6,7 @@ interface BaseFilter {
     operator: string;
     value: string;
   };
-  relation: MemoFilterRalation;
+  relation: MemoFilterRelation;
 }
 
 interface TagFilter extends BaseFilter {