refactor: use named exports, remove react imports, and update links (#51

)
adamalston · Nov 20, 2023 · 3b08958 · 3b08958
1 parent 8887160
commit 3b08958
Show file tree

Hide file tree

Showing 23 changed files with 61 additions and 107 deletions.
diff --git a/src/App/App.tsx b/src/App/App.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import './App.scss';
 import { AppProvider } from './AppContext';
 import { Buttons, Content, Footer, Particles, Toggle } from 'components';
-import config from './config';
+import { config } from './config';
 
-const App: React.FC = () => {
+export const App = () => {
   const [isReady, setIsReady]: [boolean, Function] = useState(false);
   const [isMobile, setIsMobile]: [boolean, Function] = useState(false);
 
@@ -49,5 +49,3 @@ const App: React.FC = () => {
     <></>
   );
 };
-
-export default App;
diff --git a/src/App/AppContext.tsx b/src/App/AppContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, Dispatch, useReducer } from 'react';
+import { createContext, Dispatch, ReactNode, useReducer } from 'react';
 
 import { themes } from 'appearance';
 import { Config, Theme } from 'types';
@@ -22,7 +22,7 @@ const initialState: AppContextInterface = {
 
 const actions = { SET_THEME: 'SET_THEME' };
 
-const reducer = (state: any, action: any) => {
+export const reducer = (state: any, action: any) => {
   switch (action.type) {
     case actions.SET_THEME:
       return { ...state, theme: themes[action.value] };
@@ -31,13 +31,13 @@ const reducer = (state: any, action: any) => {
   }
 };
 
-const AppContext = createContext(initialState);
+export const AppContext = createContext(initialState);
 
-const AppProvider: React.FC<AppProviderInterface> = ({
+export const AppProvider = ({
   config,
   isMobile,
   children,
-}) => {
+}: AppProviderInterface & { children: ReactNode }) => {
   initialState.config = config;
   initialState.isMobile = isMobile;
 
@@ -60,5 +60,3 @@ const AppProvider: React.FC<AppProviderInterface> = ({
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
 };
-
-export { AppContext, AppProvider, reducer };
diff --git a/src/App/config.tsx b/src/App/config.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
 import { Config } from 'types';
 import { Email, GitHub, LinkedIn, Resume } from 'icons';
 
-const config: Config = {
+export const config: Config = {
   name: {
     display: 'Adam Alston',
     aria: 'My name is Adam Alston',
@@ -13,30 +12,32 @@ const config: Config = {
   },
   buttons: [
     {
+      name: 'github',
       display: 'GitHub',
       aria: 'Visit my GitHub profile',
       icon: <GitHub />,
       href: 'https://github.com/adamalston/',
     },
     {
+      name: 'linked-in',
       display: 'LinkedIn',
       aria: 'Visit my LinkedIn profile',
       icon: <LinkedIn />,
       href: 'https://www.linkedin.com/in/adam-alston/',
     },
     {
+      name: 'resume',
       display: 'Resume',
       aria: 'View my resume in Google Drive',
       icon: <Resume />,
-      href: 'https://drive.google.com/drive/folders/10k8NWflSYQ5laPzuWtK3bzUKzuOeas8i/',
+      href: 'https://drive.google.com/file/d/1VQ_Oeim_e92QEMi64ejGWY5Hf4RRxfeJ/view',
     },
     {
+      name: 'email',
       display: 'Email',
       aria: 'Send me an email',
       icon: <Email />,
       href: 'mailto:aalston9@gmail.com',
     },
   ],
 };
-
-export default config;
diff --git a/src/Index.test.tsx b/src/Index.test.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
 import { configure, fireEvent, render, screen } from '@testing-library/react';
 
 import '__mocks__/matchMedia';
-import App from 'App/App';
+import { App } from 'App/App';
 import { AppProvider, reducer } from 'App/AppContext';
 import { Footer } from 'components';
 import { themes } from 'appearance';
@@ -104,7 +103,7 @@ describe('application tests', () => {
       parent,
       child,
       /^Resume$/,
-      'https://drive.google.com/drive/folders/10k8NWflSYQ5laPzuWtK3bzUKzuOeas8i/'
+      'https://drive.google.com/file/d/1VQ_Oeim_e92QEMi64ejGWY5Hf4RRxfeJ/view'
     );
   });
 

diff --git a/src/appearance/index.ts b/src/appearance/index.ts
@@ -1,4 +1,2 @@
-import options from './options';
-import themes from './themes';
-
-export { options, themes };
+export * from './options';
+export * from './themes';
diff --git a/src/appearance/options.ts b/src/appearance/options.ts
@@ -1,7 +1,7 @@
 import type { ISourceOptions } from 'tsparticles';
 
 // https://github.com/matteobruni/tsparticles/issues/2771
-const options: ISourceOptions = {
+export const options: ISourceOptions = {
   retinaDetect: true,
   fpsLimit: 90,
   fullScreen: {
@@ -125,5 +125,3 @@ const options: ISourceOptions = {
   },
   key: '3m@62^K^88745%',
 };
-
-export default options;
diff --git a/src/appearance/themes.ts b/src/appearance/themes.ts
@@ -1,6 +1,6 @@
 import { Themes } from 'types';
 
-const themes: Themes = {
+export const themes: Themes = {
   dark: {
     key: 'dark',
     primaryTextColor: '#fff',
@@ -18,5 +18,3 @@ const themes: Themes = {
     shadowColor: 'rgba(255, 255, 255, 0.5)',
   },
 };
-
-export default themes;
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import styled from 'styled-components';
 
 import { AppContext } from 'App/AppContext';
@@ -87,18 +87,18 @@ const Container = styled.div`
   }
 `;
 
-const Buttons: React.FC = () => {
+export const Buttons = () => {
   const { config, theme } = useContext(AppContext);
 
   return (
     <Container theme={theme}>
-      {config.buttons.map(({ display, aria, icon, href }, i) => (
-        <span className="button-container" key={i}>
+      {config.buttons.map(({ name, display, aria, icon, href }) => (
+        <span className="button-container" key={name}>
           <a
             data-v2={`button-${display}`}
             className="button"
             href={href}
-            target="_self"
+            target="_blank"
             rel="noopener noreferrer"
             aria-label={aria}
             title={aria}
@@ -113,5 +113,3 @@ const Buttons: React.FC = () => {
     </Container>
   );
 };
-
-export default Buttons;
diff --git a/src/components/Content.tsx b/src/components/Content.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import styled, { css } from 'styled-components';
 
 import { AppContext } from 'App/AppContext';
@@ -30,7 +30,7 @@ const C = {
   `,
 };
 
-const Content: React.FC = () => {
+export const Content = () => {
   const { config, theme } = useContext(AppContext);
 
   return (
@@ -54,5 +54,3 @@ const Content: React.FC = () => {
     </>
   );
 };
-
-export default Content;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import styled from 'styled-components';
 
 import { AppContext } from 'App/AppContext';
@@ -23,7 +23,7 @@ const F = {
   `,
 };
 
-const Footer: React.FC = () => {
+export const Footer = () => {
   const { isMobile, theme } = useContext(AppContext);
 
   return (
@@ -61,5 +61,3 @@ const Footer: React.FC = () => {
     </F.Container>
   );
 };
-
-export default Footer;
diff --git a/src/components/Particles.tsx b/src/components/Particles.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import styled from 'styled-components';
 import ReactParticles from 'react-tsparticles';
 
@@ -17,7 +17,7 @@ const P = {
   `,
 };
 
-const Particles: React.FC = () => {
+export const Particles = () => {
   const { theme } = useContext(AppContext);
 
   return (
@@ -26,5 +26,3 @@ const Particles: React.FC = () => {
     </P.Container>
   );
 };
-
-export default Particles;
diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { ChangeEvent, useContext } from 'react';
 import styled from 'styled-components';
 
 import { AppContext } from 'App/AppContext';
@@ -47,7 +47,7 @@ const T = {
   `,
 };
 
-const Toggle: React.FC = () => {
+export const Toggle = () => {
   const { theme, setTheme } = useContext(AppContext);
   const isDark: boolean = theme.key === 'dark';
 
@@ -66,8 +66,8 @@ const Toggle: React.FC = () => {
         name="toggle"
         type="checkbox"
         checked={isDark}
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-          handleToggle(e.target.checked)
+        onChange={(event: ChangeEvent<HTMLInputElement>) =>
+          handleToggle(event.target.checked)
         }
         aria-label="Theme toggle"
         title="Theme toggle"
@@ -78,5 +78,3 @@ const Toggle: React.FC = () => {
     </T.Container>
   );
 };
-
-export default Toggle;
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,7 +1,5 @@
-import Buttons from './Buttons';
-import Content from './Content';
-import Footer from './Footer';
-import Particles from './Particles';
-import Toggle from './Toggle';
-
-export { Buttons, Content, Footer, Particles, Toggle };
+export * from './Buttons';
+export * from './Content';
+export * from './Footer';
+export * from './Particles';
+export * from './Toggle';
diff --git a/src/icons/Email.tsx b/src/icons/Email.tsx
@@ -1,12 +1,8 @@
-import React from 'react';
-
-const Email: React.FC = () => (
+export const Email = () => (
   <svg role="img" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
     <path
       fill="currentColor"
       d="M464.004 4.326L15.986 262.714c-23 13.3-20.7 47.198 3.8 57.297l140.206 57.997v101.996c0 30.198 37.802 43.298 56.702 20.299l60.703-73.797L403.8 478.704c19.101 7.9 40.702-4.2 43.802-24.7l64.003-417.08c4.1-26.698-24.601-45.897-47.602-32.598zm-272.01 475.678v-88.796l54.501 22.499zm224.008-30.899l-206.208-85.196L409.302 128.12c4.8-5.6-2.9-13.199-8.5-8.4l-255.31 217.59-113.505-46.797L480.004 32.025z"
     />
   </svg>
 );
-
-export default Email;
diff --git a/src/icons/GitHub.tsx b/src/icons/GitHub.tsx
@@ -1,12 +1,8 @@
-import React from 'react';
-
-const GitHub: React.FC = () => (
+export const GitHub = () => (
   <svg role="img" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
     <path
       fill="currentColor"
       d="M296.133 354.174c49.885-5.891 102.942-24.029 102.942-110.192 0-24.49-8.624-44.448-22.67-59.869 2.266-5.89 9.515-28.114-2.734-58.947 0 0-18.139-5.898-60.759 22.669-18.139-4.983-38.09-8.163-56.682-8.163-19.053 0-39.011 3.18-56.697 8.163-43.082-28.567-61.22-22.669-61.22-22.669-12.241 30.833-4.983 53.057-2.718 58.947-14.061 15.42-22.677 35.379-22.677 59.869 0 86.163 53.057 104.301 102.942 110.192-6.344 5.452-12.241 15.873-14.507 30.387-12.702 5.438-45.808 15.873-65.758-18.592 0 0-11.795-21.31-34.012-22.669 0 0-22.224-.453-1.813 13.592 0 0 14.96 6.812 24.943 32.653 0 0 13.6 43.089 76.179 29.48v38.543c0 5.906-4.53 12.702-15.865 10.89C96.139 438.977 32.2 354.626 32.2 255.77c0-123.807 100.216-224.022 224.03-224.022 123.347 0 224.023 100.216 223.57 224.022 0 98.856-63.946 182.754-152.828 212.688-11.342 2.266-15.873-4.53-15.873-10.89V395.45c.001-20.873-6.811-34.465-14.966-41.276zM512 256.23C512 114.73 397.263 0 256.23 0 114.73 0 0 114.73 0 256.23 0 397.263 114.73 512 256.23 512 397.263 512 512 397.263 512 256.23z"
     />
   </svg>
 );
-
-export default GitHub;
diff --git a/src/icons/LinkedIn.tsx b/src/icons/LinkedIn.tsx
@@ -1,12 +1,8 @@
-import React from 'react';
-
-const LinkedIn: React.FC = () => (
+export const LinkedIn = () => (
   <svg role="img" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
     <path
       fill="currentColor"
       d="M160.008 423h-70V197h70zm6.984-298.004c0-22.629-18.36-40.996-40.976-40.996C103.312 84 85 102.367 85 124.996 85 147.633 103.313 166 126.016 166c22.617 0 40.976-18.367 40.976-41.004zM422 298.664C422 237.996 409.184 193 338.312 193c-34.054 0-56.914 17.031-66.246 34.742H272V197h-68v226h68V310.79c0-29.388 7.48-57.856 43.906-57.856 35.93 0 37.094 33.605 37.094 59.722V423h69zM512 452V60c0-33.086-26.914-60-60-60H60C26.914 0 0 26.914 0 60v392c0 33.086 26.914 60 60 60h392c33.086 0 60-26.914 60-60zM455.26 32C466.694 32 480 45.305 480 56.74v398.52c0 11.435-13.305 24.74-24.74 24.74H56.74C45.306 480 32 466.695 32 455.26V56.74C32 45.306 45.305 32 56.74 32zM452 40"
     />
   </svg>
 );
-
-export default LinkedIn;
diff --git a/src/icons/Moon.tsx b/src/icons/Moon.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-const Moon: React.FC = () => (
+export const Moon = () => (
   <svg
     role="img"
     viewBox="0 0 512 512"
@@ -14,5 +12,3 @@ const Moon: React.FC = () => (
     />
   </svg>
 );
-
-export default Moon;
diff --git a/src/icons/Resume.tsx b/src/icons/Resume.tsx
@@ -1,12 +1,8 @@
-import React from 'react';
-
-const Resume: React.FC = () => (
+export const Resume = () => (
   <svg role="img" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
     <path
       fill="currentColor"
       d="M433.9 97.95L350 14.05c-9-9-21.2-14.1-33.9-14.1H112c-26.5.1-48 21.6-48 48.1v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-332.1c0-12.7-5.1-25-14.1-34zm-22.6 22.7c2.1 2.1 3.5 4.6 4.2 7.4H320v-95.5c2.8.7 5.3 2.1 7.4 4.2zM400 480.05H112c-8.8 0-16-7.2-16-16v-416c0-8.8 7.2-16 16-16h176v104c0 13.3 10.7 24 24 24h104v304c0 8.8-7.2 16-16 16zm-48-244v8c0 6.6-5.4 12-12 12H172c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H172c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H172c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12z"
     />
   </svg>
 );
-
-export default Resume;
diff --git a/src/icons/Sun.tsx b/src/icons/Sun.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-const Sun: React.FC = () => (
+export const Sun = () => (
   <svg
     role="img"
     viewBox="0 0 512 512"
@@ -14,5 +12,3 @@ const Sun: React.FC = () => (
     />
   </svg>
 );
-
-export default Sun;