Remove SC and refactor the code

.babelrc

@@ -1,14 +1,4 @@
 {
   "presets": ["next/babel"],
-  "plugins": [
-    ["styled-components", { "ssr": true }],
-    "inline-react-svg",
-    [
-      "import",
-      {
-        "libraryName": "antd",
-        "style": "css"
-      }
-    ]
-  ]
+  "plugins": ["inline-react-svg"]
 }

.travis.yml

@@ -13,15 +13,10 @@ notifications:
     on_failure: always
 
 stages:
-  - test
   - name: update-algolia
     if: (NOT type IN (pull_request)) AND (branch = master)
 
 jobs:
   include:
-    - stage: test
-      script:
-        - yarn test-ci
-
     - stage: update-algolia
       script: yarn update-speakers

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Yuri Yakovlev
+Copyright (c) 2020 Yuri Yakovlev
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

apiHooks/useAlgolia.ts

@@ -0,0 +1,13 @@
+import useSWR from 'swr';
+
+import fetch from '../libs/fetch';
+
+const useAlgolia = (phrase: string, initialData: any = {}) => {
+  return useSWR(
+    `/api/getSpeakers${phrase ? `?phrase=${phrase}` : ''}`,
+    fetch,
+    initialData,
+  );
+};
+
+export default useAlgolia;

apiHooks/useTwitter.ts

@@ -0,0 +1,9 @@
+import useSWR from 'swr';
+
+import fetch from '../libs/fetch';
+
+const useTwitterImage = (username: string) => {
+  return useSWR(`/api/twitter?username=${username}`, fetch);
+};
+
+export default useTwitterImage;

components/RefinementList.tsx

@@ -1,40 +1,37 @@
-import { Checkbox } from 'antd';
 import { connectRefinementList } from 'react-instantsearch-dom';
-import styled from 'styled-components';
 
-const Wrapper = styled.div`
-  display: grid;
-  grid-gap: 20px;
-  grid-template-columns: repeat(2, 1fr);
-  padding: 20px 0 40px;
+// const Wrapper = styled.div`
+//   display: grid;
+//   grid-gap: 20px;
+//   grid-template-columns: repeat(2, 1fr);
+//   padding: 20px 0 40px;
 
-  @media (min-width: 768px) {
-    grid-template-columns: repeat(3, 1fr);
-  }
+//   @media (min-width: 768px) {
+//     grid-template-columns: repeat(3, 1fr);
+//   }
 
-  @media (min-width: 1440px) {
-    grid-template-columns: repeat(6, 1fr);
-  }
+//   @media (min-width: 1440px) {
+//     grid-template-columns: repeat(6, 1fr);
+//   }
+// `;
 
-  .ant-checkbox-wrapper + .ant-checkbox-wrapper {
-    margin: 0;
-  }
-`;
-
-const RefinementList = connectRefinementList(({ items, refine }) => {
-  return (
-    <Wrapper>
-      {items.map(item => (
-        <Checkbox
+const RefinementList = connectRefinementList(({ items, refine }) => (
+  <div>
+    {items.map((item) => (
+      <>
+        <input
+          type="checkbox"
           onChange={() => refine(item.value)}
           checked={item.isRefined}
           key={item.label.toLowerCase()}
-        >
+        />
+
+        <label>
           {item.label} ({item.count})
-        </Checkbox>
-      ))}
-    </Wrapper>
-  );
-});
+        </label>
+      </>
+    ))}
+  </div>
+));
 
 export default RefinementList;

components/SearchBox.tsx

@@ -1,12 +1,6 @@
-import { Input } from 'antd';
 import debounce from 'lodash.debounce';
 import { useState } from 'react';
 import { connectSearchBox } from 'react-instantsearch-dom';
-import styled from 'styled-components';
-
-const StyledInput = styled(Input.Search)`
-  padding: 20px 0;
-`;
 
 const onChange = (refine: any, value: any) => {
   refine(value);
@@ -23,10 +17,9 @@ const SearchBox = ({ refine, currentRefinement }: any) => {
   };
 
   return (
-    <StyledInput
+    <input
       placeholder="Search speakers by their name, tags and social networks"
       onChange={onChangeDebounced}
-      size="large"
       value={state.value}
     />
   );

components/button/Button.tsx

@@ -1,51 +1,49 @@
-import { Icon } from 'antd';
-import React from 'react';
-import styled from 'styled-components';
+import { FC } from 'react';
 
 interface Props {
   href: string;
   icon: string;
 }
 
-const ButtonWrapper = styled.a`
-  width: 40px;
-  padding: 0;
-  font-size: 18px;
-  border-radius: 50%;
-  height: 40px;
-  line-height: 38px;
-  display: inline-block;
-  font-weight: 400;
-  text-align: center;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  user-select: none;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  position: relative;
-  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
-  color: rgba(0, 0, 0, 0.65);
-  background-color: #fff;
-  border-color: #d9d9d9;
+// const ButtonWrapper = styled.a`
+//   width: 40px;
+//   padding: 0;
+//   font-size: 18px;
+//   border-radius: 50%;
+//   height: 40px;
+//   line-height: 38px;
+//   display: inline-block;
+//   font-weight: 400;
+//   text-align: center;
+//   touch-action: manipulation;
+//   cursor: pointer;
+//   background-image: none;
+//   border: 1px solid transparent;
+//   white-space: nowrap;
+//   user-select: none;
+//   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+//   position: relative;
+//   box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+//   color: rgba(0, 0, 0, 0.65);
+//   background-color: #fff;
+//   border-color: #d9d9d9;
 
-  &:hover,
-  &:focus {
-    color: #40a9ff;
-    background-color: #fff;
-    border-color: #40a9ff;
-  }
+//   &:hover,
+//   &:focus {
+//     color: #40a9ff;
+//     background-color: #fff;
+//     border-color: #40a9ff;
+//   }
 
-  &:last-child {
-    margin-right: 0;
-  }
-`;
+//   &:last-child {
+//     margin-right: 0;
+//   }
+// `;
 
-const Button = ({ href, icon }: Props) => (
-  <ButtonWrapper href={href} target="_blank" rel="noopener noreferrer">
-    <Icon type={icon} />
-  </ButtonWrapper>
+const Button: FC<Props> = ({ href, icon }) => (
+  <a href={href} target="_blank" rel="noopener noreferrer">
+    {/* <Icon type={icon} /> */}
+  </a>
 );
 
 export default Button;

components/button/index.ts

@@ -0,0 +1,3 @@
+import Button from './Button';
+
+export default Button;