Splitted the helpers into multiple files

src/components/AppLayout.tsx

@@ -1,19 +1,14 @@
 import Button from "components/Inputs/Button";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { UploadImageFragment } from "graphql/generated";
+import { prettyLanguage, prettySlug } from "helpers/formatters";
+import { AppStaticProps } from "helpers/getAppStaticProps";
+import { getOgImage, ImageQuality, OgImage } from "helpers/img";
 import { useMediaMobile } from "hooks/useMediaQuery";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { AppStaticProps } from "helpers/getAppStaticProps";
-import {
-  getOgImage,
-  OgImage,
-  prettyLanguage,
-  prettySlug,
-} from "helpers/helpers";
 import { useEffect, useState } from "react";
 import { useSwipeable } from "react-swipeable";
-import { ImageQuality } from "./Img";
 import OrderableList from "./Inputs/OrderableList";
 import Select from "./Inputs/Select";
 import MainPanel from "./Panels/MainPanel";

src/components/Img.tsx

@@ -1,4 +1,5 @@
 import { UploadImageFragment } from "graphql/generated";
+import { ImageQuality, getImgSizesByQuality, getAssetURL } from "helpers/img";
 import Image, { ImageProps } from "next/image";
 
 interface Props {
@@ -45,62 +46,3 @@ export default function Img(props: Props): JSX.Element {
   }
   return <></>;
 }
-
-export enum ImageQuality {
-  Small = "small",
-  Medium = "medium",
-  Large = "large",
-  Og = "og",
-}
-
-export function getAssetFilename(path: string): string {
-  let result = path.split("/");
-  result = result[result.length - 1].split(".");
-  result = result
-    .splice(0, result.length - 1)
-    .join(".")
-    .split("_");
-  return result[0];
-}
-
-export function getAssetURL(url: string, quality: ImageQuality): string {
-  let newUrl = url;
-  newUrl = newUrl.replace(/^\/uploads/u, `/${quality}`);
-  newUrl = newUrl.replace(/.jpg$/u, ".webp");
-  newUrl = newUrl.replace(/.jpeg$/u, ".webp");
-  newUrl = newUrl.replace(/.png$/u, ".webp");
-  if (quality === ImageQuality.Og) newUrl = newUrl.replace(/.webp$/u, ".jpg");
-  return process.env.NEXT_PUBLIC_URL_IMG + newUrl;
-}
-
-export function getImgSizesByMaxSize(
-  width: number,
-  height: number,
-  maxSize: number
-): { width: number; height: number } {
-  if (width > height) {
-    if (width < maxSize) return { width: width, height: height };
-    return { width: maxSize, height: (height / width) * maxSize };
-  }
-  if (height < maxSize) return { width: width, height: height };
-  return { width: (width / height) * maxSize, height: maxSize };
-}
-
-export function getImgSizesByQuality(
-  width: number,
-  height: number,
-  quality: ImageQuality
-): { width: number; height: number } {
-  switch (quality) {
-    case ImageQuality.Og:
-      return getImgSizesByMaxSize(width, height, 512);
-    case ImageQuality.Small:
-      return getImgSizesByMaxSize(width, height, 512);
-    case ImageQuality.Medium:
-      return getImgSizesByMaxSize(width, height, 1024);
-    case ImageQuality.Large:
-      return getImgSizesByMaxSize(width, height, 2048);
-    default:
-      return { width: 0, height: 0 };
-  }
-}

src/components/Inputs/LanguageSwitcher.tsx

@@ -1,5 +1,5 @@
+import { prettyLanguage } from "helpers/formatters";
 import { AppStaticProps } from "helpers/getAppStaticProps";
-import { prettyLanguage } from "helpers/helpers";
 import { Dispatch, SetStateAction } from "react";
 import ToolTip from "../ToolTip";
 import Button from "./Button";

src/components/Inputs/OrderableList.tsx

@@ -1,4 +1,4 @@
-import { arrayMove } from "helpers/helpers";
+import { arrayMove } from "helpers/others";
 import { useEffect, useState } from "react";
 
 interface Props {

src/components/Library/ContentLine.tsx

@@ -1,8 +1,8 @@
 import Chip from "components/Chip";
 import Button from "components/Inputs/Button";
 import { GetLibraryItemQuery } from "graphql/generated";
+import { prettyinlineTitle, prettySlug } from "helpers/formatters";
 import { AppStaticProps } from "helpers/getAppStaticProps";
-import { prettyinlineTitle, prettySlug } from "helpers/helpers";
 import { useState } from "react";
 
 interface Props {

src/components/Library/ScanSet.tsx

@@ -1,16 +1,14 @@
 import Chip from "components/Chip";
-import Img, {
-  getAssetFilename,
-  getAssetURL,
-  ImageQuality,
-} from "components/Img";
+import Img from "components/Img";
 import Button from "components/Inputs/Button";
 import RecorderChip from "components/RecorderChip";
 import ToolTip from "components/ToolTip";
 import { GetLibraryItemScansQuery } from "graphql/generated";
-import useSmartLanguage from "hooks/useSmartLanguage";
 import { AppStaticProps } from "helpers/getAppStaticProps";
-import { getStatusDescription, isInteger } from "helpers/helpers";
+import { getStatusDescription } from "helpers/others";
+import { getAssetFilename, getAssetURL, ImageQuality } from "helpers/img";
+import { isInteger } from "helpers/numbers";
+import useSmartLanguage from "hooks/useSmartLanguage";
 import { Dispatch, SetStateAction } from "react";
 
 interface Props {

src/components/Library/ScanSetCover.tsx

@@ -1,14 +1,15 @@
 import Chip from "components/Chip";
-import Img, { getAssetURL, ImageQuality } from "components/Img";
+import Img from "components/Img";
 import RecorderChip from "components/RecorderChip";
 import ToolTip from "components/ToolTip";
 import {
   GetLibraryItemScansQuery,
   UploadImageFragment,
 } from "graphql/generated";
-import useSmartLanguage from "hooks/useSmartLanguage";
 import { AppStaticProps } from "helpers/getAppStaticProps";
-import { getStatusDescription } from "helpers/helpers";
+import { getStatusDescription } from "helpers/others";
+import { getAssetURL, ImageQuality } from "helpers/img";
+import useSmartLanguage from "hooks/useSmartLanguage";
 import { Dispatch, SetStateAction } from "react";
 
 interface Props {

src/components/Markdown/Markdawn.tsx

@@ -1,12 +1,13 @@
 import HorizontalLine from "components/HorizontalLine";
-import Img, { getAssetURL, ImageQuality } from "components/Img";
+import Img from "components/Img";
 import InsetBox from "components/InsetBox";
 import LightBox from "components/LightBox";
 import ToolTip from "components/ToolTip";
 import { useAppLayout } from "contexts/AppLayoutContext";
+import { slugify } from "helpers/formatters";
+import { getAssetURL, ImageQuality } from "helpers/img";
 import Markdown from "markdown-to-jsx";
 import { useRouter } from "next/router";
-import { slugify } from "helpers/helpers";
 import React, { useState } from "react";
 import ReactDOMServer from "react-dom/server";
 

src/components/Markdown/TOC.tsx

@@ -1,5 +1,5 @@
+import { slugify } from "helpers/formatters";
 import { useRouter } from "next/router";
-import { slugify } from "helpers/helpers";
 import { preprocessMarkDawn } from "./Markdawn";
 
 interface Props {

src/components/PostPage.tsx

@@ -1,7 +1,8 @@
-import { GetPostQuery } from "graphql/generated";
-import useSmartLanguage from "hooks/useSmartLanguage";
+import { prettySlug } from "helpers/formatters";
 import { AppStaticProps } from "helpers/getAppStaticProps";
-import { getStatusDescription, prettySlug } from "helpers/helpers";
+import { getStatusDescription } from "helpers/others";
+import { Post } from "helpers/types";
+import useSmartLanguage from "hooks/useSmartLanguage";
 import AppLayout from "./AppLayout";
 import Chip from "./Chip";
 import HorizontalLine from "./HorizontalLine";
@@ -14,14 +15,6 @@ import RecorderChip from "./RecorderChip";
 import ThumbnailHeader from "./ThumbnailHeader";
 import ToolTip from "./ToolTip";
 
-export type Post = Exclude<
-  Exclude<
-    GetPostQuery["posts"],
-    null | undefined
-  >["data"][number]["attributes"],
-  null | undefined
->;
-
 interface Props {
   post: Post;
   langui: AppStaticProps["langui"];

src/components/PreviewCard.tsx

@@ -4,16 +4,17 @@ import {
   PricePickerFragment,
   UploadImageFragment,
 } from "graphql/generated";
-import Link from "next/link";
-import { AppStaticProps } from "helpers/getAppStaticProps";
 import {
   prettyDate,
   prettyDuration,
   prettyPrice,
   prettyShortenNumber,
-} from "helpers/helpers";
+} from "helpers/formatters";
+import { AppStaticProps } from "helpers/getAppStaticProps";
+import { ImageQuality } from "helpers/img";
+import Link from "next/link";
 import Chip from "./Chip";
-import Img, { ImageQuality } from "./Img";
+import Img from "./Img";
 
 interface Props {
   thumbnail?: UploadImageFragment | string | null | undefined;

src/components/PreviewLine.tsx

@@ -1,7 +1,8 @@
 import { UploadImageFragment } from "graphql/generated";
+import { ImageQuality } from "helpers/img";
 import Link from "next/link";
 import Chip from "./Chip";
-import Img, { ImageQuality } from "./Img";
+import Img from "./Img";
 
 interface Props {
   thumbnail?: UploadImageFragment | string | null | undefined;

src/components/RecorderChip.tsx

@@ -1,7 +1,8 @@
 import Chip from "components/Chip";
 import { RecorderChipFragment } from "graphql/generated";
 import { AppStaticProps } from "helpers/getAppStaticProps";
-import Img, { ImageQuality } from "./Img";
+import { ImageQuality } from "helpers/img";
+import Img from "./Img";
 import Markdawn from "./Markdown/Markdawn";
 import ToolTip from "./ToolTip";
 

src/components/ThumbnailHeader.tsx

@@ -1,10 +1,11 @@
 import Chip from "components/Chip";
-import Img, { ImageQuality } from "components/Img";
+import Img from "components/Img";
 import InsetBox from "components/InsetBox";
 import Markdawn from "components/Markdown/Markdawn";
 import { GetContentQuery, UploadImageFragment } from "graphql/generated";
+import { prettyinlineTitle, prettySlug, slugify } from "helpers/formatters";
 import { AppStaticProps } from "helpers/getAppStaticProps";
-import { prettyinlineTitle, prettySlug, slugify } from "helpers/helpers";
+import { ImageQuality } from "helpers/img";
 
 interface Props {
   pre_title?: string | null | undefined;

src/components/Wiki/Chronology/ChronologyItemComponent.tsx

@@ -5,7 +5,7 @@ import {
   GetChronologyItemsQuery,
 } from "graphql/generated";
 import { AppStaticProps } from "helpers/getAppStaticProps";
-import { getStatusDescription } from "helpers/helpers";
+import { getStatusDescription } from "helpers/others";
 
 interface Props {
   item: Exclude<

src/helpers/formatters.ts

@@ -1,18 +1,6 @@
-import {
-  getAssetURL,
-  getImgSizesByQuality,
-  ImageQuality,
-} from "components/Img";
-import {
-  DatePickerFragment,
-  Enum_Componentsetstextset_Status,
-  GetCurrenciesQuery,
-  GetLibraryItemQuery,
-  GetLibraryItemScansQuery,
-  PricePickerFragment,
-  UploadImageFragment,
-} from "graphql/generated";
+import { DatePickerFragment, PricePickerFragment } from "graphql/generated";
 import { AppStaticProps } from "./getAppStaticProps";
+import { convertPrice } from "./numbers";
 
 export function prettyDate(datePicker: DatePickerFragment): string {
   let result = "";
@@ -45,25 +33,6 @@ export function prettyPrice(
   return result;
 }
 
-export function convertPrice(
-  pricePicker: PricePickerFragment,
-  targetCurrency: Exclude<
-    GetCurrenciesQuery["currencies"],
-    null | undefined
-  >["data"][number]
-): number {
-  if (
-    pricePicker.amount &&
-    pricePicker.currency?.data?.attributes &&
-    targetCurrency.attributes
-  )
-    return (
-      (pricePicker.amount * pricePicker.currency.data.attributes.rate_to_usd) /
-      targetCurrency.attributes.rate_to_usd
-    );
-  return 0;
-}
-
 export function prettySlug(slug?: string, parentSlug?: string): string {
   if (slug) {
     if (parentSlug && slug.startsWith(parentSlug))
@@ -300,87 +269,6 @@ export function capitalizeString(string: string): string {
   return words.join(" ");
 }
 
-export function convertMmToInch(mm: number | null | undefined): string {
-  return mm ? (mm * 0.03937008).toPrecision(3) : "";
-}
-
-export interface OgImage {
-  image: string;
-  width: number;
-  height: number;
-  alt: string;
-}
-
-export function getOgImage(
-  quality: ImageQuality,
-  image: UploadImageFragment
-): OgImage {
-  const imgSize = getImgSizesByQuality(
-    image.width ?? 0,
-    image.height ?? 0,
-    quality ? quality : ImageQuality.Small
-  );
-  return {
-    image: getAssetURL(image.url, quality),
-    width: imgSize.width,
-    height: imgSize.height,
-    alt: image.alternativeText || "",
-  };
-}
-
-export function sortContent(
-  contents:
-    | Exclude<
-        Exclude<
-          GetLibraryItemQuery["libraryItems"],
-          null | undefined
-        >["data"][number]["attributes"],
-        null | undefined
-      >["contents"]
-    | Exclude<
-        Exclude<
-          GetLibraryItemScansQuery["libraryItems"],
-          null | undefined
-        >["data"][number]["attributes"],
-        null | undefined
-      >["contents"]
-) {
-  contents?.data.sort((a, b) => {
-    if (
-      a.attributes?.range[0]?.__typename === "ComponentRangePageRange" &&
-      b.attributes?.range[0]?.__typename === "ComponentRangePageRange"
-    ) {
-      return (
-        a.attributes.range[0].starting_page -
-        b.attributes.range[0].starting_page
-      );
-    }
-    return 0;
-  });
-}
-
-export function getStatusDescription(
-  status: string,
-  langui: AppStaticProps["langui"]
-): string | null | undefined {
-  switch (status) {
-    case Enum_Componentsetstextset_Status.Incomplete:
-      return langui.status_incomplete;
-
-    case Enum_Componentsetstextset_Status.Draft:
-      return langui.status_draft;
-
-    case Enum_Componentsetstextset_Status.Review:
-      return langui.status_review;
-
-    case Enum_Componentsetstextset_Status.Done:
-      return langui.status_done;
-
-    default:
-      return "";
-  }
-}
-
 export function slugify(string: string | undefined): string {
   if (!string) {
     return "";
@@ -400,51 +288,3 @@ export function slugify(string: string | undefined): string {
     .trim()
     .replace(/ /gu, "-");
 }
-
-export function randomInt(min: number, max: number) {
-  return Math.floor(Math.random() * (max - min)) + min;
-}
-
-export function getLocalesFromLanguages(
-  languages?: Array<{
-    language?: {
-      data?: {
-        attributes?: { code: string } | null;
-      } | null;
-    } | null;
-  } | null> | null
-) {
-  return languages
-    ? languages.map((language) => language?.language?.data?.attributes?.code)
-    : [];
-}
-
-export function getVideoThumbnailURL(uid: string): string {
-  return `${process.env.NEXT_PUBLIC_URL_WATCH}/videos/${uid}.webp`;
-}
-
-export function getVideoFile(uid: string): string {
-  return `${process.env.NEXT_PUBLIC_URL_WATCH}/videos/${uid}.mp4`;
-}
-
-export function arrayMove<T>(arr: T[], old_index: number, new_index: number) {
-  arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
-  return arr;
-}
-
-export function getPreferredLanguage(
-  preferredLanguages: (string | undefined)[],
-  availableLanguages: Map<string, number>
-): number | undefined {
-  for (const locale of preferredLanguages) {
-    if (locale && availableLanguages.has(locale)) {
-      return availableLanguages.get(locale);
-    }
-  }
-  return undefined;
-}
-
-export function isInteger(value: string): boolean {
-  // eslint-disable-next-line require-unicode-regexp
-  return /^[+-]?[0-9]+$/.test(value);
-}

src/helpers/img.ts

@@ -0,0 +1,84 @@
+import { UploadImageFragment } from "graphql/generated";
+
+export enum ImageQuality {
+  Small = "small",
+  Medium = "medium",
+  Large = "large",
+  Og = "og",
+}
+
+export interface OgImage {
+  image: string;
+  width: number;
+  height: number;
+  alt: string;
+}
+
+export function getAssetFilename(path: string): string {
+  let result = path.split("/");
+  result = result[result.length - 1].split(".");
+  result = result
+    .splice(0, result.length - 1)
+    .join(".")
+    .split("_");
+  return result[0];
+}
+
+export function getAssetURL(url: string, quality: ImageQuality): string {
+  let newUrl = url;
+  newUrl = newUrl.replace(/^\/uploads/u, `/${quality}`);
+  newUrl = newUrl.replace(/.jpg$/u, ".webp");
+  newUrl = newUrl.replace(/.jpeg$/u, ".webp");
+  newUrl = newUrl.replace(/.png$/u, ".webp");
+  if (quality === ImageQuality.Og) newUrl = newUrl.replace(/.webp$/u, ".jpg");
+  return process.env.NEXT_PUBLIC_URL_IMG + newUrl;
+}
+
+export function getImgSizesByMaxSize(
+  width: number,
+  height: number,
+  maxSize: number
+): { width: number; height: number } {
+  if (width > height) {
+    if (width < maxSize) return { width: width, height: height };
+    return { width: maxSize, height: (height / width) * maxSize };
+  }
+  if (height < maxSize) return { width: width, height: height };
+  return { width: (width / height) * maxSize, height: maxSize };
+}
+
+export function getImgSizesByQuality(
+  width: number,
+  height: number,
+  quality: ImageQuality
+): { width: number; height: number } {
+  switch (quality) {
+    case ImageQuality.Og:
+      return getImgSizesByMaxSize(width, height, 512);
+    case ImageQuality.Small:
+      return getImgSizesByMaxSize(width, height, 512);
+    case ImageQuality.Medium:
+      return getImgSizesByMaxSize(width, height, 1024);
+    case ImageQuality.Large:
+      return getImgSizesByMaxSize(width, height, 2048);
+    default:
+      return { width: 0, height: 0 };
+  }
+}
+
+export function getOgImage(
+  quality: ImageQuality,
+  image: UploadImageFragment
+): OgImage {
+  const imgSize = getImgSizesByQuality(
+    image.width ?? 0,
+    image.height ?? 0,
+    quality ? quality : ImageQuality.Small
+  );
+  return {
+    image: getAssetURL(image.url, quality),
+    width: imgSize.width,
+    height: imgSize.height,
+    alt: image.alternativeText || "",
+  };
+}

src/helpers/numbers.ts

@@ -0,0 +1,33 @@
+import { GetCurrenciesQuery, PricePickerFragment } from "graphql/generated";
+
+export function convertPrice(
+  pricePicker: PricePickerFragment,
+  targetCurrency: Exclude<
+    GetCurrenciesQuery["currencies"],
+    null | undefined
+  >["data"][number]
+): number {
+  if (
+    pricePicker.amount &&
+    pricePicker.currency?.data?.attributes &&
+    targetCurrency.attributes
+  )
+    return (
+      (pricePicker.amount * pricePicker.currency.data.attributes.rate_to_usd) /
+      targetCurrency.attributes.rate_to_usd
+    );
+  return 0;
+}
+
+export function convertMmToInch(mm: number | null | undefined): string {
+  return mm ? (mm * 0.03937008).toPrecision(3) : "";
+}
+
+export function randomInt(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+
+export function isInteger(value: string): boolean {
+  // eslint-disable-next-line require-unicode-regexp
+  return /^[+-]?[0-9]+$/.test(value);
+}

src/helpers/others.ts

@@ -0,0 +1,64 @@
+import {
+  Enum_Componentsetstextset_Status,
+  GetLibraryItemQuery,
+  GetLibraryItemScansQuery,
+} from "graphql/generated";
+import { AppStaticProps } from "./getAppStaticProps";
+
+export function sortContent(
+  contents:
+    | Exclude<
+        Exclude<
+          GetLibraryItemQuery["libraryItems"],
+          null | undefined
+        >["data"][number]["attributes"],
+        null | undefined
+      >["contents"]
+    | Exclude<
+        Exclude<
+          GetLibraryItemScansQuery["libraryItems"],
+          null | undefined
+        >["data"][number]["attributes"],
+        null | undefined
+      >["contents"]
+) {
+  contents?.data.sort((a, b) => {
+    if (
+      a.attributes?.range[0]?.__typename === "ComponentRangePageRange" &&
+      b.attributes?.range[0]?.__typename === "ComponentRangePageRange"
+    ) {
+      return (
+        a.attributes.range[0].starting_page -
+        b.attributes.range[0].starting_page
+      );
+    }
+    return 0;
+  });
+}
+
+export function getStatusDescription(
+  status: string,
+  langui: AppStaticProps["langui"]
+): string | null | undefined {
+  switch (status) {
+    case Enum_Componentsetstextset_Status.Incomplete:
+      return langui.status_incomplete;
+
+    case Enum_Componentsetstextset_Status.Draft:
+      return langui.status_draft;
+
+    case Enum_Componentsetstextset_Status.Review:
+      return langui.status_review;
+
+    case Enum_Componentsetstextset_Status.Done:
+      return langui.status_done;
+
+    default:
+      return "";
+  }
+}
+
+export function arrayMove<T>(arr: T[], old_index: number, new_index: number) {
+  arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
+  return arr;
+}

src/helpers/types.ts

@@ -0,0 +1,9 @@
+import { GetPostQuery } from "graphql/generated";
+
+export type Post = Exclude<
+  Exclude<
+    GetPostQuery["posts"],
+    null | undefined
+  >["data"][number]["attributes"],
+  null | undefined
+>;

src/helpers/videos.ts

@@ -0,0 +1,7 @@
+export function getVideoThumbnailURL(uid: string): string {
+  return `${process.env.NEXT_PUBLIC_URL_WATCH}/videos/${uid}.webp`;
+}
+
+export function getVideoFile(uid: string): string {
+  return `${process.env.NEXT_PUBLIC_URL_WATCH}/videos/${uid}.mp4`;
+}

src/hooks/useSmartLanguage.tsx

@@ -1,8 +1,7 @@
 import LanguageSwitcher from "components/Inputs/LanguageSwitcher";
 import { useAppLayout } from "contexts/AppLayoutContext";
-import { useRouter } from "next/router";
 import { AppStaticProps } from "helpers/getAppStaticProps";
-import { getPreferredLanguage } from "helpers/helpers";
+import { useRouter } from "next/router";
 import { useEffect, useMemo, useState } from "react";
 
 interface Props<T> {
@@ -12,6 +11,18 @@ interface Props<T> {
   transform?: (item: T) => T;
 }
 
+function getPreferredLanguage(
+  preferredLanguages: (string | undefined)[],
+  availableLanguages: Map<string, number>
+): number | undefined {
+  for (const locale of preferredLanguages) {
+    if (locale && availableLanguages.has(locale)) {
+      return availableLanguages.get(locale);
+    }
+  }
+  return undefined;
+}
+
 export default function useSmartLanguage<T>(
   props: Props<T>
 ): [T | undefined, () => JSX.Element] {

src/pages/about-us/accords-handbook.tsx

@@ -1,7 +1,8 @@
-import PostPage, { Post } from "components/PostPage";
+import PostPage from "components/PostPage";
 import { getReadySdk } from "graphql/sdk";
-import { GetStaticPropsContext } from "next";
 import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
+import { Post } from "helpers/types";
+import { GetStaticPropsContext } from "next";
 
 interface Props extends AppStaticProps {
   post: Post;

src/pages/about-us/contact.tsx

@@ -1,11 +1,12 @@
 import InsetBox from "components/InsetBox";
-import PostPage, { Post } from "components/PostPage";
+import PostPage from "components/PostPage";
+import { randomInt } from "crypto";
 import { getReadySdk } from "graphql/sdk";
+import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
+import { Post } from "helpers/types";
 import { GetStaticPropsContext } from "next";
 import { useRouter } from "next/router";
 import { RequestMailProps, ResponseMailProps } from "pages/api/mail";
-import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
-import { randomInt } from "helpers/helpers";
 import { useState } from "react";
 
 interface Props extends AppStaticProps {

src/pages/about-us/legality.tsx

@@ -1,7 +1,8 @@
-import PostPage, { Post } from "components/PostPage";
+import PostPage from "components/PostPage";
 import { getReadySdk } from "graphql/sdk";
-import { GetStaticPropsContext } from "next";
 import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
+import { Post } from "helpers/types";
+import { GetStaticPropsContext } from "next";
 
 interface Props extends AppStaticProps {
   post: Post;

src/pages/about-us/sharing-policy.tsx

@@ -1,7 +1,8 @@
-import PostPage, { Post } from "components/PostPage";
+import PostPage from "components/PostPage";
 import { getReadySdk } from "graphql/sdk";
-import { GetStaticPropsContext } from "next";
 import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
+import { Post } from "helpers/types";
+import { GetStaticPropsContext } from "next";
 
 interface Props extends AppStaticProps {
   post: Post;

src/pages/archives/videos/c/[uid].tsx

@@ -11,13 +11,13 @@ import SubPanel from "components/Panels/SubPanel";
 import ThumbnailPreview from "components/PreviewCard";
 import { GetVideoChannelQuery } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
+import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
+import { getVideoThumbnailURL } from "helpers/videos";
 import {
   GetStaticPathsContext,
   GetStaticPathsResult,
   GetStaticPropsContext,
 } from "next";
-import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
-import { getVideoThumbnailURL } from "helpers/helpers";
 import { useState } from "react";
 
 interface Props extends AppStaticProps {

src/pages/archives/videos/index.tsx

@@ -12,9 +12,10 @@ import SubPanel from "components/Panels/SubPanel";
 import ThumbnailPreview from "components/PreviewCard";
 import { GetVideosPreviewQuery } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
-import { GetStaticPropsContext } from "next";
+import { prettyDate } from "helpers/formatters";
 import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
-import { getVideoThumbnailURL, prettyDate } from "helpers/helpers";
+import { getVideoThumbnailURL } from "helpers/videos";
+import { GetStaticPropsContext } from "next";
 import { useState } from "react";
 
 interface Props extends AppStaticProps {

src/pages/archives/videos/v/[uid].tsx

@@ -20,7 +20,8 @@ import {
   GetStaticPropsContext,
 } from "next";
 import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
-import { getVideoFile, prettyDate, prettyShortenNumber } from "helpers/helpers";
+import { prettyDate, prettyShortenNumber } from "helpers/formatters";
+import { getVideoFile } from "helpers/videos";
 
 interface Props extends AppStaticProps {
   video: Exclude<

src/pages/contents/[slug]/index.tsx

@@ -14,6 +14,13 @@ import ThumbnailHeader from "components/ThumbnailHeader";
 import ToolTip from "components/ToolTip";
 import { GetContentTextQuery } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
+import {
+  prettyinlineTitle,
+  prettyLanguage,
+  prettySlug,
+} from "helpers/formatters";
+import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
+import { getStatusDescription } from "helpers/others";
 import { useMediaMobile } from "hooks/useMediaQuery";
 import useSmartLanguage from "hooks/useSmartLanguage";
 import {
@@ -21,13 +28,6 @@ import {
   GetStaticPathsResult,
   GetStaticPropsContext,
 } from "next";
-import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
-import {
-  getStatusDescription,
-  prettyinlineTitle,
-  prettyLanguage,
-  prettySlug,
-} from "helpers/helpers";
 
 interface Props extends AppStaticProps {
   content: Exclude<

src/pages/contents/index.tsx

@@ -12,8 +12,8 @@ import { GetContentsQuery } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
 import { GetStaticPropsContext } from "next";
 import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
-import { prettyinlineTitle, prettySlug } from "helpers/helpers";
 import { useEffect, useState } from "react";
+import { prettySlug, prettyinlineTitle } from "helpers/formatters";
 
 interface Props extends AppStaticProps {
   contents: Exclude<GetContentsQuery["contents"], null | undefined>["data"];

src/pages/index.tsx

@@ -1,7 +1,8 @@
-import PostPage, { Post } from "components/PostPage";
+import PostPage from "components/PostPage";
 import { getReadySdk } from "graphql/sdk";
 import { GetStaticPropsContext } from "next";
 import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
+import { Post } from "helpers/types";
 
 interface Props extends AppStaticProps {
   post: Post;

src/pages/library/[slug]/index.tsx

@@ -1,6 +1,6 @@
 import AppLayout from "components/AppLayout";
 import Chip from "components/Chip";
-import Img, { getAssetURL, ImageQuality } from "components/Img";
+import Img from "components/Img";
 import Button from "components/Inputs/Button";
 import Switch from "components/Inputs/Switch";
 import InsetBox from "components/InsetBox";
@@ -23,21 +23,22 @@ import {
 } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
 import {
-  GetStaticPathsContext,
-  GetStaticPathsResult,
-  GetStaticPropsContext,
-} from "next";
-import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
-import {
-  convertMmToInch,
   prettyDate,
   prettyinlineTitle,
   prettyItemSubType,
   prettyItemType,
   prettyPrice,
   prettyURL,
-  sortContent,
-} from "helpers/helpers";
+} from "helpers/formatters";
+import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
+import { sortContent } from "helpers/others";
+import { getAssetURL, ImageQuality } from "helpers/img";
+import { convertMmToInch } from "helpers/numbers";
+import {
+  GetStaticPathsContext,
+  GetStaticPathsResult,
+  GetStaticPropsContext,
+} from "next";
 import { useState } from "react";
 
 interface Props extends AppStaticProps {

src/pages/library/[slug]/scans.tsx

@@ -13,13 +13,14 @@ import SubPanel from "components/Panels/SubPanel";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { GetLibraryItemScansQuery } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
+import { prettyinlineTitle, prettySlug } from "helpers/formatters";
+import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
+import { sortContent } from "helpers/others";
 import {
   GetStaticPathsContext,
   GetStaticPathsResult,
   GetStaticPropsContext,
 } from "next";
-import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
-import { prettyinlineTitle, prettySlug, sortContent } from "helpers/helpers";
 import { useState } from "react";
 
 interface Props extends AppStaticProps {

src/pages/library/index.tsx

@@ -10,14 +10,14 @@ import SubPanel from "components/Panels/SubPanel";
 import ThumbnailPreview from "components/PreviewCard";
 import { GetLibraryItemsPreviewQuery } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
-import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
 import {
-  convertPrice,
   prettyDate,
   prettyinlineTitle,
   prettyItemSubType,
-} from "helpers/helpers";
+} from "helpers/formatters";
+import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
+import { convertPrice } from "helpers/numbers";
+import { GetStaticPropsContext } from "next";
 import { useEffect, useState } from "react";
 
 interface Props extends AppStaticProps {

src/pages/news/[slug].tsx

@@ -1,12 +1,13 @@
-import PostPage, { Post } from "components/PostPage";
+import PostPage from "components/PostPage";
 import { GetPostQuery } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
+import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
+import { Post } from "helpers/types";
 import {
   GetStaticPathsContext,
   GetStaticPathsResult,
   GetStaticPropsContext,
 } from "next";
-import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
 
 interface Props extends AppStaticProps {
   post: Post;

src/pages/news/index.tsx

@@ -8,9 +8,9 @@ import SubPanel from "components/Panels/SubPanel";
 import ThumbnailPreview from "components/PreviewCard";
 import { GetPostsPreviewQuery } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
-import { GetStaticPropsContext } from "next";
+import { prettyDate, prettySlug } from "helpers/formatters";
 import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
-import { prettyDate, prettySlug } from "helpers/helpers";
+import { GetStaticPropsContext } from "next";
 import { useState } from "react";
 
 interface Props extends AppStaticProps {

src/pages/wiki/chronology.tsx

@@ -10,9 +10,9 @@ import ChronologyYearComponent from "components/Wiki/Chronology/ChronologyYearCo
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { GetChronologyItemsQuery, GetErasQuery } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
-import { GetStaticPropsContext } from "next";
+import { prettySlug } from "helpers/formatters";
 import { AppStaticProps, getAppStaticProps } from "helpers/getAppStaticProps";
-import { prettySlug } from "helpers/helpers";
+import { GetStaticPropsContext } from "next";
 
 interface Props extends AppStaticProps {
   chronologyItems: Exclude<