feat: feed feature, typescript, remove google, fix errs & warns

src/templates/sidebar.tsx

@@ -1,12 +1,17 @@
-import React, { useState, useEffect } from 'react'
+import * as React from 'react'
 import { Link, navigate } from 'gatsby'
 import kebabCase from 'lodash/kebabCase'
 import styled, { css } from 'styled-components'
-import { pathPrefix } from '../../gatsby-config.js'
+import { FaRss } from 'react-icons/fa'
+import { pathPrefix, siteMetadata } from '../../gatsby-config'
 
 import { StyledHeading } from '../styledComponents/blog'
 import { SolidButton } from '../components/shared/styledComponents'
 
+import type { PageContext, RecentPost, TagCount } from '../types'
+
+const rssFeedUrl = `${siteMetadata.siteUrl}rss.xml`
+
 const styles = css`
   color: #314351;
   opacity: 0.8;
@@ -29,10 +34,16 @@ const linkStyles = css`
     text-decoration: underline;
   }
 `
-const ArchiveLink = styled((props) => <Link {...props} />)`
+const ArchiveLink = styled(Link)`
   ${linkStyles}
 `
-const RecentPostLink = styled((props) => <Link {...props} />)`
+const RssAnchor = styled.a`
+  ${linkStyles}
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`
+const RecentPostLink = styled(Link)`
   ${linkStyles}
   padding: 3px;
   border-bottom: 3px solid #e1e1e1;
@@ -59,30 +70,44 @@ const StyledPara = styled.p`
   ${styles}
 `
 
-const Archives = ({ archives }) => (
+interface ArchivesProps {
+  archives: Record<string, number>
+  basePath?: string
+}
+
+const Archives: React.FC<ArchivesProps> = ({ archives, basePath = '' }) => (
   <>
     {Object.keys(archives)
       .sort()
       .reverse()
-      .map((year, index) => (
-        <ArchiveLink key={year} to={`/${year}/`}>
+      .map((year) => (
+        <ArchiveLink key={year} to={`${basePath}/${year}/`}>
           {year} ({archives[year]})
         </ArchiveLink>
       ))}
   </>
 )
 
-const Categories = ({ tags }) => (
+interface CategoriesProps {
+  tags: TagCount[]
+  basePath?: string
+}
+
+const Categories: React.FC<CategoriesProps> = ({ tags, basePath = '' }) => (
   <>
     {tags.map((tag, i) => (
-      <ArchiveLink key={i} to={`/category/${kebabCase(tag.name)}/`}>
+      <ArchiveLink key={i} to={`${basePath}/category/${kebabCase(tag.name)}/`}>
         {tag.name} ({tag.totalCount})
       </ArchiveLink>
     ))}
   </>
 )
 
-const RecentPosts = ({ posts }) => (
+interface RecentPostsProps {
+  posts: RecentPost[]
+}
+
+const RecentPosts: React.FC<RecentPostsProps> = ({ posts }) => (
   <>
     {posts.map((post) => (
       <RecentPostLink key={post.slug} to={post.slug}>
@@ -92,22 +117,34 @@ const RecentPosts = ({ posts }) => (
   </>
 )
 
-export const SideBar = ({ pageContext, location, notFoundPage = false }) => {
+interface SideBarProps {
+  pageContext: PageContext
+  location: Location
+  notFoundPage?: boolean
+  basePath?: string
+}
+
+export const SideBar: React.FC<SideBarProps> = ({
+  pageContext,
+  location,
+  notFoundPage = false,
+  basePath = ''
+}) => {
   const params = new URLSearchParams(location.search.substring(1))
   const queryUrl = params?.get('s') || ''
-  const [query, setQuery] = useState(queryUrl)
-  useEffect(() => {
+  const [query, setQuery] = React.useState(queryUrl)
+  React.useEffect(() => {
     setQuery(queryUrl)
   }, [queryUrl])
 
-  const handleSubmit = (event) => {
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault()
     navigate('/search?s=' + query)
   }
 
-  const _handleKeyDown = (event) => {
+  const _handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
-      handleSubmit(event)
+      navigate('/search?s=' + query)
     }
   }
 
@@ -130,13 +167,16 @@ export const SideBar = ({ pageContext, location, notFoundPage = false }) => {
             type="text"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            onKeyDown={(e) => _handleKeyDown(e)}
+            onKeyDown={_handleKeyDown}
             className="form-control"
             placeholder="Search"
             aria-label="Search"
             aria-describedby="button-addon2"
           />
-          <SolidButton theme="dark" onClick={handleSubmit}>
+          <SolidButton
+            theme="dark"
+            onClick={() => navigate('/search?s=' + query)}
+          >
             Search
           </SolidButton>
           <form onSubmit={handleSubmit}></form>
@@ -168,11 +208,17 @@ export const SideBar = ({ pageContext, location, notFoundPage = false }) => {
         <>
           <SideBarSection>
             <StyledHeading>Archives</StyledHeading>
-            <Archives archives={pageContext.archives} />
+            <Archives archives={pageContext.archives} basePath={basePath} />
           </SideBarSection>
           <SideBarSection>
             <StyledHeading>Categories</StyledHeading>
-            <Categories tags={pageContext.tags} />
+            <Categories tags={pageContext.tags} basePath={basePath} />
+          </SideBarSection>
+          <SideBarSection>
+            <StyledHeading>Subscribe</StyledHeading>
+            <RssAnchor href={rssFeedUrl} target="_blank" rel="noopener">
+              <FaRss /> RSS Feed
+            </RssAnchor>
           </SideBarSection>
         </>
       )}