From d48216f308f00b40fa122cdaaa7d4f946706f14d Mon Sep 17 00:00:00 2001
From: franco sanchez <franco_genta@hotmail.com>
Date: Tue, 3 Sep 2024 10:39:43 -0300
Subject: [PATCH] style: the favorites view is over for now

---
 src/assets/assets.ts              |   3 +
 src/assets/emptyFavorites.svg     |   1 +
 src/components/AllBooks.tsx       |  11 +-
 src/components/ui/MyContainer.tsx |  18 ++++
 src/hooks/queries.ts              |   8 +-
 src/main.tsx                      |   9 +-
 src/pages/Book.tsx                |   6 +-
 src/pages/Favorites.tsx           | 160 ++++++++++++++++++++++--------
 src/pages/Search.tsx              |  10 +-
 src/pages/profile/Profile.tsx     |  11 +-
 10 files changed, 157 insertions(+), 80 deletions(-)
 create mode 100644 src/assets/emptyFavorites.svg
 create mode 100644 src/components/ui/MyContainer.tsx

diff --git a/src/assets/assets.ts b/src/assets/assets.ts
index ce2441c..8b1c3ad 100644
--- a/src/assets/assets.ts
+++ b/src/assets/assets.ts
@@ -12,6 +12,8 @@ const images = {
     'https://res.cloudinary.com/xbu/image/upload/v1691664467/xbu_assets/page_not_found_rl8gve.svg',
   NoData:
     'https://res.cloudinary.com/xbu/image/upload/v1708539494/xbu_assets/noData_gs71zg.svg',
+  emptyFavorites:
+    'https://res.cloudinary.com/xbu/image/upload/v1725365540/xbu_assets/undraw_with_love_re_1q3m_yxcely.svg',
 };
 
 export const {
@@ -22,4 +24,5 @@ export const {
   PatternPadWhite,
   PageNotFound,
   NoData,
+  emptyFavorites,
 } = images;
diff --git a/src/assets/emptyFavorites.svg b/src/assets/emptyFavorites.svg
new file mode 100644
index 0000000..4502996
--- /dev/null
+++ b/src/assets/emptyFavorites.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="637.67004" height="652.45733" viewBox="0 0 637.67004 652.45733" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M918.835,775.03866a1.18647,1.18647,0,0,1-1.19006,1.19H282.355a1.19,1.19,0,0,1,0-2.38h635.29A1.18651,1.18651,0,0,1,918.835,775.03866Z" transform="translate(-281.16498 -123.77133)" fill="#ccc"/><path d="M798.261,153.24885a24.78979,24.78979,0,0,0-5.62-11.8,47.50217,47.50217,0,0,0-67.04-4.32995l-.4.36a48.45962,48.45962,0,0,0-77.96,15,45.14609,45.14609,0,0,0,2.03,40.99,47.43088,47.43088,0,0,0,5.59,7.82c2.19,2.5,61.31,68.27,61.9,68.93a.74652.74652,0,0,0,.57.26c.01995,0,.05-.01.07995-.01a.267.267,0,0,0,.12006-.03.7656.7656,0,0,0,.47-.34l.31-.51.37-.63,5.47-9.14c15.17-25.35,35.62-49.27,60.79-71.09a39.02957,39.02957,0,0,0,4.49-4.6,40.469,40.469,0,0,0,9.3-22.76A31.92511,31.92511,0,0,0,798.261,153.24885Z" transform="translate(-281.16498 -123.77133)" fill="#2de000"/><path d="M527.02434,667.40553l11.13406-36.26067a122.38627,122.38627,0,0,0-48.92087-32.776c18.30066,30.31875.56729,69.87,7.957,104.50429a73.61565,73.61565,0,0,0,39.42959,50.16736l16.896,20.93476a123.35654,123.35654,0,0,0,9.06662-102.88786A119.15587,119.15587,0,0,0,548.79,644.56934C538.74966,656.37293,527.02434,667.40553,527.02434,667.40553Z" transform="translate(-281.16498 -123.77133)" fill="#f2f2f2"/><path d="M465.80292,672.0385l-6.20611-37.42042a122.38639,122.38639,0,0,0-58.40373-7.51814c29.90145,18.97483,31.66844,62.28363,53.7288,89.98709a73.6156,73.6156,0,0,0,57.66483,27.31708l24.45913,11.20221a123.35653,123.35653,0,0,0-37.771-96.13254,119.1558,119.1558,0,0,0-24.17522-17.58171C471.37725,656.93459,465.80292,672.0385,465.80292,672.0385Z" transform="translate(-281.16498 -123.77133)" fill="#f2f2f2"/><polygon points="306.87 302.876 303.796 310.026 308.82 335.422 360.075 328.295 359.666 297.329 358.637 290.546 306.87 302.876" fill="#ffb6b6"/><polygon points="280.389 632.005 291.697 632.005 297.078 588.389 280.389 588.389 280.389 632.005" fill="#ffb6b6"/><path d="M593.10322,766.55717l-17.16971-11.86231v-7.7456l-1.996.12473-12.38393.73717-3.6857.21548-2.27948,27.34221H563.697l1.44021-7.65492,3.70841,7.65492h21.51311a4.8342,4.8342,0,0,0,2.74448-8.81168Z" transform="translate(-281.16498 -123.77133)" fill="#2f2e41"/><polygon points="343.907 632.005 355.215 632.005 361.867 567.792 340.619 566.522 343.907 632.005" fill="#ffb6b6"/><path d="M656.622,766.55717l-17.16971-11.86231v-7.7456l-2.17738.12473-12.59948.75981-3.28874.19284-2.27947,27.34221h8.1085l1.44028-7.65492,3.7084,7.65492h21.51312a4.8342,4.8342,0,0,0,2.74448-8.81168Z" transform="translate(-281.16498 -123.77133)" fill="#2f2e41"/><path d="M556.754,718.16366h.044l2.17473-70.91863a18.54444,18.54444,0,0,1,.24332-17.52412l.31136-.56361-.8073-3.74218a23.83637,23.83637,0,0,1,1.36215-14.34564l2.02882-66.15393c-7.24815-46.97408,27.29438-77.6088,27.29438-77.6088l-3.17482-24.62047,55.87035,1.26979-.95036,23.35068,11.1091,38.16821c5.84641,56.95964,6.19416,112.76163.21348,167.23118a1.04,1.04,0,0,0,.06819.46,13.90642,13.90642,0,0,1-1.12309,11.2217,4.24357,4.24357,0,0,0-.50587,1.39231c-1.23214,9.549-1.39259-2.53-3.02545,6.93464l.31771.16066c1.144.39489,1.63466,1.97966,1.09622,3.53981s-1.90242,2.50478-3.04642,2.10989l-29.86695.31928c-1.144-.3948-1.63484-1.97966-1.09622-3.5398.53844-1.56015,1.90242-2.5047,3.04642-2.1099l1.85809.93981-3.10867-10.17079-1.08969-1.01733a4.73667,4.73667,0,0,1,.60218-7.40162h0l.90329-29.52756.43976-12.49986-.906-14.18085-4.18879-63.78535-15.85517,78.438L580.79747,718.953a2.96811,2.96811,0,0,1,.929,2.75281,3.07738,3.07738,0,0,1-3.06579,2.43469H556.675a2.99464,2.99464,0,0,1-2.88387-3.79109A3.03126,3.03126,0,0,1,556.754,718.16366Z" transform="translate(-281.16498 -123.77133)" fill="#2f2e41"/><path d="M576.30538,305.97325a27.66159,27.66159,0,1,0,47.57794-19.18617l-.13277-.13264c-.22131-.23245-.44262-.46476-.675-.68614a.01082.01082,0,0,1-.011-.01107,5.8062,5.8062,0,0,1-.87413-.78555c-3.73412-5.21808-7.968-9.5935-18.22345-6.86C589.20219,282.24706,576.30538,290.69292,576.30538,305.97325Z" transform="translate(-281.16498 -123.77133)" fill="#2f2e41"/><path d="M728.25644,294.13161a10.13236,10.13236,0,0,1-11.479,10.47017l-71.33755,58.54655-10.89644-19.15214,73.54881-51.527a10.18731,10.18731,0,0,1,20.16421,1.66246Z" transform="translate(-281.16498 -123.77133)" fill="#ffb6b6"/><path d="M615.31753,380.41438s2.32373,4.822,11.36246-2.02746c7.23618-5.48354,41.78077-29.1418,49.45438-39.14245a7.95988,7.95988,0,0,0,9.48943-2.27619L666.75029,318.7967c-5.92257.4-5.98315,4.36308-5.47577,6.6387l-15.16833,6.02728-39.50612,22.69718,6.97587,22.79876Z" transform="translate(-281.16498 -123.77133)" fill="#e6e6e6"/><circle cx="329.61699" cy="188.60201" r="23.19543" fill="#ffb7b7"/><path d="M642.42355,427.4274l.23818-12.93968c.94122-1.29278,8.83431-12.57671,7.06518-23.84928-.82784-5.3074-3.7084-9.76426-8.53952-13.23455l-3.11867-7.25795-4.61563-10.72825-13.50665-8.04046-1.87123-3.8105-1.5423-3.164-18.63263-1.85987-4.59293,6.18065-.09075.01135a30.14819,30.14819,0,0,0-11.62413,5.44348A30.676,30.676,0,0,0,569.458,378.6514l.11344,15.03767.02264,2.15467.01135,2.08671,11.62413,31.28872.4423,1.21345,4.55895,12.25921-.7825,1.29284a6.86443,6.86443,0,0,0,1.50825,8.81168l.5444,7.66627.98662-.27223,5.61362-1.56494,42.45927-11.851a7.71064,7.71064,0,0,0,4.02591-2.71042,1.65789,1.65789,0,0,0,.102-.14744,4.2666,4.2666,0,0,0,.4423-.66906c.964-2.43826,1.066-3.096,1.07738-3.77644a9.31192,9.31192,0,0,0,.45365-11.72623Z" transform="translate(-281.16498 -123.77133)" fill="#e6e6e6"/><path d="M586.50694,318.45419c.21023-.03322.42046-.07752.63069-.11075,3.61816-.6417,7.23625-1.27233,10.84333-1.92524l.332-8.17664,4.37048,7.32465c9.96924,3.30831,19.29672,1.43845,28.071-2.68864a79.24916,79.24916,0,0,0,8.40916-4.636c.89125-13.82865-4.69967-22.68158-15.10325-21.75313-.38.03391-.65277-.354-.98477-.52014a.01082.01082,0,0,1-.011-.01107c-.5643-.26554-1.13969-.52-1.71507-.75232a25.55056,25.55056,0,0,0-26.82067,5.20032C587.44748,297.16584,584.26086,308.33,586.50694,318.45419Z" transform="translate(-281.16498 -123.77133)" fill="#2f2e41"/><path d="M601.62,278.97871a4.29931,4.29931,0,0,1-3.54962,3.062c-3.11867,3.85583-6.691,7.93843-11.5788,8.70958a5.56858,5.56858,0,0,1-4.07131-.70311,2.26049,2.26049,0,0,1-.40824-.32885c-1.1567-1.10008-1.24744-3.31151.12473-4.13936-6.1466,2.43826-9.74155,9.0725-10.64879,15.616-.9073,6.54349.35156,13.15509,1.1794,19.71.82784,6.55484,1.19075,13.4386-1.38352,19.52851-3.03935,7.17863-10.02514,12.33859-17.646,13.983-.68048.14743-1.36089.27216-2.05272.35155a20.94228,20.94228,0,0,0-3.37948-8.68695,18.73793,18.73793,0,0,1-.80514,8.98182,35.78744,35.78744,0,0,1-16.40991-4.24138c-6.90646-3.64036-12.65609-9.19729-17.36248-15.42328,8.10857,5.7497,19.31311,7.90445,28.13607,3.35685,7.89309-4.08266,12.55407-12.65617,14.59537-21.29771,2.04129-8.6529-6.53856-19.25425-5.60862-28.08856.94129-8.83439,11.5965-16.33262,17.42552-23.03489,3.71976-4.27543,9.20858-7.43951,14.8676-6.90647a13.36,13.36,0,0,1,11.70353,16.50059c1.61034-2.27948,5.77233-1.78049,6.80437.81656A3.36054,3.36054,0,0,1,601.62,278.97871Z" transform="translate(-281.16498 -123.77133)" fill="#2f2e41"/><path d="M587.13763,318.34344s6.87117-25.64775,36.32523-31.56744c.03315-.01094.14384-.05524.28769-.12156.08846-.05538.19915-.11075.30977-.166-.33192-.18814-.65277-.354-.98477-.52014a.01082.01082,0,0,1-.011-.01107c-.28769-.26554-.57538-.53108-.87415-.78555l-.84092.03323S591.79587,280.52459,587.13763,318.34344Z" transform="translate(-281.16498 -123.77133)" fill="#fd6584"/><path d="M661.05784,440.56631a3.91255,3.91255,0,0,0-3.24327-2.4564,9.314,9.314,0,0,0-4.20817.60916,32.35941,32.35941,0,0,0-13.68284,8.89575l.06355,2.59606a12.42821,12.42821,0,0,0,.20367,15.58884,7.6633,7.6633,0,0,0,3.97884,2.57575,4.47558,4.47558,0,0,0,4.38525-1.32224c1.56785-1.9094.81043-4.78617-.34232-6.9714a25.39877,25.39877,0,0,0-8.55715-9.38238,41.1922,41.1922,0,0,0,17.30278-4.3007,9.75745,9.75745,0,0,0,3.16593-2.22173A3.92272,3.92272,0,0,0,661.05784,440.56631Z" transform="translate(-281.16498 -123.77133)" fill="#2f2e41"/><path d="M768.86706,593.32128l-11.22454.44414a36.24438,36.24438,0,0,0-4.36218,16.88442c6.67793-8.08686,19.46909-7.00952,28.42282-12.47055a21.80106,21.80106,0,0,0,10.15273-15.93743l4.19337-6.7742a36.53168,36.53168,0,0,0-29.64035,7.55492,35.28772,35.28772,0,0,0-6.05748,6.45559C764.63436,591.1265,768.86706,593.32128,768.86706,593.32128Z" transform="translate(-281.16498 -123.77133)" fill="#f2f2f2"/><path d="M712.86706,715.32128l-11.22454.44414a36.24438,36.24438,0,0,0-4.36218,16.88442c6.67793-8.08686,19.46909-7.00952,28.42282-12.47055a21.80106,21.80106,0,0,0,10.15273-15.93743l4.19337-6.7742a36.53168,36.53168,0,0,0-29.64035,7.55492,35.28772,35.28772,0,0,0-6.05748,6.45559C708.63436,713.1265,712.86706,715.32128,712.86706,715.32128Z" transform="translate(-281.16498 -123.77133)" fill="#f2f2f2"/><path d="M448.32893,542.585l-9.51394-5.97264a36.24434,36.24434,0,0,0-13.13557,11.47035c10.07814-2.90228,20.02566,5.21074,30.49895,5.76072a21.80106,21.80106,0,0,0,17.37942-7.41856l7.2864-3.22219a36.53168,36.53168,0,0,0-28.72755-10.505,35.28781,35.28781,0,0,0-8.64483,1.90648C446.0754,538.38326,448.32893,542.585,448.32893,542.585Z" transform="translate(-281.16498 -123.77133)" fill="#f2f2f2"/><path d="M728.664,282.08052c-.22387-1.50324,1.4068-2.57447,2.01685-3.96643a6.341,6.341,0,0,0-.00049-3.81684c-.352-1.68731-.75781-3.47711-1.97937-4.69311a8.04033,8.04033,0,0,0-4.40979-1.84864,38.64786,38.64786,0,0,0-11.943-.21124l3.00988.18311a15.85192,15.85192,0,0,0-5.61444.65149,5.67326,5.67326,0,0,0-3.76672,3.92291c-.37238,1.85785.898,4.034,2.78613,4.19305a3.64128,3.64128,0,0,0-1.49334,7.12769c-.43427,1.17413-1.72675,1.73633-2.83307,2.322-1.10639.58575-2.27063,1.59021-2.0838,2.82806.247,1.63666,2.43426,1.973,4.08789,1.90082l18.00274-.78552a9.63029,9.63029,0,0,0,4.4906-.9325c1.33448-.77832,2.2652-2.48413,1.64881-3.90069C730.10663,283.9604,728.83985,283.26088,728.664,282.08052Z" transform="translate(-281.16498 -123.77133)" fill="#3f3d56"/><path d="M519.87256,442.421c-2.47411,10.86971-3.65,23.19285,2.94906,32.92a22.60018,22.60018,0,0,0,11.69787,8.86176,33.194,33.194,0,0,0,14.9065.9156c11.25543-1.55938,21.25864-7.42213,32.32809-9.69833,4.88493-1.00448,10.06918-1.33649,14.77168.59669,3.52347,1.44848,7.23465,4.36065,7.25156,8.51474.01737,4.26581-3.6876,7.09707-7.37228,8.40863-4.91663,1.75007-10.02624,1.07274-15.12595.85214-5.49244-.23758-11.093.25908-15.65586,3.62276a27.22959,27.22959,0,0,0-8.70142,11.79727c-2.29343,5.5661-3.22429,11.55034-4.69076,17.35774a77.07276,77.07276,0,0,1-5.53231,15.12563A78.35216,78.35216,0,0,1,527.555,566.51028c-3.93926,3.39017-8.72569,6.84394-14.10564,7.15467-4.14959.23967-9.19371-1.50406-10.79318-5.707a8.19475,8.19475,0,0,1,3.83658-9.72918c3.55622-1.79454,7.42916.76542,8.57758,4.279a5.47725,5.47725,0,0,1-.57067,4.93908c-1.07829,1.60788,1.51933,3.11129,2.59041,1.51416,2.48685-3.70824,1.187-8.69548-1.85866-11.66586a8.737,8.737,0,0,0-11.499-.85706,11.3612,11.3612,0,0,0-4.1531,11.73953c1.27929,4.6166,5.81562,7.55311,10.34564,8.2806,5.5941.89838,10.97782-1.30019,15.49346-4.47648a69.45318,69.45318,0,0,0,12.26916-11.333,81.43983,81.43983,0,0,0,16.24638-29.04895c3.30206-10.58122,3.54225-24.55935,13.354-31.70535,5.04883-3.67711,11.2352-3.26928,17.15486-2.93176,5.22555.29795,10.32313.24379,15.117-2.12187,3.95837-1.95338,7.15208-5.55889,7.21812-10.15241.06666-4.63721-3.22567-8.36593-7.10487-10.47861-10.24787-5.58119-22.55427-1.08-32.622,2.64875-10.12432,3.74971-21.68375,8.15072-32.4433,4.20477a20.12461,20.12461,0,0,1-11.11766-10.62283c-2.60543-5.52533-2.97613-11.79462-2.37425-17.791a77.42686,77.42686,0,0,1,1.64958-9.43092c.42785-1.87972-2.46384-2.68225-2.89284-.79752Z" transform="translate(-281.16498 -123.77133)" fill="#3f3d56"/><path d="M569.558,502.90947a10.13238,10.13238,0,0,1,3.12306-15.2197l-15.249-45.14456,12.45169-47.84133,20.0784,9.07715L577.57213,439.8664l9.26965,52.52505a10.18731,10.18731,0,0,1-17.28383,10.518Z" transform="translate(-281.16498 -123.77133)" fill="#ffb6b6"/><path d="M587.93678,355.28532s-4.71583-2.53231-7.99554,8.32391c-2.62564,8.69123-20.49435,55.88042-20.81637,68.48175a7.95988,7.95988,0,0,0-6.33458,7.42316l25.95221,3.59141c4.554-3.80762,2.27154-7.048.52252-8.58972l8.83916-14.97226,18.47515-40.42014L591.3781,357.05526Z" transform="translate(-281.16498 -123.77133)" fill="#e6e6e6"/><path d="M538.261,411.92884a100.84336,100.84336,0,0,1-13.26,27.84q-2.16,3.15006-4.54,6.14a32.49311,32.49311,0,0,0-4.45-6.22c-6.05-6.65-14.16-11-22.03-15.36-7.87-4.36-15.86-9.04-21.42-16.11a28.39908,28.39908,0,0,1-5.24-10.79c-1.26-5.33-.78-10.89,2.33-15.34,4.52-6.47,13.53-8.75,21.19-6.88,7.67,1.87,14.09,7.2,19.06994,13.32-1.62994-7.52,6.3-14.78,13.97-14.12,7.67.67,13.82,7.37,15.86,14.79C541.791,396.60884,540.461,404.54884,538.261,411.92884Z" transform="translate(-281.16498 -123.77133)" fill="#2de000"/><path d="M686.52681,136.80506a30.39729,30.39729,0,0,0-20.20827,12.86372,29.38479,29.38479,0,0,0-3.91316,24.17881,29.97319,29.97319,0,0,0,6.99182,12.65227c1.31812,1.41637,3.436-.70867,2.12132-2.12132a27.5038,27.5038,0,0,1-7.02054-21.451,26.38366,26.38366,0,0,1,11.22814-18.59051,27.2968,27.2968,0,0,1,11.59821-4.63916c1.90267-.28645,1.09419-3.17764-.79752-2.89283Z" transform="translate(-281.16498 -123.77133)" fill="#3f3d56"/><g opacity="0.2"><path d="M789.431,184.12886a39.02957,39.02957,0,0,1-4.49,4.6c-25.17,21.82-45.62,45.74-60.79,71.09l-5.47,9.14-.37.63a15.0419,15.0419,0,0,1-3.33-3.47c-3.5-5.09-3.52-11.78-2.66-17.9a74.63333,74.63333,0,0,1,77.11-64.09Z" transform="translate(-281.16498 -123.77133)"/></g><g opacity="0.2"><path d="M525.001,439.76881q-2.16,3.15006-4.54,6.14a32.49311,32.49311,0,0,0-4.45-6.22c-6.05-6.65-14.16-11-22.03-15.36-7.87-4.36-15.86-9.04-21.42-16.11a28.39908,28.39908,0,0,1-5.24-10.79,75.76566,75.76566,0,0,1,45.9,24.35A73.70884,73.70884,0,0,1,525.001,439.76881Z" transform="translate(-281.16498 -123.77133)"/></g><circle cx="435.586" cy="141.59751" r="4" fill="#3f3d56"/></svg>
\ No newline at end of file
diff --git a/src/components/AllBooks.tsx b/src/components/AllBooks.tsx
index 5c31c37..befd7be 100644
--- a/src/components/AllBooks.tsx
+++ b/src/components/AllBooks.tsx
@@ -20,6 +20,7 @@ import { Aside } from '@components/aside/Aside';
 import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
 import { ResultLength } from '@components/aside/ResultLength';
 import { MostViewed } from '@components/aside/MostViewed';
+import { MyContainer } from '@components/ui/MyContainer';
 
 export function AllBooks() {
   const { ref, inView } = useInView();
@@ -75,13 +76,7 @@ export function AllBooks() {
   return (
     <>
       <ScrollRestoration />
-      <Flex
-        as='article'
-        direction={{ base: 'column', md: 'row' }}
-        maxW={{ base: '1260px', '2xl': '1560px' }}
-        m='0 auto'
-        px={{ base: 5, md: 10, '2xl': 16 }}
-      >
+      <MyContainer>
         <Aside>
           <ResultLength data={data.pages[0].info.totalBooks} />
           <Box mt='5'>
@@ -134,7 +129,7 @@ export function AllBooks() {
             </React.Fragment>
           ))}
         </MySimpleGrid>
-      </Flex>
+      </MyContainer>
       <Box ref={ref}>{fetchingNextPageUI}</Box>
     </>
   );
diff --git a/src/components/ui/MyContainer.tsx b/src/components/ui/MyContainer.tsx
new file mode 100644
index 0000000..476f4eb
--- /dev/null
+++ b/src/components/ui/MyContainer.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Flex } from '@chakra-ui/react';
+
+export function MyContainer({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Flex
+        as='article'
+        direction={{ base: 'column', md: 'row' }}
+        maxW={{ base: '1260px', '2xl': '1560px' }}
+        m='0 auto'
+        px={{ base: 5, md: 10, '2xl': 16 }}
+      >
+        {children}
+      </Flex>
+    </>
+  );
+}
diff --git a/src/hooks/queries.ts b/src/hooks/queries.ts
index 17774b9..8c2bdbe 100644
--- a/src/hooks/queries.ts
+++ b/src/hooks/queries.ts
@@ -144,7 +144,7 @@ function useMoreBooks() {
     refetchOnWindowFocus: false,
     gcTime: 3000,
     staleTime: 50000,
-    retry: 1,
+    retry: false,
   });
 }
 
@@ -155,7 +155,7 @@ function useMostViewedBooks(query) {
     refetchOnWindowFocus: false,
     gcTime: 3000,
     staleTime: 50000,
-    retry: 1,
+    retry: false,
   });
 }
 
@@ -166,7 +166,7 @@ function useRelatedBooks(id: string | undefined) {
     refetchOnWindowFocus: false,
     gcTime: 3000,
     staleTime: 50000,
-    retry: 1,
+    retry: false,
   });
 }
 
@@ -177,7 +177,7 @@ function useMoreBooksAuthors(id: string | undefined) {
     refetchOnWindowFocus: false,
     gcTime: 3000,
     staleTime: 50000,
-    retry: 1,
+    retry: false,
   });
 }
 
diff --git a/src/main.tsx b/src/main.tsx
index cdfd8f6..ad48d14 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -18,11 +18,10 @@ Sentry.init({
   dsn: import.meta.env.VITE_SENTRY_DNS,
   integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
   tracesSampleRate: 1.0,
-  tracePropagationTargets: [
-    API_URL,
-    /^\/api\//,
-    // /^https:\/\/xb-api\.vercel\.app\/api/,
-  ],
+  // tracePropagationTargets: [
+  //   API_URL,
+  //   /^\/api\//,
+  // ],
   replaysSessionSampleRate: 0.1,
   replaysOnErrorSampleRate: 1.0,
 });
diff --git a/src/pages/Book.tsx b/src/pages/Book.tsx
index 2965e08..4f34243 100644
--- a/src/pages/Book.tsx
+++ b/src/pages/Book.tsx
@@ -1,5 +1,5 @@
 import React, { lazy, Suspense, useEffect, useState } from 'react';
-import { useParams, useNavigate, NavLink } from 'react-router-dom';
+import { useParams, useNavigate, NavLink, useLocation } from 'react-router-dom';
 import {
   Box,
   Center,
@@ -49,6 +49,7 @@ const MoreBooks = lazy(() => import('@components/cards/MoreBooks'));
 
 export default function Book() {
   const shareUrl = window.location.href;
+  const location = useLocation();
   const getToken = window.localStorage.getItem('app_tk');
   const { pathUrl } = useParams();
   const { currentUser } = useAuth();
@@ -87,7 +88,6 @@ export default function Book() {
 
   if (Array.isArray(bookObject)) {
     const [obj] = data;
-
     bookObject = obj;
   } else {
     bookObject = data;
@@ -102,7 +102,7 @@ export default function Book() {
 
   useEffect(() => {
     setIsFavorite(bookObject.isFavorite);
-  }, [bookObject.isFavorite]);
+  }, [bookObject.isFavorite, location.pathname]);
 
   if (currentUser && isCurrentUserAuthor) {
     btnMoreOptions = (
diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx
index a5cf071..789f9c8 100644
--- a/src/pages/Favorites.tsx
+++ b/src/pages/Favorites.tsx
@@ -1,5 +1,8 @@
-import React from 'react';
-import { Flex } from '@chakra-ui/react';
+import React, { useEffect } from 'react';
+import { NavLink } from 'react-router-dom';
+import { Box, Flex, Icon, Image, Link, Spinner } from '@chakra-ui/react';
+import { useInView } from 'react-intersection-observer';
+import { MdOutlineExplore } from 'react-icons/md';
 
 import { useAllFavoriteByUser } from '@hooks/queries';
 import { useAuth } from '@contexts/AuthContext';
@@ -11,63 +14,132 @@ import { ContainerTitle } from '@components/layout/ContainerTitle';
 import { Aside } from '@components/aside/Aside';
 import { ResultLength } from '@components/aside/ResultLength';
 import { MySliderCategories } from '@components/ui/MySliderCategories';
+import { MyContainer } from '@components/ui/MyContainer';
+import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
+import { emptyFavorites } from '@assets/assets';
 
 export default function Favorites() {
+  const { ref, inView } = useInView();
   const { currentUser } = useAuth();
   const uid = currentUser?.uid;
-  const { data, fetchNextPage, isFetchingNextPage } = useAllFavoriteByUser(uid);
+  const { data, isPending, fetchNextPage, isFetchingNextPage } =
+    useAllFavoriteByUser(uid);
+  let fetchingNextPageUI;
+  let asideAndCardsUI;
 
-  return (
-    <>
-      <MainHead title='Mis favoritos | XBuniverse' />
-      <ContainerTitle title='Mis favoritos' />
-      <MySliderCategories />
-      <Flex
-        as='article'
-        direction={{ base: 'column', md: 'row' }}
-        maxW={{ base: '1260px', '2xl': '1560px' }}
-        m='0 auto'
-        px={{ base: 5, md: 10, '2xl': 16 }}
-      >
+  useEffect(() => {
+    if (inView) fetchNextPage();
+  }, [inView]);
+
+  if (isPending) {
+    return <SkeletonAllBooks showTags={true} />;
+  }
+
+  if (data?.pages[0].info.totalBooks > 0) {
+    asideAndCardsUI = (
+      <>
         <Aside>
           <ResultLength data={data?.pages[0].info.totalBooks} />
-          {/* {aboutCategoriesUI}
-          {asideFilter}  */}
+          {/* {asideFilter} */}
         </Aside>
         <MySimpleGrid>
           {data?.pages.map((page, index) => (
             <React.Fragment key={index}>
-              {page.results.map(
-                ({
-                  id,
-                  category,
-                  language,
-                  title,
-                  authors,
-                  synopsis,
-                  sourceLink,
-                  pathUrl,
-                  image,
-                }: CardType) => (
-                  <React.Fragment key={id}>
-                    <Card
-                      id={id}
-                      category={category}
-                      language={language}
-                      title={title}
-                      authors={authors}
-                      synopsis={synopsis}
-                      sourceLink={sourceLink}
-                      pathUrl={pathUrl}
-                      image={image}
-                    />
-                  </React.Fragment>
-                ),
-              )}
+              {page.results
+                // .slice()
+                // .reverse()
+                .map(
+                  ({
+                    id,
+                    category,
+                    language,
+                    title,
+                    authors,
+                    synopsis,
+                    sourceLink,
+                    pathUrl,
+                    image,
+                  }: CardType) => (
+                    <React.Fragment key={id}>
+                      <Card
+                        id={id}
+                        category={category}
+                        language={language}
+                        title={title}
+                        authors={authors}
+                        synopsis={synopsis}
+                        sourceLink={sourceLink}
+                        pathUrl={pathUrl}
+                        image={image}
+                      />
+                    </React.Fragment>
+                  ),
+                )}
             </React.Fragment>
           ))}
         </MySimpleGrid>
+      </>
+    );
+  } else {
+    asideAndCardsUI = (
+      <Flex
+        w='full'
+        direction='column'
+        justify='center'
+        align='center'
+        mt='20'
+        mb='10'
+      >
+        <Image
+          src={emptyFavorites}
+          maxW='full'
+          w={{ base: '200px', md: '300px' }}
+          mt='5'
+        />
+        <Box
+          my='7'
+          fontSize={{ base: 'sm', md: 'md', lg: 'lg' }}
+          textAlign={{ base: 'center', md: 'left' }}
+        >
+          Todavía no has añadido libros a tus favoritos.
+        </Box>
+        <Link
+          w='auto'
+          display='block'
+          as={NavLink}
+          to='/explore'
+          bg='green.500'
+          color='black'
+          p='3'
+          border='1px'
+          rounded='lg'
+          textAlign='center'
+          _hover={{ outline: 'none', bg: 'green.600' }}
+        >
+          <Flex align='center' justify='center'>
+            <Icon as={MdOutlineExplore} fontSize='25' mr='2' />
+            ¡Explora!
+          </Flex>
+        </Link>
       </Flex>
+    );
+  }
+
+  if (isFetchingNextPage) {
+    fetchingNextPageUI = (
+      <Box p='10' textAlign='center'>
+        <Spinner size={{ base: 'lg', md: 'xl' }} thickness='4px' speed='0.40s' />
+      </Box>
+    );
+  }
+
+  return (
+    <>
+      <MainHead title='Mis favoritos | XBuniverse' />
+      <ContainerTitle title='Mis favoritos' />
+      <MySliderCategories />
+      <MyContainer>{asideAndCardsUI}</MyContainer>
+      <Box ref={ref}>{fetchingNextPageUI}</Box>
     </>
   );
 }
diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
index d9f0cc6..4dfe529 100644
--- a/src/pages/Search.tsx
+++ b/src/pages/Search.tsx
@@ -33,6 +33,7 @@ import { AboutCategories } from '@components/aside/AboutCategories';
 import { Lost } from '@assets/assets';
 import { aboutCategories } from '../constant/constants';
 import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
+import { MyContainer } from '@components/ui/MyContainer';
 
 export default function Search() {
   const { ref, inView } = useInView();
@@ -268,12 +269,7 @@ export default function Search() {
         <SkeletonAllBooks showTags={false} />
       ) : (
         <>
-          <Flex
-            direction={{ base: 'column', md: 'row' }}
-            maxW={{ base: '1260px', '2xl': '1560px' }}
-            m='0 auto'
-            px={{ base: 5, md: 10, '2xl': 16 }}
-          >
+          <MyContainer>
             <Aside>
               <ResultLength data={dataPaginated?.pages[0].info.totalBooks} />
               {aboutCategoriesUI}
@@ -336,7 +332,7 @@ export default function Search() {
                 </Box>
               </Flex>
             )}
-          </Flex>
+          </MyContainer>
         </>
       )}
       {!isFiltering && <Box ref={ref}>{fetchingNextPageUI}</Box>}
diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
index 2483c46..cd2fb56 100644
--- a/src/pages/profile/Profile.tsx
+++ b/src/pages/profile/Profile.tsx
@@ -26,6 +26,7 @@ import { ResultLength } from '@components/aside/ResultLength';
 import { useAuth } from '@contexts/AuthContext';
 import { NoData } from '@assets/assets';
 import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
+import { MyContainer } from '@components/ui/MyContainer';
 // import { logOut } from '../../services/firebase/auth';
 
 export function Profile() {
@@ -216,15 +217,7 @@ export function Profile() {
           PUBLICACIONES
         </Box>
       </Flex>
-      <Flex
-        as='article'
-        direction={{ base: 'column', md: 'row' }}
-        maxW={{ base: '1260px', '2xl': '1560px' }}
-        m='0 auto'
-        px={{ base: 5, md: 10, '2xl': 16 }}
-      >
-        {asideAndCardsUI}
-      </Flex>
+      <MyContainer>{asideAndCardsUI}</MyContainer>
       <Box ref={ref}>{fetchingNextPageUI}</Box>
     </>
   );