add AppImage

src/entities/Article/ui/ArticleListItem/ArticleListItem.tsx

@@ -13,6 +13,8 @@ import { ArticleTextBlockComponent } from "../ArticleTextBlockComponent/ArticleT
 import { AppLink } from "@/shared/ui/AppLink";
 import { ArticleBlockType, ArticleView } from "../../model/consts/consts";
 import { getRouteArticleDetails } from "@/shared/const/router";
+import { AppImage } from "@/shared/ui/AppImage";
+import { Skeleton } from "@/shared/ui/Skeleton";
 
 interface ArticleListItemProps {
   className?: string;
@@ -50,7 +52,12 @@ export const ArticleListItem = memo((props: ArticleListItemProps) => {
           </div>
           <Text title={article.title} className={cls.title} />
           {types}
-          <img src={article.img} className={cls.img} alt={article.title} />
+          <AppImage
+            fallback={<Skeleton width="100%" height={250} />}
+            src={article.img}
+            className={cls.img}
+            alt={article.title}
+          />
           {textBlock && (
             <ArticleTextBlockComponent
               block={textBlock}
@@ -76,7 +83,12 @@ export const ArticleListItem = memo((props: ArticleListItemProps) => {
     >
       <Card className={cls.card}>
         <div className={cls.imageWrapper}>
-          <img alt={article.title} src={article.img} className={cls.img} />
+          <AppImage
+            fallback={<Skeleton width={200} height={200} />}
+            src={article.img}
+            className={cls.img}
+            alt={article.title}
+          />
           <Text text={article.createdAt} className={cls.date} />
         </div>
         <div className={cls.infoWrapper}>

src/features/avatarDropdown/ui/AvatarDropdown/AvatarDropdown.tsx

@@ -56,7 +56,7 @@ export const AvatarDropdown = memo((props: AvatarDropdownProps) => {
           onClick: onLogout,
         },
       ]}
-      trigger={<Avatar size={30} src={authData.avatar} />}
+      trigger={<Avatar fallbackInverted size={30} src={authData.avatar} />}
     />
   );
 });

src/shared/lib/store/buildSelector.ts

@@ -0,0 +1,13 @@
+import { useSelector } from 'react-redux';
+import { StateSchema } from '@/app/providers/StoreProvider';
+
+type Selector<T> = (state: StateSchema) => T;
+type Result<T> = [() => T, Selector<T>]
+
+export function buildSelector<T>(selector: Selector<T>): Result<T> {
+    const useSelectorHook = () => {
+        return useSelector(selector);
+    };
+
+    return [useSelectorHook, selector];
+}

src/shared/lib/store/buildSlice.ts

@@ -0,0 +1,24 @@
+import { bindActionCreators, createSlice } from '@reduxjs/toolkit';
+import { SliceCaseReducers, CreateSliceOptions } from '@reduxjs/toolkit/dist';
+import { useDispatch } from 'react-redux';
+import { useMemo } from 'react';
+
+export function buildSlice<
+    State,
+    CaseReducers extends SliceCaseReducers<State>,
+    Name extends string = string
+    >(options: CreateSliceOptions<State, CaseReducers, Name>) {
+    const slice = createSlice(options);
+
+    const useActions = (): typeof slice.actions => {
+        const dispatch = useDispatch();
+
+        // @ts-ignore
+        return useMemo(() => bindActionCreators(slice.actions, dispatch), [dispatch]);
+    };
+
+    return {
+        ...slice,
+        useActions,
+    };
+}

src/shared/lib/store/index.ts

@@ -0,0 +1,2 @@
+export { buildSelector } from './buildSelector';
+export { buildSlice } from './buildSlice';

src/shared/ui/Avatar/Avatar.tsx

@@ -1,30 +1,54 @@
-import { classNames, Mods } from '@/shared/lib/classNames/classNames';
-import { CSSProperties, useMemo } from 'react';
-import cls from './Avatar.module.scss';
+import { CSSProperties, useMemo } from "react";
+import { classNames, Mods } from "@/shared/lib/classNames/classNames";
+import cls from "./Avatar.module.scss";
+import { AppImage } from "../AppImage";
+import UserIcon from "../../assets/icons/user-filled.svg";
+import { Icon } from "../Icon";
+import { Skeleton } from "../Skeleton";
 
 interface AvatarProps {
-    className?: string;
-    src?: string;
-    size?: number;
-    alt?: string;
+  className?: string;
+  src?: string;
+  size?: number;
+  alt?: string;
+  fallbackInverted?: boolean;
 }
 
 export const Avatar = ({
-    className, src, size, alt,
+  className,
+  src,
+  size = 100,
+  alt,
+  fallbackInverted,
 }: AvatarProps) => {
-    const mods: Mods = {};
+  const mods: Mods = {};
 
-    const styles = useMemo<CSSProperties>(() => ({
-        width: size || 100,
-        height: size || 100,
-    }), [size]);
+  const styles = useMemo<CSSProperties>(
+    () => ({
+      width: size,
+      height: size,
+    }),
+    [size]
+  );
 
-    return (
-        <img
-            src={src}
-            alt={alt}
-            style={styles}
-            className={classNames(cls.Avatar, mods, [className])}
-        />
-    );
+  const fallback = <Skeleton width={size} height={size} border="50%" />;
+  const errorFallback = (
+    <Icon
+      inverted={fallbackInverted}
+      width={size}
+      height={size}
+      Svg={UserIcon}
+    />
+  );
+
+  return (
+    <AppImage
+      fallback={fallback}
+      errorFallback={errorFallback}
+      src={src}
+      alt={alt}
+      style={styles}
+      className={classNames(cls.Avatar, mods, [className])}
+    />
+  );
 };

src/shared/ui/Icon/Icon.module.scss

@@ -1,7 +1,9 @@
 .Icon {
   fill: var(--primary-color);
+  color: var(--primary-color);
 }
 
 .inverted {
   fill: var(--inverted-primary-color);
+  color: var(--inverted-primary-color);
 }