refactor: constant/index file refactored

src/common/footer/ExtendedFooter.jsx

@@ -1,5 +1,5 @@
 import { useSearchContext } from 'common/search/search-context';
-import { CREATE_PLAY_DOC_LINK } from 'constants';
+import { PLAY_DOC_LINK } from 'constants';
 import LogoLight from 'images/img-logo-light.svg';
 import { BsGithub } from 'react-icons/bs';
 import { FaDiscord, FaLinkedin, FaMeetup } from 'react-icons/fa';
@@ -105,7 +105,7 @@ const ExtendedFooter = () => {
  <div className="my-4 py-4 mx-auto">
  <a
  className="btn-primary mr-2 mb-2"
- href={CREATE_PLAY_DOC_LINK}
+ href={PLAY_DOC_LINK}
  rel="noopener noreferrer"
  target="_blank"
  >

src/common/header/HeaderNav.jsx

@@ -10,7 +10,7 @@ import SocialShare from 'common/components/SocialShare';
 import { GoX } from 'react-icons/go';
 import { Modal, Box, Typography, Menu } from '@mui/material';
 import { useSearchContext } from 'common/search/search-context';
-import { CREATE_PLAY_DOC_LINK, UMAMI_EVENTS } from 'constants';
+import { PLAY_DOC_LINK, UMAMI_EVENTS } from 'constants';
 
 const HeaderNav = ({ showBrowse }) => {
  const { showShareModal, setShowShareModal } = useSearchContext();
@@ -173,7 +173,7 @@ const HeaderNav = ({ showBrowse }) => {
  className="app-header-btn app-header-btn--primary"
  data-testid="create-btn"
  data-umami-event={UMAMI_EVENTS.CREATE_PLAY_BUTTON}
- href={CREATE_PLAY_DOC_LINK}
+ href={PLAY_DOC_LINK}
  rel="noopener noreferrer"
  target="_blank"
  >

src/common/playcreated/PlayCreated.jsx

@@ -4,7 +4,7 @@ import { toKebabCase } from 'common/services/string';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import './play-created.scss';
-import { CREATE_PLAY_DOC_LINK } from 'constants';
+import { PLAY_DOC_LINK } from 'constants';
 
 const PlayCreated = () => {
  const { playid } = useParams();
@@ -95,7 +95,7 @@ const PlayCreated = () => {
  Refer{' '}
  <a
  className="play-create-anchor"
- href={CREATE_PLAY_DOC_LINK}
+ href={PLAY_DOC_LINK}
  rel="noopener noreferrer"
  target="_blank"
  >

src/common/playideas/PlayIdeas.jsx

@@ -4,7 +4,7 @@ import { IoAddSharp } from 'react-icons/io5';
 import { RiChatNewLine } from 'react-icons/ri';
 import LevelBadge from 'common/components/LevelBadge';
 import './playIdeas.css';
-import { CREATE_PLAY_DOC_LINK } from 'constants';
+import { PLAY_DOC_LINK } from 'constants';
 
 const PlayIdeas = () => {
  const [ideas, setIdeas] = useState([]);
@@ -145,7 +145,7 @@ const PlayIdeas = () => {
  ) : (
  <a
  className="btn-primary action-btn"
- href={CREATE_PLAY_DOC_LINK}
+ href={PLAY_DOC_LINK}
  rel="noopener noreferrer"
  target="_blank"
  >

src/common/playlists/PlayList.jsx

@@ -4,7 +4,7 @@ import React, { Fragment, useEffect, useState } from 'react';
 import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';
 import Loader from 'common/spinner/spinner';
 import * as all_plays from 'plays';
-import { SORT_BY } from 'constants';
+import { SORT_OPTIONS } from 'constants';
 import './playlist.css';
 import { toSanitized } from 'common/services/string';
 import DynamicBanner from './DynamicBanner';
@@ -110,7 +110,7 @@ const PlayList = () => {
  <div className="sort-by-plays-wrapper">
  Sort By :
  <select id="sort-by-plays" name="sort-by-plays" value={sortBy} onChange={onChange}>
- {SORT_BY.map((name, i) => (
+ {SORT_OPTIONS.map((name, i) => (
  <option key={i} value={name}>
  {name}
  </option>

src/constants/index.js

@@ -1,7 +1,11 @@
-export const CREATE_PLAY_DOC_LINK = 'https://docs.reactplay.io/How-To-Guides/how-to-create-play';
-export const UMAMI_EVENTS = {
- GITHUB_BUTTON: 'github-button',
- CREATE_PLAY_BUTTON: 'create-play-button'
-};
+// URLs
+export const PLAY_DOC_LINK = 'https://docs.reactplay.io/How-To-Guides/how-to-create-play';
 
-export const SORT_BY = ['Newest', 'Oldest', 'Most Liked', 'Random'];
+// Event Types for Umami Analytics
+export const UMAMI_EVENTS = Object.freeze({
+ GITHUB_BUTTON_CLICK: 'github-button',
+ CREATE_PLAY_BUTTON_CLICK: 'create-play-button'
+});
+
+// Sorting Options for Plays
+export const SORT_OPTIONS = Object.freeze(['Newest', 'Oldest', 'Most Liked', 'Random']);

src/plays/navbar/Backgrounds.js

@@ -3,7 +3,7 @@ import ideas from './backgroundImages/bg_ideas.png';
 import join from './backgroundImages/bg_join.png';
 import create from './backgroundImages/bg_create.png';
 import search from './backgroundImages/bg_search.png';
-import { CREATE_PLAY_DOC_LINK } from 'constants';
+import { PLAY_DOC_LINK } from 'constants';
 const Backgrounds = [
  {
  id: 1,
@@ -40,7 +40,7 @@ const Backgrounds = [
  discription: 'Ready to create a new play? It is super easy, click down below to get started.',
  statement: 'Create Now',
  image: create,
- url: CREATE_PLAY_DOC_LINK
+ url: PLAY_DOC_LINK
  },
  {
  id: 5,