Refactor / Codepen Added

Refactor to more accurately name components. Codepen icon and item added.
danielcranney · Mar 10, 2022 · 48f2218 · 48f2218 · vercel · Mar 10, 2022
1 parent 92065c9
commit 48f2218
Show file tree

Hide file tree

Showing 13 changed files with 143 additions and 125 deletions.
diff --git a/components/IntroductionArticle.js → components/IntroItem.js b/components/IntroductionArticle.js → components/IntroItem.js
@@ -3,7 +3,7 @@ import { ACTIONS } from "../pages/_app";
 import FormLabel from "./forms/FormLabel";
 import FormInput from "./forms/FormInput";
 
-const IntroductionArticle = forwardRef((props, ref) => {
+const IntroItem = forwardRef((props, ref) => {
   const { formLabelText, formLabelIcon, section, type, inputPlaceholder } =
     props;
   return (
@@ -20,6 +20,6 @@ const IntroductionArticle = forwardRef((props, ref) => {
   );
 });
 
-IntroductionArticle.displayName = "IntroductionArticle";
+IntroItem.displayName = "IntroItem";
 
-export default IntroductionArticle;
+export default IntroItem;
diff --git a/components/IntroductionArticleWithLink.js → components/IntroLinkItem.js b/components/IntroductionArticleWithLink.js → components/IntroLinkItem.js
@@ -1,8 +1,8 @@
 import React, { useContext, forwardRef } from "react";
 import { ACTIONS } from "../pages/_app";
-import SocialInput from "./SocialInput";
+import SocialInput from "./forms/MinimalFormInput";
 
-const IntroductionArticleWithLink = forwardRef((props, ref) => {
+const IntroLinkItem = forwardRef((props, ref) => {
   const { section, type, inputPlaceholder, linkPrefix } = props;
   return (
     <article className="flex flex-col flex-1 w-full">
@@ -22,6 +22,6 @@ const IntroductionArticleWithLink = forwardRef((props, ref) => {
   );
 });
 
-IntroductionArticleWithLink.displayName = "IntroductionArticleWithLink";
+IntroLinkItem.displayName = "IntroLinkItem";
 
-export default IntroductionArticleWithLink;
+export default IntroLinkItem;
diff --git a/components/IntroductionTextarea.js → components/IntroTextarea.js b/components/IntroductionTextarea.js → components/IntroTextarea.js
@@ -3,7 +3,7 @@ import { ACTIONS } from "../pages/_app";
 import FormLabel from "./forms/FormLabel";
 import FormTextarea from "./forms/FormTextarea";
 
-const IntroductionTextarea = forwardRef((props, ref) => {
+const IntroTextarea = forwardRef((props, ref) => {
   const { formLabelText, formLabelIcon, section, type, inputPlaceholder } =
     props;
   return (
@@ -20,6 +20,6 @@ const IntroductionTextarea = forwardRef((props, ref) => {
   );
 });
 
-IntroductionTextarea.displayName = "IntroductionTextarea";
+IntroTextarea.displayName = "IntroTextarea";
 
-export default IntroductionTextarea;
+export default IntroTextarea;
diff --git a/components/SocialArticle.js → components/SocialItem.js b/components/SocialArticle.js → components/SocialItem.js
@@ -2,9 +2,9 @@ import React, { useContext, forwardRef } from "react";
 import Image from "next/image";
 import { StateContext } from "../pages/_app";
 import FormLabel from "./forms/FormLabel";
-import SocialInput from "./SocialInput";
+import MinimalFormInput from "./forms/MinimalFormInput";
 
-const SocialArticle = forwardRef((props, ref) => {
+const SocialItem = forwardRef((props, ref) => {
   const {
     formLabelText,
     linkPrefix,
@@ -30,7 +30,7 @@ const SocialArticle = forwardRef((props, ref) => {
         <div className="flex items-center text-sm text-dark-300 bg-dark-900">
           <span className="py-2 pl-2 mt-0 mb-0 leading-4">{linkPrefix}</span>
         </div>
-        <SocialInput
+        <MinimalFormInput
           ref={ref}
           section={section}
           type={account}
@@ -42,6 +42,6 @@ const SocialArticle = forwardRef((props, ref) => {
   );
 });
 
-SocialArticle.displayName = "SocialArticle";
+SocialItem.displayName = "SocialItem";
 
-export default SocialArticle;
+export default SocialItem;
diff --git a/components/buttons/AddRepo.js b/components/buttons/AddRepo.js
@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
 import { StateContext } from "../../pages/_app";
 
-const AddButton = ({ action, repoNumberToAdd }) => {
+const AddRepo = ({ action, repoNumberToAdd }) => {
   const { state, dispatch } = useContext(StateContext);
   return (
     <button
@@ -34,4 +34,4 @@ const AddButton = ({ action, repoNumberToAdd }) => {
   );
 };
 
-export default AddButton;
+export default AddRepo;
diff --git a/components/MenuItem.js → components/buttons/MenuItem.js b/components/MenuItem.js → components/buttons/MenuItem.js
@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
 
-import { ACTIONS } from "../pages/_app";
-import { StateContext } from "../pages/_app";
+import { ACTIONS } from "../../pages/_app";
+import { StateContext } from "../../pages/_app";
 
 const MenuItem = ({ text, section, setSidebarOpen }) => {
   const { state, dispatch } = useContext(StateContext);

diff --git a/components/BadgeStyleSelector.js → components/buttons/StyleBadgeButton.js b/components/BadgeStyleSelector.js → components/buttons/StyleBadgeButton.js
@@ -1,9 +1,9 @@
 import React, { useContext } from "react";
-import { StateContext } from "../pages/_app";
+import { StateContext } from "../../pages/_app";
 
-const BadgeStyleSelector = ({
+const StyleBadgeButton = ({
   badgeText,
-  handleColorToggle,
+  handleStyleBadge,
   badgeKeyToStyle,
   badgeKeyToHide,
   colorList,
@@ -14,7 +14,7 @@ const BadgeStyleSelector = ({
   return (
     <article className={`flex flex-col`}>
       <button
-        onClick={handleColorToggle}
+        onClick={handleStyleBadge}
         name={badgeKeyToHide}
         disabled={!badgesShowing ? true : false}
         className={`border flex flex-col text-xs font-semibold uppercase border-dark-600 items-start group ${
@@ -84,4 +84,4 @@ const BadgeStyleSelector = ({
   );
 };
 
-export default BadgeStyleSelector;
+export default StyleBadgeButton;
diff --git a/components/BadgeSelector.js → components/buttons/ToggleBadgeButton.js b/components/BadgeSelector.js → components/buttons/ToggleBadgeButton.js
@@ -1,14 +1,13 @@
 import React, { useContext } from "react";
-import { StateContext } from "../pages/_app";
-import { FormLabel } from "./forms/FormLabel";
+import { StateContext } from "../../pages/_app";
 
-const BadgeSelector = ({
+const ToggleBadgeButton = ({
   badgeType,
   badgeText,
   profileLink,
-  handleBadgeClick,
+  handleBadgeToggle,
 }) => {
-  const { state, dispatch } = useContext(StateContext);
+  const { state } = useContext(StateContext);
   return (
     <label
       className={`py-3 w-full flex uppercase font-semibold group select-none border border-dark-600 px-2 ${
@@ -21,7 +20,7 @@ const BadgeSelector = ({
         type="checkbox"
         name={badgeType}
         value={state.badges[badgeType].selected}
-        onChange={handleBadgeClick}
+        onChange={handleBadgeToggle}
         className="checkbox-input"
         checked={state.badges[badgeType].selected}
         disabled={
@@ -33,4 +32,4 @@ const BadgeSelector = ({
   );
 };
 
-export default BadgeSelector;
+export default ToggleBadgeButton;
diff --git a/components/BadgeShowSelector.js → ...nts/buttons/ToggleBadgeElementCheckbox.js b/components/BadgeShowSelector.js → ...nts/buttons/ToggleBadgeElementCheckbox.js
@@ -1,9 +1,9 @@
 import React, { useContext } from "react";
-import { StateContext } from "../pages/_app";
+import { StateContext } from "../../pages/_app";
 
-const BadgeShowSelector = ({
+const ToggleBadgeElementCheckbox = ({
   badgeText,
-  handleBadgeShowClick,
+  handleBadgeElementToggle,
   badgeKeyToHide,
 }) => {
   const { state, dispatch } = useContext(StateContext);
@@ -15,7 +15,7 @@ const BadgeShowSelector = ({
         type="checkbox"
         name={badgeKeyToHide}
         value={state.badges.githubStatsCard[badgeKeyToHide]}
-        onChange={handleBadgeShowClick}
+        onChange={handleBadgeElementToggle}
         className="checkbox-input"
         checked={state.badges.githubStatsCard[badgeKeyToHide]}
       />
@@ -24,4 +24,4 @@ const BadgeShowSelector = ({
   );
 };
 
-export default BadgeShowSelector;
+export default ToggleBadgeElementCheckbox;
diff --git a/components/SocialInput.js → components/forms/MinimalFormInput.js b/components/SocialInput.js → components/forms/MinimalFormInput.js
@@ -1,15 +1,15 @@
 import React, { useContext, forwardRef } from "react";
-import { StateContext } from "../pages/_app";
+import { StateContext } from "../../pages/_app";
 
-const SocialInput = forwardRef((props, ref) => {
+const MinimalFormInput = forwardRef((props, ref) => {
   const { placeholder, action, type, section } = props;
   const { state, dispatch } = useContext(StateContext);
   return (
     <input
-      className="minimal-input-field"
+      name={type}
+      className="minimal-input-field appearance-none"
       placeholder={placeholder}
       ref={ref}
-      name={type}
       value={state[section][type]["linkSuffix"]}
       onChange={() =>
         dispatch({
@@ -21,6 +21,6 @@ const SocialInput = forwardRef((props, ref) => {
   );
 });
 
-SocialInput.displayName = "SocialInput";
+MinimalFormInput.displayName = "MinimalFormInput";
 
-export default SocialInput;
+export default MinimalFormInput;
diff --git a/pages/_app.js b/pages/_app.js
@@ -628,6 +628,11 @@ const initialState = {
       linkPrefix: "https://www.codesandbox.com/",
       linkSuffix: "",
     },
+    codepen: {
+      path: "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/codepen.svg",
+      linkPrefix: "https://www.codepen.com/",
+      linkSuffix: "",
+    },
     stackoverflow: {
       path: "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/stackoverflow.svg",
       linkPrefix: "https://www.stackoverflow.com/users/",