Merge pull request #7 from luck-js/develop

v1.6-alpha

.env.develop

@@ -1,3 +1,3 @@
-APPOLO_CLIENT_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVkYmViZTNkNDM3OGVhNTExZDE4MGIzZSIsImlzQWRtaW4iOnRydWUsImlhdCI6MTU3Mjc4MTY1NiwiZXhwIjoxNTc1MzczNjU2fQ.--S0L3AC0nJqskUp49_6_yYFs6oCmEyNhRCPsvnt68A
+APPOLO_CLIENT_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVkYmViZTNkNDM3OGVhNTExZDE4MGIzZSIsImlzQWRtaW4iOnRydWUsImlhdCI6MTU3Mjk3MjEwMiwiZXhwIjoxNTc1NTY0MTAyfQ.6dS0-u8mzdBN8N9cJ8e4NF5GMAx_zRe6HoJHojQc5OM
 CLIENT_URL=http://localhost:1337
 SHOULD_SHOW_DRAFT=true

pages/blog/BlogLayout.tsx → components/BlogLayout.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
-import Layout from '../../components/Layout';
-import { Navigation } from '../../components';
+import Layout from './Layout';
+import { Navigation } from './index';
 
 type LayoutProps = {
   backgroundColor: string;

pages/index/Bubbles/Bubble.tsx → components/Bubbles/Bubble.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Konva from 'konva';
 import { Circle } from 'react-konva';
 import { Size } from './BubbleList';
-import { getRandomInt } from '../../../utils';
+import { getRandomInt } from '../../utils';
 
 export interface BubbleConfig {
   radius: number;

pages/index/Bubbles/BubbleList.tsx → components/Bubbles/BubbleList.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import Bubble, { BubbleConfig } from './Bubble';
-import { getRandomInt, helper} from '../../../utils';
+import { getRandomInt, helper, Theme} from '../../utils';
 
 export interface Size {
   width: number;
@@ -26,7 +26,7 @@ const getBubbleProps = ({ width, height }: Size): BubbleConfig => {
   const y = getRandomInt(-height / 5, 0, 20);
   const opacity = 0.6;
 
-  return { radius, x, y, opacity, fill: 'white' };
+  return { radius, x, y, opacity, fill: `${Theme.colors.main}` };
 };
 
 const BubbleList: React.FunctionComponent<BubbleListProps> = ({ size, handleClickBubble }) => {

pages/index/Bubbles/index.tsx → components/Bubbles/index.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import useComponentSize from '@rehooks/component-size';
 //TODO: add react-konva as lazy
 import { Layer, Stage } from 'react-konva';
-import { Theme } from '../../../utils';
+import { Theme } from '../../utils';
 import BubbleList, { Size } from './BubbleList';
 
 const CONTAINER_HEIGHTS = [200, 250, 300];

components/Button/Button.tsx

@@ -1,9 +1,17 @@
 import styled, { css } from 'styled-components';
-import { applyStyleModifiers } from 'styled-components-modifiers';
+import {applyStyleModifiers, ModifierKeys, ModifiersConfig} from 'styled-components-modifiers';
 import { BaseButton } from './BaseButton';
 import * as Theme from '../../utils/theme';
+import {TextStyle} from "../../utils"
 
-const BUTTON_VARIANTS = {
+interface ButtonProps extends TextStyle{
+  modifiers?:ModifierKeys;
+  href?: string;
+  ariaLabel: string;
+
+}
+
+const BUTTON_VARIANTS:ModifiersConfig  = {
   black: () => css`
     color: ${Theme.colors.black};
     
@@ -13,7 +21,8 @@ const BUTTON_VARIANTS = {
   `,
 };
 
-export const Button = styled(BaseButton)<any>`
+
+export const Button = styled(BaseButton)<ButtonProps>`
   font-weight: 700;
   letter-spacing: 0;
   cursor: pointer;

components/Button/NavLink.tsx

@@ -3,8 +3,9 @@ import { Button } from './Button';
 import styled from 'styled-components';
 import { BaseButton } from './BaseButton';
 import * as React from 'react';
+import {ModifierKeys} from "styled-components-modifiers"
 
-const NavLink = ({ modifiers, href, ariaLabel, ...props }: { modifiers?: string[]; href: string, ariaLabel: string }) => {
+const NavLink = ({ modifiers, href, ariaLabel, ...props }: { modifiers?: ModifierKeys; href: string, ariaLabel: string }) => {
   return (
     <NavLink.Container {...props}>
       <Link href={href}>

components/Footer.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from './Box';
+import { TextLink } from './TextLink';
+import { SmallText } from './Typography';
+import { Theme } from '../utils';
+import media from '../utils/media';
+import Link from 'next/link';
+
+const Container = styled(Box)`
+  text-align: center;
+  color: ${Theme.colors.black};
+  background-color: ${Theme.colors.main};
+  
+  padding: ${Theme.space.small}px ${Theme.space.xregular}px;
+  
+  ${media.greaterThan('mobile')`
+    
+  `}
+  
+  ${media.greaterThan('tablet')`
+    padding: ${Theme.space.regular}px ${Theme.space.xregular}px;
+  `}
+  
+  ${media.greaterThan('desktop')`
+    padding: ${Theme.space.xregular}px ${Theme.space.xregular}px;
+  `}
+`;
+
+const Footer = () => {
+  return (
+    <Container>
+      <SmallText>
+        Polityka prywatności{' '}
+        <Link href={'./polityka-prywatnosci-strony'}>
+          <TextLink
+            href={'./polityka-prywatnosci-strony'}
+            aria-label={'przejdź do polityki prywatnosci strony'}
+            modifiers={['black']}
+            underline
+          >
+            strony
+          </TextLink>
+        </Link>{' '}
+        &{' '}
+        <Link href={'./polityka-prywatnosci-pan-mikolaj-luck'}>
+          <TextLink
+            href={'./polityka-prywatnosci-pan-mikolaj-luck'}
+            aria-label={'przejdź do polityki prywatnosci Pan Mikołaj Luck'}
+            modifiers={['black']}
+            underline
+          >
+            Pan Mikołaj Luck
+          </TextLink>
+        </Link>
+      </SmallText>
+    </Container>
+  );
+};
+export default Footer;

components/Layout.tsx

@@ -8,7 +8,7 @@ type LayoutProps = {
 };
 const Container = styled(Box)`
   margin: 0;
-  min-height: 100%;
+  height: 100%;
 `;
 
 const Layout: React.FunctionComponent<LayoutProps> = ({ children, ...props }) => {

components/TextLink.tsx

@@ -1,15 +1,40 @@
-import styled from "styled-components"
+import styled, {css} from "styled-components"
 import {Theme} from "../utils"
+import {applyStyleModifiers, ModifierKeys, ModifiersConfig} from "styled-components-modifiers"
 
+const BUTTON_VARIANTS:ModifiersConfig = {
+  darkGray: () => css`
+    color: ${Theme.colors.darkGray};
+    
+    &:hover {
+      text-decoration-color: ${Theme.colors.darkGray};
+    }
+  `,
+  black: (props) => css`
+    color: ${Theme.colors.black};
+    text-decoration-color: ${props.underline && Theme.colors.black};
+    
+    &:hover {
+      text-decoration-color: ${Theme.colors.black};
+      opacity: ${props.underline && 0.8};
+    }
+  `,
+};
 
-export const TextLink = styled('a')`
-  color: ${Theme.colors.darkGray};
+
+export const TextLink = styled('a')<{modifiers?:ModifierKeys, underline?:boolean}>`
+  color: ${Theme.colors.main};
   
+  cursor: pointer;
   text-decoration: underline;
   text-decoration-color: transparent;
-  transition: text-decoration-color 0.5s;
+  transition: text-decoration-color 0.5s, opacity 0.5s;
+  
+  opacity: 1;
 
   &:hover {
-    text-decoration-color: ${Theme.colors.darkGray};
+    text-decoration-color: ${Theme.colors.main};
   }
+  
+  ${applyStyleModifiers(BUTTON_VARIANTS)};
 `

pages/index/WelcomeSection/Content.tsx → components/WelcomeSection/Content.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-import media from '../../../utils/media';
-import {Flex} from "../../../components"
+import media from '../../utils/media';
+import {Flex} from "../index"
 
 const Content = styled(Flex)`
   max-width: 374px;

pages/index/WelcomeSection/InputWithButton.tsx → components/WelcomeSection/InputWithButton.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { Flex, BaseInput, BaseButton } from '../../../components';
-import media from '../../../utils/media';
-import * as Theme from '../../../utils/theme';
+import { Flex, BaseInput, BaseButton } from '../index';
+import media from '../../utils/media';
+import * as Theme from '../../utils/theme';
 import {useState} from "react"
 
 const Container = styled(Flex)`

pages/index/WelcomeSection/Logo.tsx → components/WelcomeSection/Logo.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import media from '../../../utils/media';
+import media from '../../utils/media';
 
 const Logo = styled('img').attrs({alt: "Logo Luck"})`
   width: 115px;

pages/index/WelcomeSection/index.tsx → components/WelcomeSection/index.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import styled from 'styled-components';
-import {LogoHeading, Navigation} from '../../../components';
+import {LogoHeading, Navigation} from '../index';
 import Content from './Content';
 import Logo from './Logo';
 import InputWithButton from './InputWithButton';

package.json

@@ -27,6 +27,7 @@
     "@types/react-no-ssr": "^1.1.1",
     "apollo-boost": "^0.4.4",
     "apollo-link-state": "^0.4.2",
+    "axios": "^0.19.0",
     "dotenv": "^8.1.0",
     "dotenv-webpack": "^1.7.0",
     "fontfaceobserver": "^2.1.0",

pages/_error.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import {ErrorProps} from "next/error"
+import {NextPageContext} from "next"
+
+
+interface ErrorPage<P = { statusCode: number }> extends React.FunctionComponent<P> {
+  getInitialProps?: ({ res, err, }: NextPageContext) => Promise<ErrorProps> | ErrorProps;
+}
+
+const Error: ErrorPage = ({ statusCode }) => {
+  return <Error statusCode={statusCode} />
+}
+
+Error.getInitialProps = ({ res, err }) => {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
+  if(statusCode === 404 && res) {
+    res.writeHead(301, {
+      Location: '/e404'
+    })
+    res.end()
+  }
+  return { statusCode: (statusCode  as number) }
+}
+
+export default Error

pages/blog/[id].tsx

@@ -3,8 +3,8 @@ import { useQuery } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 import styled from 'styled-components';
 import { NextSeo } from 'next-seo/lib';
-import {MediumText, Canon, Flex, TinySecond, List, RatioLazyImage, Trafalgar} from '../../components';
-import BlogLayout from './BlogLayout';
+import {MediumText, Canon, Flex, TinySecond, List, RatioLazyImage, Trafalgar, TextLink} from '../../components';
+import BlogLayout from '../../components/BlogLayout';
 import { mapToViewPosts, POST_FRAGMENT, ViewPost } from './index';
 import { withApollo, getProcessor, Theme, Post, QueryPostsArgs, Hashtag } from '../../utils';
 import media from '../../utils/media';
@@ -24,6 +24,7 @@ const Header = styled(Trafalgar).attrs({
 const components = {
   p: Text,
   h2: Header,
+  a: ({children}:any) => <TextLink modifiers={["darkGray"]} >{children}</TextLink>,
   img: ContentImage,
   ul: List,
 };

pages/blog/index.tsx

@@ -6,7 +6,7 @@ import gql from 'graphql-tag';
 import styled from 'styled-components';
 import Card from '../../components/Card';
 import { Flex } from '../../components';
-import BlogLayout from './BlogLayout';
+import BlogLayout from '../../components/BlogLayout';
 import media from '../../utils/media';
 // @ts-ignore
 import Masonry from 'react-masonry-css';

pages/bot-politics/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import BlogLayout from '../blog/BlogLayout';
+import BlogLayout from '../../components/BlogLayout';
 import { Theme } from '../../utils';
 import { NextSeo } from 'next-seo/lib';
 import styled from 'styled-components';
@@ -36,16 +36,16 @@ const Index = () => {
   return (
     <>
       <NextSeo
-        title="Luck - Polityka prywatności bota Pan Mikołaj"
+        title="Luck - Polityka prywatności Pan Mikołaj Luck"
         description="Zespół LUCK, jako twórca aplikacji LUCK, ułatwiającej organizowanie losowań prezentów, w swoich działaniach szanuje Twoją prywatność."
       />
       <BlogLayout backgroundColor={Theme.colors.main}>
         <Container>
-          <Canon>Polityka prywatności bota Pan Mikołaj</Canon>
+          <Canon>Polityka prywatności Pan Mikołaj Luck</Canon>
           <Text>
             Zesp&oacute;ł LUCK, jako tw&oacute;rca aplikacji LUCK, ułatwiającej organizowanie
             losowań prezent&oacute;w, w swoich działaniach szanuje Twoją prywatność. Chronimy
-            prywatność os&oacute;b korzystających z bota Pan Mikołaj na platformie Google Asystent,
+            prywatność os&oacute;b korzystających z Pan Mikołaj Luck na platformie Google Asystent,
             w spos&oacute;b opisany poniżej.
           </Text>
           <Text>
@@ -73,14 +73,14 @@ const Index = () => {
             <li>
               <Text>
                 Administrator wyznaczył inspektora ochrony danych, z kt&oacute;rym można
-                skontaktować się poprzez email <TextLink href="mailto:[email protected]">[email protected]</TextLink>. Z Inspektorem ochrony danych można
+                skontaktować się poprzez email <TextLink modifiers={["darkGray"]} href="mailto:[email protected]">[email protected]</TextLink>. Z Inspektorem ochrony danych można
                 się kontaktować we wszystkich sprawach dotyczących przetwarzania danych osobowych
                 oraz korzystania z praw związanych z przetwarzaniem danych.
               </Text>
             </li>
             <li>
               <Text>
-                Twoje dane osobowe przetwarzane są w związku z komunikacją przy użyciu bota. Twoje
+                Twoje dane osobowe przetwarzane są w związku z komunikacją przy użyciu Pan Mikołaj Luck. Twoje
                 dane mogą być także przetwarzane, jeśli udzieliłeś odpowiedniej zgody, w celu
                 prowadzenie komunikacji marketingowej, czyli wysyłki wiadomości z materiałami
                 dotyczącymi aplikacji LUCK.
@@ -100,12 +100,12 @@ const Index = () => {
                 </Text>
               </li>
               <li>
-                <Text>dane przekazane za pomocą bota.</Text>
+                <Text>dane przekazane za pomocą Pan Mikołaj Luck.</Text>
               </li>
             </List>
             <li>
               <Text>
-                Przetwarzamy za pomocą usługi bota następujące dane osobowe naszych
+                Przetwarzamy za pomocą usługi Pan Mikołaj Luck następujące dane osobowe naszych
                 użytkownik&oacute;w:
               </Text>
             </li>
@@ -129,7 +129,7 @@ const Index = () => {
                 przetwarzanie jest niezbędne do realizacje prawnie uzasadnionego interesu
                 administratora danych, polegającego na komunikacji z użytkownikami za pomocą
                 narzędzia bot, na platformie Google Asystent, oraz prowadzenia marketingu
-                bezpośredniego do użytkownik&oacute;w bota po wyrażeniu przez Ciebie zgody na
+                bezpośredniego do użytkownik&oacute;w Pan Mikołaj Luck po wyrażeniu przez Ciebie zgody na
                 otrzymywanie wiadomości marketingowych od zespołu LUCK, zawierających informacje o
                 naszych usługach.
               </Text>

pages/e404.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import Error from "next/error"
+
+const E404 = () => {
+  return <Error statusCode={404} />
+}
+
+export default E404

pages/index/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import Layout from '../../components/Layout';
-import WelcomeSection from './WelcomeSection';
+import WelcomeSection from '../../components/WelcomeSection';
 import { Theme } from '../../utils';
+import Footer from "../../components/Footer"
 
 interface IndexProps {
   analytics: any;
@@ -15,6 +16,7 @@ const Index = ({ analytics }: IndexProps) => {
   return (
     <Layout backgroundColor={Theme.colors.mainContrast}>
       <WelcomeSection handleClickBubble={handleClickBubble} />
+      <Footer />
     </Layout>
   );
 };