Memegle
gif search engine for you
diff --git a/src/pages/Home/components/CustomCursor/CustomCursor.tsx b/src/pages/Home/components/CustomCursor/CustomCursor.tsx
index 4c6ad7b3..fd86a261 100644
--- a/src/pages/Home/components/CustomCursor/CustomCursor.tsx
+++ b/src/pages/Home/components/CustomCursor/CustomCursor.tsx
@@ -14,8 +14,7 @@ const CustomCursor = ({ text = '' }: CustomCursorProps) => {
useEffect(() => {
if (cursorRef.current) {
- cursorRef.current.style.top = `${mousePosition.pageY}px`;
- cursorRef.current.style.left = `${mousePosition.pageX}px`;
+ cursorRef.current.style.transform = `translate(${mousePosition.pageX}px, ${mousePosition.pageY}px)`;
}
}, [mousePosition]);
diff --git a/src/pages/Home/components/FeatureItem/FeatureItem.tsx b/src/pages/Home/components/FeatureItem/FeatureItem.tsx
index c5e93eed..59f30986 100644
--- a/src/pages/Home/components/FeatureItem/FeatureItem.tsx
+++ b/src/pages/Home/components/FeatureItem/FeatureItem.tsx
@@ -8,7 +8,7 @@ type FeatureItemProps = {
const FeatureItem = ({ title, imageSrc }: FeatureItemProps) => {
return (
-
+
{title}
diff --git a/src/pages/Search/components/GifItem/GifItem.module.css b/src/pages/Search/components/GifItem/GifItem.module.css
index 1eea2746..59df7b08 100644
--- a/src/pages/Search/components/GifItem/GifItem.module.css
+++ b/src/pages/Search/components/GifItem/GifItem.module.css
@@ -14,7 +14,7 @@
}
.gifItem:hover {
- top: -0.75rem;
+ transform: translateY(-0.75rem);
}
.gifImage {
diff --git a/src/pages/Search/components/GifItem/GifItem.tsx b/src/pages/Search/components/GifItem/GifItem.tsx
index 5fb41408..63607166 100644
--- a/src/pages/Search/components/GifItem/GifItem.tsx
+++ b/src/pages/Search/components/GifItem/GifItem.tsx
@@ -1,5 +1,5 @@
+import { memo } from 'react';
import { GifImageModel } from '../../../../models/image/gifImage';
-
import styles from './GifItem.module.css';
type GifItemProps = Omit
;
@@ -16,4 +16,4 @@ const GifItem = ({ imageUrl = '', title = '' }: GifItemProps) => {
);
};
-export default GifItem;
+export default memo(GifItem);
diff --git a/src/pages/Search/components/HelpPanel/HelpPanel.module.css b/src/pages/Search/components/HelpPanel/HelpPanel.module.css
index f44a0aaf..5adfb7f1 100644
--- a/src/pages/Search/components/HelpPanel/HelpPanel.module.css
+++ b/src/pages/Search/components/HelpPanel/HelpPanel.module.css
@@ -24,7 +24,7 @@
}
.selectedItemContainer.showSheet {
- right: 0;
+ transform: translateX(-320px);
opacity: 1;
}
diff --git a/src/pages/Search/hooks/useGifSearch.tsx b/src/pages/Search/hooks/useGifSearch.tsx
index 1aaa4a30..f1a2f832 100644
--- a/src/pages/Search/hooks/useGifSearch.tsx
+++ b/src/pages/Search/hooks/useGifSearch.tsx
@@ -2,6 +2,7 @@ import { ChangeEvent, useEffect, useState } from 'react';
import { gifAPIService } from '../../../apis/gifAPIService';
import { GifImageModel } from '../../../models/image/gifImage';
+import { gifCache } from '../../../data/gifCache';
const DEFAULT_PAGE_INDEX = 0;
@@ -12,7 +13,7 @@ export const SEARCH_STATUS = {
NO_RESULT: 'NO_RESULT'
} as const;
-export type SearchStatus = typeof SEARCH_STATUS[keyof typeof SEARCH_STATUS];
+export type SearchStatus = (typeof SEARCH_STATUS)[keyof typeof SEARCH_STATUS];
const useGifSearch = () => {
const [status, setStatus] = useState(SEARCH_STATUS.BEFORE_SEARCH);
@@ -57,11 +58,18 @@ const useGifSearch = () => {
useEffect(() => {
const fetch = async () => {
if (status === SEARCH_STATUS.BEFORE_SEARCH) {
- const gifs: GifImageModel[] = await gifAPIService.getTrending();
-
- setGifList(gifs);
+ if (gifCache.length === 0) {
+ const gifs: GifImageModel[] = await gifAPIService.getTrending();
+
+ gifCache.push(...gifs);
+ setGifList(gifs);
+ }
+ if (gifCache.length !== 0) {
+ setGifList(gifCache);
+ }
}
};
+
fetch();
return () => setStatus(SEARCH_STATUS.LOADING);
diff --git a/src/types/images.d.ts b/src/types/images.d.ts
index 848831fb..fdd78781 100644
--- a/src/types/images.d.ts
+++ b/src/types/images.d.ts
@@ -2,3 +2,5 @@ declare module '*.png';
declare module '*.jpg';
declare module '*.gif';
declare module '*.svg';
+declare module '*.webp';
+declare module '*.mp4';
diff --git a/webpack.config.js b/webpack.config.js
index 1f5f1b41..8bbf8576 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,13 +1,16 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
entry: './src/index.tsx',
resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] },
output: {
- filename: 'bundle.js',
+ filename: 'bundle.[chunkhash].js',
path: path.join(__dirname, '/dist'),
clean: true
},
@@ -18,16 +21,24 @@ module.exports = {
},
devtool: 'source-map',
plugins: [
+ new BundleAnalyzerPlugin(),
new HtmlWebpackPlugin({
template: './index.html'
}),
new CopyWebpackPlugin({
patterns: [{ from: './public', to: './public' }]
}),
- new Dotenv()
+ new Dotenv(),
+ new MiniCssExtractPlugin({
+ filename: '[name].css'
+ })
],
module: {
rules: [
+ {
+ test: /\.css$/i,
+ use: [MiniCssExtractPlugin.loader, 'css-loader']
+ },
{
test: /\.(js|jsx|ts|tsx)$/i,
exclude: /node_modules/,
@@ -36,11 +47,7 @@ module.exports = {
}
},
{
- test: /\.css$/i,
- use: ['style-loader', 'css-loader']
- },
- {
- test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
+ test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif|mp4|webm|webp)$/i,
loader: 'file-loader',
options: {
name: 'static/[name].[ext]'
@@ -49,6 +56,7 @@ module.exports = {
]
},
optimization: {
- minimize: false
+ splitChunks: { chunks: 'all' },
+ minimizer: ['...', new CssMinimizerPlugin()]
}
};