From efd2f06f49f95cb9719e722f9e64937ada284c06 Mon Sep 17 00:00:00 2001
From: Aitor Urrutia <3373382+Txarli@users.noreply.github.com>
Date: Sun, 20 Mar 2022 19:14:25 +0100
Subject: [PATCH] Konboa sortzen du (#3)

* feat: konboak sortzen ditu

* fix: responsive-a konpontzen du
---
 back/database/migrations/development.db       | Bin 417792 -> 421888 bytes
 .../content-types/kafetegia/schema.json       |   5 ++
 front/gatsby-config.js                        |   3 +
 front/src/pages/kafetegia.tsx                 |  68 ++++++++++++++----
 front/src/viewQueries/KafetegiaData.ts        |   1 +
 front/src/viewQueries/useKafetegiaData.ts     |  26 +++++++
 6 files changed, 91 insertions(+), 12 deletions(-)

diff --git a/back/database/migrations/development.db b/back/database/migrations/development.db
index c8387d9b8d268d8b1b743fd587ca9b356361d0ca..119e59f1cb665259088051dcc10777565b9ee4c3 100644
GIT binary patch
delta 2563
zcmd^A|8EpU6yLd>+56JozPq-xlm^=Sex-12!w(t+iWn3DQ!!vG2zHTcxgOkJ+bdtn
zw`=hWBH)#i4ye&qu@HkOw01?K6eJKxhy|m977M5ml~52d5u!MIdwjY0Cosu-pLuWI
z?7n&L&6{X%ZuD$!EYBR}IIf1#1V*IQdmoDKsdD;IVf=YtA>$wTY{(El;d2TGxWElF
z(&#zekhrC|4h6efieD;0m0jsomjKmv-H_vAS`hObs#RH_YuoB;aJORZwoS^mO=#<&
zIf!TR$XJVKG9FMStkww@bMQ&RBUC#}<pE{JCf&Prc;~7=GL-8#b*A<V1FYrX4Y&+P
zVK<zHwXjcVkLiw^y9zArXiXZQhk|lwzAOa`)A`{jA~!^&1yay!<vmCW1)75LRJo?H
zJ|cNcd@ibyo0z2=cn1mxf>NZ(A7rvimHi8(`oI)9(j*0)*?cJqgsK}G0`labyhyGI
zsAi7aW|RE&Otzc2Y>qQPB?rI5H*f%U0fiP=43%A0%S51y_w!k(kRDLMtAR%Yw+1c^
zoEkV1K<sK-XkQ2M(Z?qUW@TWaU;`R^jf|vyy?BY2Evo}FdWz8kMt(-sNx71t#Hfmv
z9_C%jU@vb4W!?b4!=l%1;dEP!1#zpTOqq6>pQ<x8e^QQ&+(RvYRw!jx`Onhnu90Lj
zUGF5K`uWGYu@E*`xb!Hp2tTni>5#E)ah8#5cI_&qC7JksC8r)Q)ssX5sC1fSC#TV`
zNrgU{7Fw5w3zgl|aUG&hti*2mdKu27e+wjCffcv_(Wh77G^`r4^JAB?d?ntHspAHy
zK8ELD-4$+tIoxO_$MMMR`r0(EV*Ft_Zk3CbxvjVx(a=p|q2pd8W(tjjnAMYSHwMzU
zIhvWftr@2&<#D_h(M2~&#vM~5Gktc_C=)lAcC=tySFCD>PB}?&sTa+reLixe?HzKp
z^9$ZgS@hmEjg`WI(GfZ557Fj+eh3XYh31|<j0>_1aEgN)@E2Txi|`Aahcj@B1*;dR
z?Jb?Rn<PxuacucKd<BQ#Bj{vxvQ8OVK*F#_<ZVb=<gc&shgeA!ri$KF(UU5=Q$<&*
z=u8zIsiIwtlmWt44lY4I9D|RUSFf__4Kvp(A;ZG*Zb%tQOBrclrxp7-w&6o~8LHu7
z$QS<+``MO5q9eah&l%C^Jfk5fRr@3Unt<d>Tq-G92?btyGem62Lv1o~BR8EQlYHc&
z3uWR&PP$PA2i+@^B4npO$i!|^okZq~ocSXA#d))FyD_L`mReuIrOMQQ$^X)-7OvD2
zCD=l(KA}U2xdaI*opxcinf9IGEwm>_Vye-2+IpHFrc||(c9HfS=U31*?c_*~DG`^6
z99)1t7L;~a2VtlLr6a0~t39U;(aQZKhu!P23SJF78n`uZY2ehrk$_y*E!2pgP;2EH
z48pJQBde5e;RHL{KA^q%JT5X6s!dSuRk`3%IdQ8TyHw6QRjzYj-iYiyee8%V8wWY~
z4)(%&m=9wiL;OuV$iDZUnC52LKxmB3XfV*>gJcBr^x`GrVZqNDWZ<Ub7?@m1BaAg8
zC*7c~I%u~FcG^EkoO<Rr$2uN;a5>4PCG3_dk4DM&=JHYYWMX~u{WTIRU;7;m>#NDO
zd6zO=?{5mEm<5{rp<COibqN`!HG;Zkl9y~Hw&%#uWOt||dD^UbGajDQy+Crc*|}w8
zSaQpZRU}_i+Ln`~q3XM)3oj+v+RV~$>w|lik{nG})j+ay=B}DE7p>X3s=7?$_gVnF
zw*yd-2tb8dyv`ZKjhy&1oPtlq&mj&E0Ein|sWpnF#Rh@(3ga^~wYRr890*00$;I>4
z$Cpi{f}(<HtRqOp$tP8!?~f2XBQp`(X4L1DT^*AcQyL=;>dQ5RDJM@9suSap#`-{r
zULPS`x#!Bzaytt}i7XU#mIx(k=i+GHR+2@}zDY9T;e}WUAHXpK9hfJS3)%&w;!!-k
V=NR@8dS;$5<1Xz~>iZI({0|?|3iAK}

delta 1536
zcmY*Ze{54#6u$S}d*55T^_`9l=Iq+Oj&(!9ZVTcM;+UC{0EUQ0WI)hXx3;rmZ;UR{
zfm^9DD$3X#a3N7Be+V%Vm~?vK4`hoPq7fO0fCLPp2?%5xC?<l4_q9abOV0Pb@0|P2
zyXV{=iF3t?!Qvj5V>Uu4EUiWw?Va)<p8avKEP#D|uLtgtxF_JlTHnz?nX17>bhnKs
zeo`j(IV)G-XgXQ>RuvAW^MWIQBk7xFpPn0~1mTDU;q;cy>+pZaYg@X-mTtUx)Dfi%
z3ARP(GZMpMR;Qvm9nohQ!8o$e!mxO%TlruG-D)n-#EsjEJ>}G3J%aaO48DTh@B{1@
zsUGF9BW*Z$<E}j7#&L6HJk$`1`SM8x4z)CO#LRhSq`fU3GVG)nN6Zd06!QX^j9Z&x
zp?F7QOlps%8yiAxO>@k6M=0i=M5=L9OSpYyllgeeY&IiJ*07R)ht)N<N$s-BUTLr#
z!DToBLpksfa7e=PbiQ*D@cM(K5c~L$MMjpqS@LAbou!ft`CT%X^$=<Er7e-R^v-)w
za!6V|$EQh!cz-gxoGTXiSq>JCQ)EbCugc(yJoGo2E9MWAeO`^sKxBr^=<Tf)PmGay
z3UB_Cr0i?<S7IA_EP1U+Y`aDd<Wc$AtO2UF=A1xz34B8RMNWMt*4S3G#=p_Qs|x5t
zytI=Q^Osi82W%TF3T-m*q5r>tkb&nkVZK5eu*g|OYcOwEO$+ffeyoGuFJ4|v*A*z(
z&$S-9l#+?q-`m@6V~6RzXlc#*sXTu@t>)p))M-l<MRL)inuE}nZ&r$;UOIpsR>i5}
zaIPGi@s|suj~<W}Ahft{njJ0U+mqCn?g{Qx#4%2*r(m?{2q_ikz9k0c{hL^x=wG1j
z&JlYSs{zIX&#T`HGEA{CL4&ghZo(gM6|TSqI1guK;fH|F-KI<)VALqofFl_^58uHT
z@CodY@@a9G!CHaKzC)Kzd^ptH*cNGQksHA`UK-=2cf9nBm+tYhWW01)P0%2TU<A&<
z*RW4cWdkJTY@0zOYgtm(qTfO?)(>w(7-oZ4za^s=bj9%T+bzr|_nyyW<=D&Tn9Pek
zJZiEs?B?q%D&c!gHWj=0k0vW+@>j^@M}KENzBa)o@ZcNFE{rjD&cVlSGu6H|+PDmN
zSt$Q-4DX}~=H!F-u|jcbGwW1%@JmuBHf?899M;B~&l4NiD*o^uc8GTmk^t}D#T=q`
zkaX#jvInOg!9^IBHKpK9XoY&2wGQ~B2U(FkHyJXr<js;NOYSU{WT@!QAv|fV=XDr`
zU*Tss3nyi+A>e~vLj9W0x=U2ULguxQdMqSv3zZT|Y}obbFr!Y{%S#AO!(LbmFThNg
zpkI=Cj_XRfk6#&K6?Q{I7*F@vRFxkdVIJAkM@FUFbH`0-*6rr+NVn|nfJH8TW|WoL
zt(C;O6X{NwQ`K#$;%IhfXHJ1A?__(i_^XRm>smb1<+vR84W8uCk0VXrWnD6#!w!8H
zbV9j)L&mtyKl7*+R<Fx>fmbc%;8m{{7ho0T*tDYB-==4tIqmV4*5%Q_gGXpeJh_1>
PicsHWOB_3@)T(~~N|&<z

diff --git a/back/src/api/kafetegia/content-types/kafetegia/schema.json b/back/src/api/kafetegia/content-types/kafetegia/schema.json
index 51e8d0c..7a0c1b1 100644
--- a/back/src/api/kafetegia/content-types/kafetegia/schema.json
+++ b/back/src/api/kafetegia/content-types/kafetegia/schema.json
@@ -55,6 +55,11 @@
       "type": "component",
       "repeatable": true,
       "component": "kafetegia.edaria"
+    },
+    "konboak": {
+      "type": "component",
+      "repeatable": true,
+      "component": "kafetegia.edaria"
     }
   }
 }
diff --git a/front/gatsby-config.js b/front/gatsby-config.js
index f2c845f..2d1dfd8 100644
--- a/front/gatsby-config.js
+++ b/front/gatsby-config.js
@@ -27,6 +27,9 @@ const query = qs.stringify(
       tostadak: {
         populate: ['alergenoak'],
       },
+      konboak: {
+        populate: ['alergenoak'],
+      },
     },
   },
   {
diff --git a/front/src/pages/kafetegia.tsx b/front/src/pages/kafetegia.tsx
index 34d0620..ec81e3e 100644
--- a/front/src/pages/kafetegia.tsx
+++ b/front/src/pages/kafetegia.tsx
@@ -6,7 +6,7 @@ import { Helmet } from 'react-helmet';
 import { Gainburua } from '../components/Gainburua';
 import { Container } from '../components/Container';
 import styled from 'styled-components';
-import { colors, font, fontWeight, size } from '../ui/theme';
+import { colors, font, fontWeight, media, size } from '../ui/theme';
 
 import BeganoaLogo from '../assets/beganoa.svg';
 import EkologikoaLogo from '../assets/ekologikoa.svg';
@@ -26,6 +26,7 @@ const Kafetegia: React.VFC<PageProps> = () => {
     pikatzekoak,
     gozoak,
     tostadak,
+    konboak,
   } = useKafetegiaData();
 
   return (
@@ -42,8 +43,8 @@ const Kafetegia: React.VFC<PageProps> = () => {
         deskribapena={deskribapena}
       />
 
-      <Container>
-        <ContentWrapper>
+      <ContentWrapper>
+        <Container>
           <TaldeWrapper>
             <IzenburuWrapper>
               <Marra />
@@ -93,7 +94,24 @@ const Kafetegia: React.VFC<PageProps> = () => {
               />
             </ZerrendaWrapper>
           </TaldeWrapper>
+        </Container>
 
+        <KonboWrapper>
+          <Container>
+            <IzenburuWrapper>
+              <Marra />
+              <Izenburua>GOSARI KONBOAK</Izenburua>
+            </IzenburuWrapper>
+
+            <OrduaWrapper>
+              <p>11:00ak arte</p>
+            </OrduaWrapper>
+
+            <ProduktuZerrenda produktuZerrenda={konboak} />
+          </Container>
+        </KonboWrapper>
+
+        <Container>
           <TaldeWrapper>
             <IzenburuWrapper>
               <Marra />
@@ -102,20 +120,41 @@ const Kafetegia: React.VFC<PageProps> = () => {
 
             <AlergenoLegenda />
           </TaldeWrapper>
-        </ContentWrapper>
-      </Container>
+
+          <OnEgin>
+            <p>On egin!</p>
+          </OnEgin>
+        </Container>
+      </ContentWrapper>
     </>
   );
 };
 
+const OrduaWrapper = styled.div`
+  ${font.small()};
+  font-weight: ${fontWeight.bold};
+  text-align: right;
+  margin-bottom: ${size.base}px;
+`;
+
+const KonboWrapper = styled.div`
+  background-color: ${colors.horia};
+  padding-top: ${size.base}px;
+  padding-bottom: ${size.base}px;
+  margin-bottom: ${size.large}px;
+`;
+
+const OnEgin = styled.div`
+  text-align: center;
+  ${font.gargantuan()};
+`;
+
 const ContentWrapper = styled.div`
   padding: ${size.huge}px 0;
 `;
 
 const TaldeWrapper = styled.section`
-  &:not(:last-child) {
-    margin-bottom: ${size.large}px;
-  }
+  margin-bottom: ${size.large}px;
 `;
 
 const ZerrendaWrapper = styled.div`
@@ -126,10 +165,10 @@ const ZerrendaWrapper = styled.div`
 
 const ProduktuZerrenda: React.FC<{
   produktuZerrenda: Produktua[];
-  izena: React.ReactNode;
+  izena?: React.ReactNode;
 }> = ({ produktuZerrenda, izena }) => (
   <ProduktuTaula>
-    <ProduktuMota>{izena}</ProduktuMota>
+    {izena && <ProduktuMota>{izena}</ProduktuMota>}
 
     {produktuZerrenda.map(produktua => (
       <tr key={produktua.id}>
@@ -174,10 +213,15 @@ const ProduktuTaula = styled.table`
 `;
 
 const Ezaugarria = styled.td`
-  width: ${size.medium}px;
-  height: ${size.medium}px;
+  width: ${size.base}px;
+  height: ${size.base}px;
   padding: 0 ${size.xtiny}px;
   vertical-align: top;
+
+  ${media.tablet`
+    width: ${size.medium}px;
+    height: ${size.medium}px;
+  `}
 `;
 
 const Izena = styled.td`
diff --git a/front/src/viewQueries/KafetegiaData.ts b/front/src/viewQueries/KafetegiaData.ts
index 35f573e..3a19872 100644
--- a/front/src/viewQueries/KafetegiaData.ts
+++ b/front/src/viewQueries/KafetegiaData.ts
@@ -10,4 +10,5 @@ export interface KafetegiaData {
   gozoak: Produktua[];
   anizkoJogurta: Produktua;
   tostadak: Produktua[];
+  konboak: Produktua[];
 }
diff --git a/front/src/viewQueries/useKafetegiaData.ts b/front/src/viewQueries/useKafetegiaData.ts
index 1f52ec1..32b4570 100644
--- a/front/src/viewQueries/useKafetegiaData.ts
+++ b/front/src/viewQueries/useKafetegiaData.ts
@@ -16,6 +16,7 @@ interface DataProps {
         gozoak: ProduktuaDTO[];
         anizkoJogurta: ProduktuaDTO;
         tostadak: ProduktuaDTO[];
+        konboak: ProduktuaDTO[];
       };
     };
   };
@@ -35,6 +36,7 @@ export function useKafetegiaData(): KafetegiaData {
           pikatzekoak,
           gozoak,
           tostadak,
+          konboak,
         },
       },
     },
@@ -206,6 +208,29 @@ export function useKafetegiaData(): KafetegiaData {
                 ziapea
               }
             }
+            konboak {
+              id
+              ekologikoa
+              beganoa
+              izena
+              prezioa
+              alergenoak {
+                apioa
+                arraina
+                arrautzak
+                esnekiak
+                fruituLehorrak
+                glutena
+                kakahueteak
+                krustazeoak
+                lupinuak
+                moluskuak
+                sesamoa
+                soja
+                sulfitoak
+                ziapea
+              }
+            }
           }
         }
       }
@@ -222,5 +247,6 @@ export function useKafetegiaData(): KafetegiaData {
     pikatzekoak: pikatzekoak.map(produktuaFactory),
     gozoak: gozoak.map(produktuaFactory),
     tostadak: tostadak.map(produktuaFactory),
+    konboak: konboak.map(produktuaFactory),
   };
 }