Removed troublesome Immutable type

.eslintrc.js

@@ -190,10 +190,10 @@ module.exports = {
     "@typescript-eslint/promise-function-async": "error",
     "@typescript-eslint/require-array-sort-compare": "error",
     "@typescript-eslint/sort-type-union-intersection-members": "warn",
-    "@typescript-eslint/strict-boolean-expressions": [
-      "error",
-      { allowAny: true },
-    ],
+    // "@typescript-eslint/strict-boolean-expressions": [
+    //   "error",
+    //   { allowAny: true },
+    // ],
     "@typescript-eslint/switch-exhaustiveness-check": "error",
     "@typescript-eslint/typedef": "error",
     "@typescript-eslint/unified-signatures": "error",

src/components/AppLayout.tsx

@@ -7,7 +7,7 @@ import { prettyLanguage, prettySlug } from "helpers/formatters";
 import { getOgImage, ImageQuality } from "helpers/img";
 import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
 // import { getClient, Indexes, search, SearchResult } from "helpers/search";
-import { Immutable } from "helpers/types";
+
 import { useMediaMobile } from "hooks/useMediaQuery";
 import { AnchorIds } from "hooks/useScrollTopOnChange";
 import Head from "next/head";
@@ -35,7 +35,7 @@ interface Props extends AppStaticProps {
 const SENSIBILITY_SWIPE = 1.1;
 const TITLE_PREFIX = "Accord’s Library";
 
-export function AppLayout(props: Immutable<Props>): JSX.Element {
+export function AppLayout(props: Props): JSX.Element {
   const {
     langui,
     currencies,

src/components/Chip.tsx

@@ -1,12 +1,11 @@
 import { cJoin } from "helpers/className";
-import { Immutable } from "helpers/types";
 
 interface Props {
   className?: string;
   children: React.ReactNode;
 }
 
-export function Chip(props: Immutable<Props>): JSX.Element {
+export function Chip(props: Props): JSX.Element {
   return (
     <div
       className={cJoin(

src/components/HorizontalLine.tsx

@@ -1,11 +1,10 @@
 import { cJoin } from "helpers/className";
-import { Immutable } from "helpers/types";
 
 interface Props {
   className?: string;
 }
 
-export function HorizontalLine(props: Immutable<Props>): JSX.Element {
+export function HorizontalLine(props: Props): JSX.Element {
   const { className } = props;
   return (
     <div

src/components/Ico.tsx

@@ -1,5 +1,5 @@
 import { cJoin } from "helpers/className";
-import { Immutable } from "helpers/types";
+
 import { MouseEventHandler } from "react";
 
 interface Props {
@@ -8,7 +8,7 @@ interface Props {
   icon: Icon;
 }
 
-export function Ico(props: Immutable<Props>): JSX.Element {
+export function Ico(props: Props): JSX.Element {
   const { onClick, icon, className } = props;
   return (
     <span

src/components/Img.tsx

@@ -1,6 +1,6 @@
 import { UploadImageFragment } from "graphql/generated";
 import { getAssetURL, getImgSizesByQuality, ImageQuality } from "helpers/img";
-import { Immutable } from "helpers/types";
+
 import { ImageProps } from "next/image";
 import { MouseEventHandler } from "react";
 
@@ -12,7 +12,7 @@ interface Props {
   onClick?: MouseEventHandler<HTMLImageElement>;
 }
 
-export function Img(props: Immutable<Props>): JSX.Element {
+export function Img(props: Props): JSX.Element {
   const {
     className,
     image,

src/components/Inputs/Button.tsx

@@ -1,7 +1,7 @@
 import { Ico, Icon } from "components/Ico";
 import { cIf, cJoin } from "helpers/className";
 import { ConditionalWrapper, Wrapper } from "helpers/component";
-import { Immutable } from "helpers/types";
+
 import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
 import { useRouter } from "next/router";
 import React, { MouseEventHandler } from "react";
@@ -20,7 +20,7 @@ interface Props {
   badgeNumber?: number;
 }
 
-export function Button(props: Immutable<Props>): JSX.Element {
+export function Button(props: Props): JSX.Element {
   const {
     draggable,
     id,

src/components/Inputs/ButtonGroup.tsx

@@ -1,5 +1,5 @@
 import { cJoin } from "helpers/className";
-import { Immutable } from "helpers/types";
+
 import { useLayoutEffect, useRef } from "react";
 
 interface Props {
@@ -7,7 +7,7 @@ interface Props {
   className?: string;
 }
 
-export function ButtonGroup(props: Immutable<Props>): JSX.Element {
+export function ButtonGroup(props: Props): JSX.Element {
   const { children, className } = props;
   const ref = useRef<HTMLDivElement>(null);
 

src/components/Inputs/LanguageSwitcher.tsx

@@ -2,7 +2,7 @@ import { Icon } from "components/Ico";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { cJoin } from "helpers/className";
 import { prettyLanguage } from "helpers/formatters";
-import { Immutable } from "helpers/types";
+
 import { Fragment } from "react";
 import { ToolTip } from "../ToolTip";
 import { Button } from "./Button";
@@ -15,7 +15,7 @@ interface Props {
   onLanguageChanged: (index: number) => void;
 }
 
-export function LanguageSwitcher(props: Immutable<Props>): JSX.Element {
+export function LanguageSwitcher(props: Props): JSX.Element {
   const { locales, className, localesIndex, onLanguageChanged } = props;
 
   return (

src/components/Inputs/OrderableList.tsx

@@ -1,6 +1,6 @@
 import { Ico, Icon } from "components/Ico";
 import { arrayMove, isDefinedAndNotEmpty } from "helpers/others";
-import { Immutable } from "helpers/types";
+
 import { Fragment, useCallback, useState } from "react";
 
 interface Props {
@@ -10,7 +10,7 @@ interface Props {
   onChange?: (items: Map<string, string>) => void;
 }
 
-export function OrderableList(props: Immutable<Props>): JSX.Element {
+export function OrderableList(props: Props): JSX.Element {
   const { onChange } = props;
   const [items, setItems] = useState<Map<string, string>>(props.items);
 

src/components/Inputs/PageSelector.tsx

@@ -1,6 +1,6 @@
 import { Icon } from "components/Ico";
 import { cJoin } from "helpers/className";
-import { Immutable } from "helpers/types";
+
 import { Dispatch, SetStateAction } from "react";
 import { Button } from "./Button";
 
@@ -11,7 +11,7 @@ interface Props {
   setPage: Dispatch<SetStateAction<number>>;
 }
 
-export function PageSelector(props: Immutable<Props>): JSX.Element {
+export function PageSelector(props: Props): JSX.Element {
   const { page, setPage, maxPage, className } = props;
 
   return (

src/components/Inputs/Select.tsx

@@ -1,6 +1,6 @@
 import { Ico, Icon } from "components/Ico";
 import { cIf, cJoin } from "helpers/className";
-import { Immutable } from "helpers/types";
+
 import { useToggle } from "hooks/useToggle";
 import { Dispatch, Fragment, SetStateAction, useState } from "react";
 
@@ -13,7 +13,7 @@ interface Props {
   className?: string;
 }
 
-export function Select(props: Immutable<Props>): JSX.Element {
+export function Select(props: Props): JSX.Element {
   const { className, state, options, allowEmpty, setState } = props;
   const [opened, setOpened] = useState(false);
   const toggleOpened = useToggle(setOpened);

src/components/Inputs/Switch.tsx

@@ -1,5 +1,5 @@
 import { cIf, cJoin } from "helpers/className";
-import { Immutable } from "helpers/types";
+
 import { useToggle } from "hooks/useToggle";
 import { Dispatch, SetStateAction } from "react";
 
@@ -10,7 +10,7 @@ interface Props {
   disabled?: boolean;
 }
 
-export function Switch(props: Immutable<Props>): JSX.Element {
+export function Switch(props: Props): JSX.Element {
   const { state, setState, className, disabled } = props;
   const toggleState = useToggle(setState);
   return (

src/components/Inputs/TextInput.tsx

@@ -1,7 +1,7 @@
 import { Ico, Icon } from "components/Ico";
 import { cJoin } from "helpers/className";
 import { isDefinedAndNotEmpty } from "helpers/others";
-import { Immutable } from "helpers/types";
+
 import { Dispatch, SetStateAction } from "react";
 
 interface Props {
@@ -14,7 +14,7 @@ interface Props {
   placeholder?: string;
 }
 
-export function TextInput(props: Immutable<Props>): JSX.Element {
+export function TextInput(props: Props): JSX.Element {
   const { state, setState, className, name, placeholder } = props;
 
   return (

src/components/Inputs/WithLabel.tsx

@@ -1,6 +1,5 @@
 import { cIf, cJoin } from "helpers/className";
 import { isDefinedAndNotEmpty } from "helpers/others";
-import { Immutable } from "helpers/types";
 
 interface Props {
   label: string | null | undefined;
@@ -8,7 +7,7 @@ interface Props {
   disabled?: boolean;
 }
 
-export function WithLabel(props: Immutable<Props>): JSX.Element {
+export function WithLabel(props: Props): JSX.Element {
   const { label, input, disabled } = props;
   return (
     <div

src/components/InsetBox.tsx

@@ -1,5 +1,4 @@
 import { cJoin } from "helpers/className";
-import { Immutable } from "helpers/types";
 
 interface Props {
   className?: string;
@@ -7,7 +6,7 @@ interface Props {
   id?: string;
 }
 
-export function InsetBox(props: Immutable<Props>): JSX.Element {
+export function InsetBox(props: Props): JSX.Element {
   return (
     <div
       id={props.id}

src/components/Library/ContentLine.tsx

@@ -4,7 +4,7 @@ import { Button } from "components/Inputs/Button";
 import { GetLibraryItemQuery } from "graphql/generated";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { prettyinlineTitle, prettySlug } from "helpers/formatters";
-import { Immutable } from "helpers/types";
+
 import { useToggle } from "hooks/useToggle";
 import { useState } from "react";
 
@@ -20,7 +20,7 @@ interface Props {
   langui: AppStaticProps["langui"];
 }
 
-export function ContentLine(props: Immutable<Props>): JSX.Element {
+export function ContentLine(props: Props): JSX.Element {
   const { content, langui, parentSlug } = props;
 
   const [opened, setOpened] = useState(false);

src/components/Library/ScanSet.tsx

@@ -8,7 +8,7 @@ import { AppStaticProps } from "graphql/getAppStaticProps";
 import { getAssetFilename, getAssetURL, ImageQuality } from "helpers/img";
 import { isInteger } from "helpers/numbers";
 import { getStatusDescription, isDefinedAndNotEmpty } from "helpers/others";
-import { Immutable } from "helpers/types";
+
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { Fragment } from "react";
 
@@ -40,7 +40,7 @@ interface Props {
   >["content"];
 }
 
-export function ScanSet(props: Immutable<Props>): JSX.Element {
+export function ScanSet(props: Props): JSX.Element {
   const { openLightBox, scanSet, slug, title, languages, langui, content } =
     props;
 
@@ -49,8 +49,7 @@ export function ScanSet(props: Immutable<Props>): JSX.Element {
     languages: languages,
     languageExtractor: (item) => item.language?.data?.attributes?.code,
     transform: (item) => {
-      (item as NonNullable<Props["scanSet"][number]>).pages?.data.sort(
-        (a, b) => {
+      item.pages?.data.sort((a, b) => {
         if (
           a.attributes &&
           b.attributes &&
@@ -77,8 +76,7 @@ export function ScanSet(props: Immutable<Props>): JSX.Element {
           return a.attributes.url.localeCompare(b.attributes.url);
         }
         return 0;
-        }
-      );
+      });
       return item;
     },
   });

src/components/Library/ScanSetCover.tsx

@@ -9,7 +9,7 @@ import {
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { getAssetURL, ImageQuality } from "helpers/img";
 import { getStatusDescription } from "helpers/others";
-import { Immutable } from "helpers/types";
+
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { Fragment } from "react";
 
@@ -26,7 +26,7 @@ interface Props {
   langui: AppStaticProps["langui"];
 }
 
-export function ScanSetCover(props: Immutable<Props>): JSX.Element {
+export function ScanSetCover(props: Props): JSX.Element {
   const { openLightBox, images, languages, langui } = props;
 
   const [selectedScan, LanguageSwitcher] = useSmartLanguage({

src/components/LightBox.tsx

@@ -1,4 +1,3 @@
-import { Immutable } from "helpers/types";
 import { Dispatch, SetStateAction, useCallback } from "react";
 import Hotkeys from "react-hot-keys";
 import { useSwipeable } from "react-swipeable";
@@ -19,7 +18,7 @@ interface Props {
 
 const SENSIBILITY_SWIPE = 0.5;
 
-export function LightBox(props: Immutable<Props>): JSX.Element {
+export function LightBox(props: Props): JSX.Element {
   const { state, setState, images, index, setIndex } = props;
 
   const handlePrevious = useCallback(() => {

src/components/Markdown/Markdawn.tsx

@@ -8,7 +8,7 @@ import { cJoin } from "helpers/className";
 import { slugify } from "helpers/formatters";
 import { getAssetURL, ImageQuality } from "helpers/img";
 import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
-import { Immutable } from "helpers/types";
+
 import { useLightBox } from "hooks/useLightBox";
 import Markdown from "markdown-to-jsx";
 import { useRouter } from "next/router";
@@ -20,7 +20,7 @@ interface Props {
   text: string;
 }
 
-export function Markdawn(props: Immutable<Props>): JSX.Element {
+export function Markdawn(props: Props): JSX.Element {
   const { className, text: rawText } = props;
   const appLayout = useAppLayout();
   const router = useRouter();

src/components/Markdown/TOC.tsx

@@ -1,5 +1,5 @@
 import { slugify } from "helpers/formatters";
-import { Immutable } from "helpers/types";
+
 import { useRouter } from "next/router";
 import { Fragment, useMemo } from "react";
 import { preprocessMarkDawn } from "./Markdawn";
@@ -9,7 +9,7 @@ interface Props {
   title?: string;
 }
 
-export function TOC(props: Immutable<Props>): JSX.Element {
+export function TOC(props: Props): JSX.Element {
   const { text, title } = props;
   const router = useRouter();
   const toc = useMemo(

src/components/PanelComponents/NavOption.tsx

@@ -2,7 +2,7 @@ import { Ico, Icon } from "components/Ico";
 import { ToolTip } from "components/ToolTip";
 import { cJoin, cIf } from "helpers/className";
 import { isDefinedAndNotEmpty } from "helpers/others";
-import { Immutable } from "helpers/types";
+
 import { useRouter } from "next/router";
 import { MouseEventHandler, useMemo } from "react";
 
@@ -16,7 +16,7 @@ interface Props {
   onClick?: MouseEventHandler<HTMLDivElement>;
 }
 
-export function NavOption(props: Immutable<Props>): JSX.Element {
+export function NavOption(props: Props): JSX.Element {
   const { url, icon, title, subtitle, border, reduced, onClick } = props;
   const router = useRouter();
   const isActive = useMemo(
@@ -66,7 +66,9 @@ export function NavOption(props: Immutable<Props>): JSX.Element {
         {reduced === false && (
           <div>
             <h3 className="text-2xl">{title}</h3>
-            {isDefinedAndNotEmpty(subtitle) && <p className="col-start-2">{subtitle}</p>}
+            {isDefinedAndNotEmpty(subtitle) && (
+              <p className="col-start-2">{subtitle}</p>
+            )}
           </div>
         )}
       </div>

src/components/PanelComponents/PanelHeader.tsx

@@ -1,7 +1,6 @@
 import { HorizontalLine } from "components/HorizontalLine";
 import { Ico, Icon } from "components/Ico";
 import { isDefinedAndNotEmpty } from "helpers/others";
-import { Immutable } from "helpers/types";
 
 interface Props {
   icon?: Icon;
@@ -9,7 +8,7 @@ interface Props {
   description?: string | null | undefined;
 }
 
-export function PanelHeader(props: Immutable<Props>): JSX.Element {
+export function PanelHeader(props: Props): JSX.Element {
   const { icon, description, title } = props;
   return (
     <>

src/components/PanelComponents/ReturnButton.tsx

@@ -4,7 +4,6 @@ import { Button } from "components/Inputs/Button";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { cJoin } from "helpers/className";
-import { Immutable } from "helpers/types";
 
 interface Props {
   href: string;
@@ -21,7 +20,7 @@ export enum ReturnButtonType {
   Both = "both",
 }
 
-export function ReturnButton(props: Immutable<Props>): JSX.Element {
+export function ReturnButton(props: Props): JSX.Element {
   const { href, title, langui, displayOn, horizontalLine, className } = props;
   const appLayout = useAppLayout();
 

src/components/Panels/ContentPanel.tsx

@@ -1,5 +1,4 @@
 import { cJoin } from "helpers/className";
-import { Immutable } from "helpers/types";
 
 interface Props {
   children: React.ReactNode;
@@ -12,7 +11,7 @@ export enum ContentPanelWidthSizes {
   Full = "full",
 }
 
-export function ContentPanel(props: Immutable<Props>): JSX.Element {
+export function ContentPanel(props: Props): JSX.Element {
   const { width = ContentPanelWidthSizes.Default, children } = props;
 
   return (

src/components/Panels/MainPanel.tsx

@@ -4,7 +4,7 @@ import { NavOption } from "components/PanelComponents/NavOption";
 import { ToolTip } from "components/ToolTip";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { AppStaticProps } from "graphql/getAppStaticProps";
-import { Immutable } from "helpers/types";
+
 import { useMediaDesktop } from "hooks/useMediaQuery";
 import Markdown from "markdown-to-jsx";
 import Link from "next/link";
@@ -16,7 +16,7 @@ interface Props {
   langui: AppStaticProps["langui"];
 }
 
-export function MainPanel(props: Immutable<Props>): JSX.Element {
+export function MainPanel(props: Props): JSX.Element {
   const { langui } = props;
   const isDesktop = useMediaDesktop();
   const {

src/components/Panels/SubPanel.tsx

@@ -1,10 +1,8 @@
-import { Immutable } from "helpers/types";
-
 interface Props {
   children: React.ReactNode;
 }
 
-export function SubPanel(props: Immutable<Props>): JSX.Element {
+export function SubPanel(props: Props): JSX.Element {
   return (
     <div className="grid gap-y-2 px-6 pt-10 pb-20 text-center desktop:py-8 desktop:px-10">
       {props.children}

src/components/Popup.tsx

@@ -1,6 +1,6 @@
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { cIf, cJoin } from "helpers/className";
-import { Immutable } from "helpers/types";
+
 import { Dispatch, SetStateAction, useEffect } from "react";
 import Hotkeys from "react-hot-keys";
 
@@ -15,7 +15,7 @@ interface Props {
   padding?: boolean;
 }
 
-export function Popup(props: Immutable<Props>): JSX.Element {
+export function Popup(props: Props): JSX.Element {
   const {
     setState,
     state,

src/components/PostPage.tsx

@@ -2,7 +2,7 @@ import { AppStaticProps } from "graphql/getAppStaticProps";
 import { getDescription } from "helpers/description";
 import { prettySlug } from "helpers/formatters";
 import { getStatusDescription } from "helpers/others";
-import { Immutable, PostWithTranslations } from "helpers/types";
+import { PostWithTranslations } from "helpers/types";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { Fragment, useMemo } from "react";
 import { AppLayout } from "./AppLayout";
@@ -33,7 +33,7 @@ interface Props {
   appendBody?: JSX.Element;
 }
 
-export function PostPage(props: Immutable<Props>): JSX.Element {
+export function PostPage(props: Props): JSX.Element {
   const {
     post,
     langui,

src/components/PreviewCard.tsx

@@ -14,7 +14,7 @@ import {
   prettySlug,
 } from "helpers/formatters";
 import { ImageQuality } from "helpers/img";
-import { Immutable } from "helpers/types";
+
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import Link from "next/link";
 import { Chip } from "./Chip";
@@ -52,7 +52,7 @@ interface Props {
     | { __typename: "anotherHoverlayName" };
 }
 
-export function PreviewCard(props: Immutable<Props>): JSX.Element {
+export function PreviewCard(props: Props): JSX.Element {
   const {
     href,
     thumbnail,

src/components/PreviewLine.tsx

@@ -2,7 +2,7 @@ import { UploadImageFragment } from "graphql/generated";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { prettySlug } from "helpers/formatters";
 import { ImageQuality } from "helpers/img";
-import { Immutable } from "helpers/types";
+
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import Link from "next/link";
 import { Chip } from "./Chip";
@@ -19,7 +19,7 @@ interface Props {
   bottomChips?: string[];
 }
 
-export function PreviewLine(props: Immutable<Props>): JSX.Element {
+export function PreviewLine(props: Props): JSX.Element {
   const {
     href,
     thumbnail,

src/components/RecorderChip.tsx

@@ -2,7 +2,7 @@ import { Chip } from "components/Chip";
 import { RecorderChipFragment } from "graphql/generated";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { ImageQuality } from "helpers/img";
-import { Immutable } from "helpers/types";
+
 import { Fragment } from "react";
 import { Img } from "./Img";
 import { Markdawn } from "./Markdown/Markdawn";
@@ -14,7 +14,7 @@ interface Props {
   langui: AppStaticProps["langui"];
 }
 
-export function RecorderChip(props: Immutable<Props>): JSX.Element {
+export function RecorderChip(props: Props): JSX.Element {
   const { recorder, langui } = props;
   return (
     <ToolTip

src/components/ThumbnailHeader.tsx

@@ -6,7 +6,7 @@ import { GetContentTextQuery, UploadImageFragment } from "graphql/generated";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { prettyinlineTitle, prettySlug, slugify } from "helpers/formatters";
 import { getAssetURL, ImageQuality } from "helpers/img";
-import { Immutable } from "helpers/types";
+
 import { useLightBox } from "hooks/useLightBox";
 
 interface Props {
@@ -25,7 +25,7 @@ interface Props {
   languageSwitcher?: JSX.Element;
 }
 
-export function ThumbnailHeader(props: Immutable<Props>): JSX.Element {
+export function ThumbnailHeader(props: Props): JSX.Element {
   const {
     langui,
     pre_title,

src/components/Wiki/Chronology/ChronologyItemComponent.tsx

@@ -7,7 +7,7 @@ import {
 } from "graphql/generated";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { getStatusDescription } from "helpers/others";
-import { Immutable } from "helpers/types";
+
 import { Fragment } from "react";
 
 interface Props {
@@ -16,7 +16,7 @@ interface Props {
   langui: AppStaticProps["langui"];
 }
 
-export function ChronologyItemComponent(props: Immutable<Props>): JSX.Element {
+export function ChronologyItemComponent(props: Props): JSX.Element {
   const { langui } = props;
 
   if (props.item.attributes) {

src/components/Wiki/Chronology/ChronologyYearComponent.tsx

@@ -1,7 +1,6 @@
 import { ChronologyItemComponent } from "components/Wiki/Chronology/ChronologyItemComponent";
 import { GetChronologyItemsQuery } from "graphql/generated";
 import { AppStaticProps } from "graphql/getAppStaticProps";
-import { Immutable } from "helpers/types";
 
 interface Props {
   year: number;
@@ -11,7 +10,7 @@ interface Props {
   langui: AppStaticProps["langui"];
 }
 
-export function ChronologyYearComponent(props: Immutable<Props>): JSX.Element {
+export function ChronologyYearComponent(props: Props): JSX.Element {
   const { langui } = props;
 
   return (

src/contexts/AppLayoutContext.tsx

@@ -1,9 +1,5 @@
 import { isDefined } from "helpers/others";
-import {
-  Immutable,
-  LibraryItemUserStatus,
-  RequiredNonNullable,
-} from "helpers/types";
+import { LibraryItemUserStatus, RequiredNonNullable } from "helpers/types";
 import { useDarkMode } from "hooks/useDarkMode";
 import { useStateWithLocalStorage } from "hooks/useStateWithLocalStorage";
 import React, { ReactNode, useContext, useState } from "react";
@@ -120,7 +116,7 @@ interface Props {
   children: ReactNode;
 }
 
-export function AppContextProvider(props: Immutable<Props>): JSX.Element {
+export function AppContextProvider(props: Props): JSX.Element {
   const [subPanelOpen, setSubPanelOpen] = useStateWithLocalStorage(
     "subPanelOpen",
     initialState.subPanelOpen

src/graphql/getAppStaticProps.ts

@@ -4,10 +4,10 @@ import {
   GetWebsiteInterfaceQuery,
 } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
-import { Immutable } from "helpers/types";
+
 import { GetStaticPropsContext } from "next";
 
-export type AppStaticProps = Immutable<{
+export type AppStaticProps = {
   langui: NonNullable<
     NonNullable<
       GetWebsiteInterfaceQuery["websiteInterfaces"]
@@ -15,7 +15,7 @@ export type AppStaticProps = Immutable<{
   >;
   currencies: NonNullable<GetCurrenciesQuery["currencies"]>["data"];
   languages: NonNullable<GetLanguagesQuery["languages"]>["data"];
-}>;
+};
 
 export async function getAppStaticProps(
   context: GetStaticPropsContext

src/helpers/contents.ts

@@ -1,14 +1,12 @@
-import { ContentWithTranslations, Immutable } from "./types";
+import { ContentWithTranslations } from "./types";
 
-type Group = Immutable<
-  NonNullable<
+type Group = NonNullable<
   NonNullable<
     NonNullable<
       NonNullable<ContentWithTranslations["group"]>["data"]
     >["attributes"]
   >["contents"]
-  >["data"]
->;
+>["data"];
 
 export function getPreviousContent(group: Group, currentSlug: string) {
   for (let index = 0; index < group.length; index += 1) {

src/helpers/description.ts

@@ -1,13 +1,13 @@
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { prettySlug } from "./formatters";
 import { isDefined } from "./others";
-import { Content, Immutable } from "./types";
+import { Content } from "./types";
 
 interface Description {
   langui: AppStaticProps["langui"];
   description?: string | null | undefined;
-  type?: Immutable<Content["type"]>;
-  categories?: Immutable<Content["categories"]>;
+  type?: Content["type"];
+  categories?: Content["categories"];
 }
 
 export function getDescription(props: Description): string {

src/helpers/formatters.ts

@@ -1,9 +1,8 @@
 import { DatePickerFragment, PricePickerFragment } from "graphql/generated";
 import { AppStaticProps } from "../graphql/getAppStaticProps";
 import { convertPrice } from "./numbers";
-import { Immutable } from "./types";
 
-export function prettyDate(datePicker: Immutable<DatePickerFragment>): string {
+export function prettyDate(datePicker: DatePickerFragment): string {
   let result = "";
   if (datePicker.year) result += datePicker.year.toString();
   if (datePicker.month)
@@ -14,7 +13,7 @@ export function prettyDate(datePicker: Immutable<DatePickerFragment>): string {
 }
 
 export function prettyPrice(
-  pricePicker: Immutable<PricePickerFragment>,
+  pricePicker: PricePickerFragment,
   currencies: AppStaticProps["currencies"],
   targetCurrencyCode?: string
 ): string {
@@ -58,7 +57,7 @@ export function prettyinlineTitle(
 }
 
 export function prettyItemType(
-  metadata: Immutable<any>,
+  metadata: any,
   langui: AppStaticProps["langui"]
 ): string | undefined | null {
   switch (metadata.__typename) {
@@ -80,7 +79,7 @@ export function prettyItemType(
 }
 
 export function prettyItemSubType(
-  metadata: Immutable<
+  metadata:
     | {
         __typename: "ComponentMetadataAudio";
         subtype?: {
@@ -157,7 +156,6 @@ export function prettyItemSubType(
       }
     | { __typename: "Error" }
     | null
-  >
 ): string {
   if (metadata) {
     switch (metadata.__typename) {

src/helpers/img.ts

@@ -1,5 +1,4 @@
 import { UploadImageFragment } from "graphql/generated";
-import { Immutable } from "./types";
 
 export enum ImageQuality {
   Small = "small",
@@ -25,10 +24,7 @@ export function getAssetFilename(path: string): string {
   return result[0];
 }
 
-export function getAssetURL(
-  url: string,
-  quality: Immutable<ImageQuality>
-): string {
+export function getAssetURL(url: string, quality: ImageQuality): string {
   let newUrl = url;
   newUrl = newUrl.replace(/^\/uploads/u, `/${quality}`);
   newUrl = newUrl.replace(/.jpg$/u, ".webp");
@@ -71,8 +67,8 @@ export function getImgSizesByQuality(
 }
 
 export function getOgImage(
-  quality: Immutable<ImageQuality>,
-  image: Immutable<UploadImageFragment>
+  quality: ImageQuality,
+  image: UploadImageFragment
 ): OgImage {
   const imgSize = getImgSizesByQuality(
     image.width ?? 0,

src/helpers/libraryItem.ts

@@ -4,14 +4,14 @@ import { AppStaticProps } from "graphql/getAppStaticProps";
 import { prettyinlineTitle, prettyDate } from "./formatters";
 import { convertPrice } from "./numbers";
 import { isDefined } from "./others";
-import { Immutable, LibraryItemUserStatus } from "./types";
+import { LibraryItemUserStatus } from "./types";
 type Items = NonNullable<GetLibraryItemsPreviewQuery["libraryItems"]>["data"];
-type GroupLibraryItems = Map<string, Immutable<Items>>;
+type GroupLibraryItems = Map<string, Items>;
 
 export function getGroups(
   langui: AppStaticProps["langui"],
   groupByType: number,
-  items: Immutable<Items>
+  items: Items
 ): GroupLibraryItems {
   switch (groupByType) {
     case 0: {
@@ -148,13 +148,13 @@ export function getGroups(
 
 export function filterItems(
   appLayout: AppLayoutState,
-  items: Immutable<Items>,
+  items: Items,
   searchName: string,
   showSubitems: boolean,
   showPrimaryItems: boolean,
   showSecondaryItems: boolean,
   filterUserStatus: LibraryItemUserStatus | undefined
-): Immutable<Items> {
+): Items {
   return [...items].filter((item) => {
     if (!showSubitems && !item.attributes?.root_item) return false;
     if (showSubitems && isUntangibleGroupItem(item.attributes?.metadata?.[0])) {
@@ -196,7 +196,6 @@ export function filterItems(
 }
 
 // TODO: Properly type this shit
-// Best attempt was Immutable<NonNullable<NonNullable<Items[number]["attributes"]>["metadata"]>[number]>
 export function isUntangibleGroupItem(metadata: any) {
   return (
     metadata &&
@@ -208,9 +207,9 @@ export function isUntangibleGroupItem(metadata: any) {
 
 export function sortBy(
   orderByType: number,
-  items: Immutable<Items>,
+  items: Items,
   currencies: AppStaticProps["currencies"]
-): Immutable<Items> {
+): Items {
   switch (orderByType) {
     case 0:
       return [...items].sort((a, b) => {

src/helpers/numbers.ts

@@ -1,11 +1,8 @@
 import { GetCurrenciesQuery, PricePickerFragment } from "graphql/generated";
-import { Immutable } from "./types";
 
 export function convertPrice(
-  pricePicker: Immutable<PricePickerFragment>,
-  targetCurrency: Immutable<
-    NonNullable<GetCurrenciesQuery["currencies"]>["data"][number]
-  >
+  pricePicker: PricePickerFragment,
+  targetCurrency: NonNullable<GetCurrenciesQuery["currencies"]>["data"][number]
 ): number {
   if (
     pricePicker.amount &&

src/helpers/others.ts

@@ -4,7 +4,6 @@ import {
   GetLibraryItemScansQuery,
 } from "graphql/generated";
 import { AppStaticProps } from "../graphql/getAppStaticProps";
-import { Immutable } from "./types";
 
 type SortContentProps =
   | NonNullable<
@@ -18,9 +17,9 @@ type SortContentProps =
       >["data"][number]["attributes"]
     >["contents"];
 
-export function sortContent(contents: Immutable<SortContentProps>) {
+export function sortContent(contents: SortContentProps) {
   if (contents) {
-    const newContent = { ...contents } as SortContentProps;
+    const newContent = { ...contents };
     newContent?.data.sort((a, b) => {
       if (
         a.attributes?.range[0]?.__typename === "ComponentRangePageRange" &&
@@ -33,7 +32,7 @@ export function sortContent(contents: Immutable<SortContentProps>) {
       }
       return 0;
     });
-    return newContent as Immutable<SortContentProps>;
+    return newContent;
   }
   return contents;
 }

src/helpers/types.ts

@@ -30,14 +30,6 @@ export interface WikiPageWithTranslations
   translations: NonNullable<WikiPage["translations"]>;
 }
 
-type ImmutableBlackList<T> = JSX.Element | React.ReactNode | Function;
-
-export type Immutable<T> = {
-  readonly [K in keyof T]: T[K] extends ImmutableBlackList<T>
-    ? T[K]
-    : Immutable<T[K]>;
-};
-
 export type RequiredNonNullable<T> = Required<{
   [P in keyof T]: NonNullable<T[P]>;
 }>;

src/hooks/useSmartLanguage.tsx

@@ -2,15 +2,15 @@ import { LanguageSwitcher } from "components/Inputs/LanguageSwitcher";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { isDefined } from "helpers/others";
-import { Immutable } from "helpers/types";
+
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useState } from "react";
 
 interface Props<T> {
-  items: Immutable<T[]>;
+  items: T[];
   languages: AppStaticProps["languages"];
-  languageExtractor: (item: NonNullable<Immutable<T>>) => string | undefined;
-  transform?: (item: NonNullable<Immutable<T>>) => NonNullable<Immutable<T>>;
+  languageExtractor: (item: NonNullable<T>) => string | undefined;
+  transform?: (item: NonNullable<T>) => NonNullable<T>;
 }
 
 function getPreferredLanguage(
@@ -27,7 +27,7 @@ function getPreferredLanguage(
 
 export function useSmartLanguage<T>(
   props: Props<T>
-): [Immutable<T | undefined>, () => JSX.Element] {
+): [T | undefined, () => JSX.Element] {
   const {
     items,
     languageExtractor,
@@ -63,13 +63,15 @@ export function useSmartLanguage<T>(
     );
   }, [preferredLanguages, availableLocales, router.locale]);
 
-  const selectedTranslation = useMemo(
-    () =>
-      isDefined(selectedTranslationIndex)
-        ? transform(items[selectedTranslationIndex])
-        : undefined,
-    [items, selectedTranslationIndex, transform]
-  );
+  const selectedTranslation = useMemo(() => {
+    if (isDefined(selectedTranslationIndex)) {
+      const item = items[selectedTranslationIndex];
+      if (isDefined(item)) {
+        return transform(item);
+      }
+    }
+    return undefined;
+  }, [items, selectedTranslationIndex, transform]);
 
   return [
     selectedTranslation,

src/pages/404.tsx

@@ -5,12 +5,12 @@ import {
 } from "components/PanelComponents/ReturnButton";
 import { ContentPanel } from "components/Panels/ContentPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
-import { Immutable } from "helpers/types";
+
 import { GetStaticPropsContext } from "next";
 
 interface Props extends AppStaticProps {}
 
-export default function FourOhFour(props: Immutable<Props>): JSX.Element {
+export default function FourOhFour(props: Props): JSX.Element {
   const { langui } = props;
   const contentPanel = (
     <ContentPanel>

src/pages/500.tsx

@@ -5,12 +5,12 @@ import {
 } from "components/PanelComponents/ReturnButton";
 import { ContentPanel } from "components/Panels/ContentPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
-import { Immutable } from "helpers/types";
+
 import { GetStaticPropsContext } from "next";
 
 interface Props extends AppStaticProps {}
 
-export default function FiveHundred(props: Immutable<Props>): JSX.Element {
+export default function FiveHundred(props: Props): JSX.Element {
   const { langui } = props;
   const contentPanel = (
     <ContentPanel>

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

@@ -3,11 +3,8 @@ import {
   getPostStaticProps,
   PostStaticProps,
 } from "graphql/getPostStaticProps";
-import { Immutable } from "helpers/types";
 
-export default function AccordsHandbook(
-  props: Immutable<PostStaticProps>
-): JSX.Element {
+export default function AccordsHandbook(props: PostStaticProps): JSX.Element {
   const { post, langui, languages, currencies } = props;
   return (
     <PostPage

src/pages/about-us/contact.tsx

@@ -6,14 +6,12 @@ import {
 } from "graphql/getPostStaticProps";
 import { cIf, cJoin } from "helpers/className";
 import { randomInt } from "helpers/numbers";
-import { Immutable } from "helpers/types";
+
 import { useRouter } from "next/router";
 import { RequestMailProps, ResponseMailProps } from "pages/api/mail";
 import { useState } from "react";
 
-export default function AboutUs(
-  props: Immutable<PostStaticProps>
-): JSX.Element {
+export default function AboutUs(props: PostStaticProps): JSX.Element {
   const { post, langui, languages, currencies } = props;
 
   const router = useRouter();

src/pages/about-us/index.tsx

@@ -4,12 +4,12 @@ import { NavOption } from "components/PanelComponents/NavOption";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { SubPanel } from "components/Panels/SubPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
-import { Immutable } from "helpers/types";
+
 import { GetStaticPropsContext } from "next";
 
 interface Props extends AppStaticProps {}
 
-export default function AboutUs(props: Immutable<Props>): JSX.Element {
+export default function AboutUs(props: Props): JSX.Element {
   const { langui } = props;
   const subPanel = (
     <SubPanel>

src/pages/archives/index.tsx

@@ -3,13 +3,13 @@ import { NavOption } from "components/PanelComponents/NavOption";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { SubPanel } from "components/Panels/SubPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
-import { Immutable } from "helpers/types";
+
 import { GetStaticPropsContext } from "next";
 import { Icon } from "components/Ico";
 
 interface Props extends AppStaticProps {}
 
-export default function Archives(props: Immutable<Props>): JSX.Element {
+export default function Archives(props: Props): JSX.Element {
   const { langui } = props;
   const subPanel = (
     <SubPanel>

src/pages/chronicles/index.tsx

@@ -2,13 +2,13 @@ import { AppLayout } from "components/AppLayout";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { SubPanel } from "components/Panels/SubPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
-import { Immutable } from "helpers/types";
+
 import { GetStaticPropsContext } from "next";
 import { Icon } from "components/Ico";
 
 interface Props extends AppStaticProps {}
 
-export default function Chronicles(props: Immutable<Props>): JSX.Element {
+export default function Chronicles(props: Props): JSX.Element {
   const { langui } = props;
   const subPanel = (
     <SubPanel>

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

@@ -27,7 +27,7 @@ import {
 } from "helpers/formatters";
 import { isUntangibleGroupItem } from "helpers/libraryItem";
 import { getStatusDescription } from "helpers/others";
-import { ContentWithTranslations, Immutable } from "helpers/types";
+import { ContentWithTranslations } from "helpers/types";
 import { useMediaMobile } from "hooks/useMediaQuery";
 import { AnchorIds, useScrollTopOnChange } from "hooks/useScrollTopOnChange";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
@@ -42,7 +42,7 @@ interface Props extends AppStaticProps {
   content: ContentWithTranslations;
 }
 
-export default function Content(props: Immutable<Props>): JSX.Element {
+export default function Content(props: Props): JSX.Element {
   const { langui, content, languages, currencies } = props;
   const isMobile = useMediaMobile();
 

src/pages/contents/index.tsx

@@ -13,7 +13,7 @@ import { GetContentsQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
 import { prettyinlineTitle, prettySlug } from "helpers/formatters";
-import { Immutable } from "helpers/types";
+
 import { GetStaticPropsContext } from "next";
 import { Fragment, useState, useMemo } from "react";
 import { Icon } from "components/Ico";
@@ -26,7 +26,7 @@ interface Props extends AppStaticProps {
   contents: NonNullable<GetContentsQuery["contents"]>["data"];
 }
 
-type GroupContentItems = Map<string, Immutable<Props["contents"]>>;
+type GroupContentItems = Map<string, Props["contents"]>;
 
 const defaultFiltersState = {
   groupingMethod: -1,
@@ -35,7 +35,7 @@ const defaultFiltersState = {
   searchName: "",
 };
 
-export default function Contents(props: Immutable<Props>): JSX.Element {
+export default function Contents(props: Props): JSX.Element {
   const { langui, contents, languages } = props;
   const hoverable = useMediaHoverable();
 
@@ -250,7 +250,7 @@ export async function getStaticProps(
 function getGroups(
   langui: AppStaticProps["langui"],
   groupByType: number,
-  items: Immutable<Props["contents"]>
+  items: Props["contents"]
 ): GroupContentItems {
   switch (groupByType) {
     case 0: {

src/pages/dev/checkup/contents.tsx

@@ -9,14 +9,14 @@ import { ToolTip } from "components/ToolTip";
 import { DevGetContentsQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
-import { Immutable } from "helpers/types";
+
 import { GetStaticPropsContext } from "next";
 
 interface Props extends AppStaticProps {
   contents: DevGetContentsQuery;
 }
 
-export default function CheckupContents(props: Immutable<Props>): JSX.Element {
+export default function CheckupContents(props: Props): JSX.Element {
   const { contents } = props;
   const testReport = testingContent(contents);
 
@@ -110,7 +110,7 @@ type ReportLine = {
   frontendUrl: string;
 };
 
-function testingContent(contents: Immutable<Props["contents"]>): Report {
+function testingContent(contents: Props["contents"]): Report {
   const report: Report = {
     title: "Contents",
     lines: [],

src/pages/dev/checkup/libraryitems.tsx

@@ -12,16 +12,14 @@ import {
 } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
-import { Immutable } from "helpers/types";
+
 import { GetStaticPropsContext } from "next";
 
 interface Props extends AppStaticProps {
   libraryItems: DevGetLibraryItemsQuery;
 }
 
-export default function CheckupLibraryItems(
-  props: Immutable<Props>
-): JSX.Element {
+export default function CheckupLibraryItems(props: Props): JSX.Element {
   const { libraryItems } = props;
   const testReport = testingLibraryItem(libraryItems);
 
@@ -115,9 +113,7 @@ type ReportLine = {
   frontendUrl: string;
 };
 
-function testingLibraryItem(
-  libraryItems: Immutable<Props["libraryItems"]>
-): Report {
+function testingLibraryItem(libraryItems: Props["libraryItems"]): Report {
   const report: Report = {
     title: "Contents",
     lines: [],

src/pages/dev/editor.tsx

@@ -8,7 +8,7 @@ import {
 import { Popup } from "components/Popup";
 import { ToolTip } from "components/ToolTip";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
-import { Immutable } from "helpers/types";
+
 import { GetStaticPropsContext } from "next";
 import { useCallback, useState } from "react";
 import TurndownService from "turndown";
@@ -17,7 +17,7 @@ import { TOC } from "components/Markdown/TOC";
 
 interface Props extends AppStaticProps {}
 
-export default function Editor(props: Immutable<Props>): JSX.Element {
+export default function Editor(props: Props): JSX.Element {
   const handleInput = useCallback((text: string) => {
     setMarkdown(text);
   }, []);
@@ -62,9 +62,9 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
     properties?: Record<string, string>,
     addInnerNewLines?: boolean
   ) {
-    const textarea = document.querySelector(
-      "#editorTextArea"
-    ) as HTMLTextAreaElement;
+    const textarea =
+      document.querySelector<HTMLTextAreaElement>("#editorTextArea");
+    if (textarea) {
       const { value, selectionStart, selectionEnd } = textarea;
 
       if (
@@ -77,6 +77,7 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
         wrap(wrapper, properties, addInnerNewLines);
       }
     }
+  }
 
   function unwrap(wrapper: string) {
     transformationWrapper((value, selectionStart, selectionEnd) => {
@@ -126,9 +127,9 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
       selectedEnd: number
     ) => { prependLength: number; transformedValue: string }
   ) {
-    const textarea = document.querySelector(
-      "#editorTextArea"
-    ) as HTMLTextAreaElement;
+    const textarea =
+      document.querySelector<HTMLTextAreaElement>("#editorTextArea");
+    if (textarea) {
       const { value, selectionStart, selectionEnd } = textarea;
 
       const { prependLength, transformedValue } = transformation(
@@ -144,6 +145,7 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
       textarea.selectionStart = selectionStart + prependLength;
       textarea.selectionEnd = selectionEnd + prependLength;
     }
+  }
 
   const contentPanel = (
     <ContentPanel width={ContentPanelWidthSizes.Full}>

src/pages/index.tsx

@@ -3,9 +3,8 @@ import {
   getPostStaticProps,
   PostStaticProps,
 } from "graphql/getPostStaticProps";
-import { Immutable } from "helpers/types";
 
-export default function Home(props: Immutable<PostStaticProps>): JSX.Element {
+export default function Home(props: PostStaticProps): JSX.Element {
   const { post, langui, languages, currencies } = props;
   return (
     <PostPage

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

@@ -36,7 +36,7 @@ import {
 import { getAssetURL, ImageQuality } from "helpers/img";
 import { convertMmToInch } from "helpers/numbers";
 import { isDefined, sortContent } from "helpers/others";
-import { Immutable } from "helpers/types";
+
 import { useLightBox } from "hooks/useLightBox";
 import { AnchorIds, useScrollTopOnChange } from "hooks/useScrollTopOnChange";
 import {
@@ -58,7 +58,7 @@ interface Props extends AppStaticProps {
   >["data"][number]["id"];
 }
 
-export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
+export default function LibrarySlug(props: Props): JSX.Element {
   const { item, itemId, langui, currencies } = props;
   const appLayout = useAppLayout();
   const hoverable = useMediaHoverable();

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

@@ -16,7 +16,7 @@ import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
 import { prettyinlineTitle, prettySlug } from "helpers/formatters";
 import { isDefined, sortContent } from "helpers/others";
-import { Immutable } from "helpers/types";
+
 import { useLightBox } from "hooks/useLightBox";
 import {
   GetStaticPathsContext,
@@ -34,7 +34,7 @@ interface Props extends AppStaticProps {
   >["data"][number]["id"];
 }
 
-export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
+export default function LibrarySlug(props: Props): JSX.Element {
   const { item, langui, languages } = props;
   const [openLightBox, LightBox] = useLightBox();
   sortContent(item?.contents);

src/pages/library/index.tsx

@@ -12,7 +12,7 @@ import { GetLibraryItemsPreviewQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
 import { prettyItemSubType } from "helpers/formatters";
-import { Immutable, LibraryItemUserStatus } from "helpers/types";
+import { LibraryItemUserStatus } from "helpers/types";
 import { GetStaticPropsContext } from "next";
 import { Fragment, useState, useMemo } from "react";
 import { Icon } from "components/Ico";
@@ -48,7 +48,7 @@ const defaultFiltersState = {
   filterUserStatus: undefined,
 };
 
-export default function Library(props: Immutable<Props>): JSX.Element {
+export default function Library(props: Props): JSX.Element {
   const { langui, items: libraryItems, currencies } = props;
   const appLayout = useAppLayout();
   const hoverable = useMediaHoverable();

src/pages/merch/index.tsx

@@ -2,12 +2,12 @@ import { AppLayout } from "components/AppLayout";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { SubPanel } from "components/Panels/SubPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
-import { Immutable } from "helpers/types";
+
 import { GetStaticPropsContext } from "next";
 import { Icon } from "components/Ico";
 
 interface Props extends AppStaticProps {}
-export default function Merch(props: Immutable<Props>): JSX.Element {
+export default function Merch(props: Props): JSX.Element {
   const { langui } = props;
   const subPanel = (
     <SubPanel>

src/pages/news/[slug].tsx

@@ -6,7 +6,7 @@ import {
 } from "graphql/getPostStaticProps";
 import { getReadySdk } from "graphql/sdk";
 import { isDefined } from "helpers/others";
-import { Immutable } from "helpers/types";
+
 import {
   GetStaticPathsContext,
   GetStaticPathsResult,
@@ -15,7 +15,7 @@ import {
 
 interface Props extends AppStaticProps, PostStaticProps {}
 
-export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
+export default function LibrarySlug(props: Props): JSX.Element {
   const { post, langui, languages, currencies } = props;
   return (
     <PostPage

src/pages/news/index.tsx

@@ -11,7 +11,7 @@ import { GetPostsPreviewQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
 import { prettyDate, prettySlug } from "helpers/formatters";
-import { Immutable } from "helpers/types";
+
 import { GetStaticPropsContext } from "next";
 import { Fragment, useMemo, useState } from "react";
 import { Icon } from "components/Ico";
@@ -29,7 +29,7 @@ const defaultFiltersState = {
   keepInfoVisible: true,
 };
 
-export default function News(props: Immutable<Props>): JSX.Element {
+export default function News(props: Props): JSX.Element {
   const { langui } = props;
   const posts = sortPosts(props.posts);
   const hoverable = useMediaHoverable();
@@ -144,10 +144,8 @@ export async function getStaticProps(
   };
 }
 
-function sortPosts(
-  posts: Immutable<Props["posts"]>
-): Immutable<Props["posts"]> {
-  const sortedPosts = [...posts] as Props["posts"];
+function sortPosts(posts: Props["posts"]): Props["posts"] {
+  const sortedPosts = [...posts];
   sortedPosts
     .sort((a, b) => {
       const dateA = a.attributes?.date ? prettyDate(a.attributes.date) : "9999";
@@ -155,10 +153,10 @@ function sortPosts(
       return dateA.localeCompare(dateB);
     })
     .reverse();
-  return sortedPosts as Immutable<Props["posts"]>;
+  return sortedPosts;
 }
 
-function filterItems(posts: Immutable<Props["posts"]>, searchName: string) {
+function filterItems(posts: Props["posts"], searchName: string) {
   return [...posts].filter((post) => {
     if (searchName.length > 1) {
       if (

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

@@ -15,7 +15,7 @@ import DefinitionCard from "components/Wiki/DefinitionCard";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
 import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
-import { Immutable, WikiPageWithTranslations } from "helpers/types";
+import { WikiPageWithTranslations } from "helpers/types";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import {
   GetStaticPathsContext,
@@ -27,7 +27,7 @@ interface Props extends AppStaticProps {
   page: WikiPageWithTranslations;
 }
 
-export default function WikiPage(props: Immutable<Props>): JSX.Element {
+export default function WikiPage(props: Props): JSX.Element {
   const { page, langui, languages } = props;
 
   const [selectedTranslation, LanguageSwitcher] = useSmartLanguage({

src/pages/wiki/index.tsx

@@ -3,7 +3,7 @@ import { NavOption } from "components/PanelComponents/NavOption";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { SubPanel } from "components/Panels/SubPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
-import { Immutable } from "helpers/types";
+
 import { GetStaticPropsContext } from "next";
 import { Icon } from "components/Ico";
 import { getReadySdk } from "graphql/sdk";
@@ -30,7 +30,7 @@ const defaultFiltersState = {
   keepInfoVisible: true,
 };
 
-export default function Wiki(props: Immutable<Props>): JSX.Element {
+export default function Wiki(props: Props): JSX.Element {
   const { langui, languages } = props;
   const pages = sortPages(props.pages);
   const hoverable = useMediaHoverable();
@@ -149,19 +149,17 @@ export async function getStaticProps(
   };
 }
 
-function sortPages(
-  pages: Immutable<Props["pages"]>
-): Immutable<Props["pages"]> {
-  const sortedPages = [...pages] as Props["pages"];
+function sortPages(pages: Props["pages"]): Props["pages"] {
+  const sortedPages = [...pages];
   sortedPages.sort((a, b) => {
     const slugA = a.attributes?.slug ?? "";
     const slugB = b.attributes?.slug ?? "";
     return slugA.localeCompare(slugB);
   });
-  return sortedPages as Immutable<Props["pages"]>;
+  return sortedPages;
 }
 
-function filterPages(posts: Immutable<Props["pages"]>, searchName: string) {
+function filterPages(posts: Props["pages"], searchName: string) {
   return [...posts].filter((post) => {
     if (searchName.length > 1) {
       if (