add stats card options: layout, show_icons

frontend/frontend/src/pages/Home/Home.js

@@ -15,6 +15,7 @@ import { authenticate } from '../../api';
 import { login as _login } from '../../redux/actions/userActions';
 import { HOST } from '../../constants';
 import { CardTypes } from '../../utils';
+import { DEFAULT_OPTION as STATS_DEFAULT_LAYOUT } from '../../components/Home/StatsLayoutSection';
 import { DEFAULT_OPTION as LANGUAGES_DEFAULT_LAYOUT } from '../../components/Home/LanguagesLayoutSection';
 import { DEFAULT_OPTION as WAKATIME_DEFAULT_LAYOUT } from '../../components/Home/WakatimeLayoutSection';
 
@@ -38,6 +39,9 @@ const HomeScreen = () => {
   const [imageSrc, setImageSrc] = useState(`?&username=${userId}`);
 
   // for stage two
+  const [selectedStatsLayout, setSelectedStatsLayout] = useState(
+    STATS_DEFAULT_LAYOUT,
+  );
   const [selectedLanguagesLayout, setSelectedLanguagesLayout] = useState(
     LANGUAGES_DEFAULT_LAYOUT,
   );
@@ -50,6 +54,7 @@ const HomeScreen = () => {
   const [descriptionLines, setDescriptionLines] = useState();
   const [customTitle, setCustomTitle] = useState('');
   const [langsCount, setLangsCount] = useState();
+  const [showIcons, setShowIcons] = useState(true);
   const [enableAnimations, setEnableAnimations] = useState(true);
   const [usePercent, setUsePercent] = useState(false);
 
@@ -80,6 +85,10 @@ const HomeScreen = () => {
 
   let fullSuffix = `${imageSrc}`;
 
+  if(selectedStatsLayout !== STATS_DEFAULT_LAYOUT) {
+    fullSuffix += `&rank_icon=${selectedStatsLayout.value}`;
+  }
+
   if (selectedLanguagesLayout !== LANGUAGES_DEFAULT_LAYOUT) {
     fullSuffix += `&layout=${selectedLanguagesLayout.value}`;
   }
@@ -109,6 +118,10 @@ const HomeScreen = () => {
     fullSuffix += `&langs_count=${langsCount}`;
   }
 
+  if (showIcons) {
+    fullSuffix += `&show_icons=true`;
+  }
+
   if (!enableAnimations) {
     fullSuffix += `&disable_animations=${!enableAnimations}`;
   }
@@ -214,6 +227,8 @@ const HomeScreen = () => {
             <CustomizeStage
               selectedCard={selectedCard || CardTypes.STATS}
               imageSrc={imageSrc}
+              selectedStatsLayout={selectedStatsLayout}
+              setSelectedStatsLayout={setSelectedStatsLayout}
               selectedLanguagesLayout={selectedLanguagesLayout}
               setSelectedLanguagesLayout={setSelectedLanguagesLayout}
               selectedWakatimeLayout={selectedWakatimeLayout}
@@ -228,6 +243,8 @@ const HomeScreen = () => {
               setCustomTitle={setCustomTitle}
               langsCount={langsCount}
               setLangsCount={setLangsCount}
+              showIcons={showIcons}
+              setShowIcons={setShowIcons}
               enableAnimations={enableAnimations}
               setEnableAnimations={setEnableAnimations}
               usePercent={usePercent}

frontend/frontend/src/pages/Home/stages/Customize.js

@@ -5,11 +5,14 @@ import { CheckboxSection, Image } from '../../../components';
 import { CardTypes } from '../../../utils';
 import TextSection from '../../../components/Home/TextSection';
 import NumericSection from '../../../components/Home/NumericSection';
+import StatsLayoutSection from '../../../components/Home/StatsLayoutSection';
 import LanguagesLayoutSection from '../../../components/Home/LanguagesLayoutSection';
 import WakatimeLayoutSection from '../../../components/Home/WakatimeLayoutSection';
 
 const CustomizeStage = ({
   selectedCard,
+  selectedStatsLayout,
+  setSelectedStatsLayout,
   selectedLanguagesLayout,
   setSelectedLanguagesLayout,
   selectedWakatimeLayout,
@@ -24,6 +27,8 @@ const CustomizeStage = ({
   setCustomTitle,
   langsCount,
   setLangsCount,
+  showIcons,
+  setShowIcons,
   enableAnimations,
   setEnableAnimations,
   usePercent,
@@ -65,6 +70,12 @@ const CustomizeStage = ({
             max={20}
           />
         )}
+        {cardType === CardTypes.STATS && (
+          <StatsLayoutSection
+            selectedOption={selectedStatsLayout}
+            setSelectedOption={setSelectedStatsLayout}
+          />
+        )}
         {cardType === CardTypes.TOP_LANGS && (
           <LanguagesLayoutSection
             selectedOption={selectedLanguagesLayout}
@@ -109,13 +120,22 @@ const CustomizeStage = ({
         )}
         {cardType === CardTypes.WAKATIME && (
           <CheckboxSection
-            title="Show Percentages"
+            title="Show Percentages?"
             text="Show time spent in hours or percentages."
             question="Show percentages?"
             variable={usePercent}
             setVariable={setUsePercent}
           />
         )}
+        {cardType === CardTypes.STATS && (
+          <CheckboxSection
+            title="Show Icons?"
+            text="Show icons next to all stats."
+            question="Show Icons?"
+            variable={showIcons}
+            setVariable={setShowIcons}
+          />
+        )}
       </div>
       <div className="w-full lg:w-3/5 md:w-1/2 object-center pt-5 md:pt-0 pl-0 md:pl-5 lg:pl-0">
         <div className="w-full lg:w-3/5 mx-auto flex flex-col justify-center">
@@ -128,6 +148,8 @@ const CustomizeStage = ({
 
 CustomizeStage.propTypes = {
   selectedCard: PropTypes.string.isRequired,
+  selectedStatsLayout: PropTypes.object.isRequired,
+  setSelectedStatsLayout: PropTypes.func.isRequired,
   selectedLanguagesLayout: PropTypes.object.isRequired,
   setSelectedLanguagesLayout: PropTypes.func.isRequired,
   selectedWakatimeLayout: PropTypes.object.isRequired,
@@ -142,6 +164,8 @@ CustomizeStage.propTypes = {
   setCustomTitle: PropTypes.func.isRequired,
   langsCount: PropTypes.number.isRequired,
   setLangsCount: PropTypes.func.isRequired,
+  showIcons: PropTypes.bool.isRequired,
+  setShowIcons: PropTypes.func.isRequired,
   enableAnimations: PropTypes.bool.isRequired,
   setEnableAnimations: PropTypes.func.isRequired,
   usePercent: PropTypes.bool.isRequired,