feat: typescript migration (#148)

* wip

* feat: finished rewriting api in typescript

* fix: update meteostat

* wip

* feat: list runs

* fix: added pagination

* fix: use static maps api

* feat: add header

* chore: update README.md

* fix: update deps

* feat: add streak selector

* fix: add title to period

BREAKING CHANGE: TYPES

.github/workflows/bump-version.yml

@@ -1,12 +1,12 @@
-name: Bump version
+name: Release
 
 on:
   push:
     branches:
-      - master
+      - main
 
 jobs:
-  bump-version:
+  release:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2

.gitignore

@@ -17,6 +17,7 @@
 
 # misc
 .DS_Store
+*.pem
 
 # debug
 npm-debug.log*
@@ -28,3 +29,6 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+
+# vercel
+.vercel

.releaserc

@@ -1,4 +1,7 @@
 {
+  "branches": [
+    "main"
+  ],
   "plugins": [
     "@semantic-release/commit-analyzer",
     "@semantic-release/release-notes-generator",

README.md

@@ -1,30 +1,19 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# rafael.run
 
-## Getting Started
+Personal page where I log my runs and display them in a nice way.
 
-First, run the development server:
+This application consists in creating a new MongoDB entry for every new activity in my Strava account. This is powered by [Strava Webhooks](https://developers.strava.com/docs/webhooks/).
 
-```bash
-npm run dev
-# or
-yarn dev
-```
+## Built with
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+- [Next.js](https://nextjs.org/)
+- [React](https://reactjs.org/)
+- [styled-components](https://styled-components.com/)
+- [styled-system](https://styled-system.com/)
+- [Mapbox](https://www.mapbox.com/)
+- [Splitbee](https://splitbee.io/)
+- [Meteostat](https://meteostat.net/)
 
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+## Design ~~ripoff~~ inspiration
 
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+- [Nike Run Club](https://www.nike.com/nrc-app)

components/AllSelector.tsx

@@ -0,0 +1,38 @@
+import dayjs from 'dayjs'
+import { ReactElement, useEffect } from 'react'
+
+import useGlobalState from '../hooks/useGlobalState'
+import { DATE_FORMAT } from '../utils/constants'
+
+import SelectorLabel from './SelectorLabel'
+
+const AllSelector = (): ReactElement | null => {
+  const [state, setState] = useGlobalState()
+
+  if (!state.years) {
+    return null
+  }
+
+  const maxYear = Math.max(...state.years)
+  const minYear = Math.min(...state.years)
+
+  useEffect((): void => {
+    setState({
+      range: {
+        label: `${minYear} - ${maxYear}`,
+        value: {
+          start: dayjs().year(minYear).startOf('year').format(DATE_FORMAT),
+          end: dayjs().year(maxYear).endOf('year').format(DATE_FORMAT),
+        },
+      },
+    })
+  }, [])
+
+  return (
+    <SelectorLabel withIcon={false}>
+      {minYear} - {maxYear}
+    </SelectorLabel>
+  )
+}
+
+export default AllSelector

components/Box.ts

@@ -0,0 +1,30 @@
+import styled from 'styled-components'
+import {
+  border,
+  color,
+  flexbox,
+  layout,
+  space,
+  BorderProps,
+  ColorProps,
+  FlexboxProps,
+  LayoutProps,
+  SpaceProps,
+} from 'styled-system'
+
+const Box = styled.div<
+  BorderProps & ColorProps & FlexboxProps & LayoutProps & SpaceProps
+>(
+  {
+    boxSizing: 'border-box',
+    minWidth: 0,
+    width: '100%',
+  },
+  border,
+  color,
+  flexbox,
+  layout,
+  space,
+)
+
+export default Box

components/Button.tsx

@@ -0,0 +1,16 @@
+import styled, { css } from 'styled-components'
+
+const Button = styled.button(
+  ({ theme: { colors } }) => css`
+    background-color: ${colors.black};
+    border: none;
+    border-radius: 9999px;
+    color: ${colors.white};
+    font-size: 1rem;
+    padding: 16px 24px;
+    outline: none;
+    width: 100%;
+  `,
+)
+
+export default Button

components/Container.tsx

@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'react'
+
+import Box from './Box'
+
+const Container: FunctionComponent = ({ children }) => (
+  <Box margin="0 auto" maxWidth="360px">
+    {children}
+  </Box>
+)
+
+export default Container

components/GlobalStyles.tsx

@@ -0,0 +1,24 @@
+import { createGlobalStyle } from 'styled-components'
+
+const GlobalStyles = createGlobalStyle`
+  html,
+  body,
+  #__next {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    font-size: 16px;
+    margin: 0;
+    min-height: 100%;
+    padding: 0;
+    width: 100%;
+  }
+
+  body {
+    font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen,
+      Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica,
+      Arial, sans-serif;
+  }
+`
+
+export default GlobalStyles