further improve DateRangeSection code, add layout selection for langs card

frontend/frontend/src/components/Home/DateRangeSection.js

@@ -4,28 +4,28 @@ import PropTypes from 'prop-types';
 import Section from './Section';
 import { Input } from '../Generic';
 
+export const DEFAULT_OPTION = {
+  id: 4,
+  label: 'Past 1 Year',
+  disabled: false,
+  value: 'one_year',
+};
+
 const DateRangeSection = ({ selectedOption, setSelectedOption }) => {
   const options = [
     { id: 1, label: 'Past 1 Month', disabled: false, value: 'one_month' },
-    {
-      id: 2,
-      label: 'Past 3 Months',
-      disabled: false,
-      value: 'three_months',
-    },
-    { id: 2, label: 'Past 6 Months', disabled: false, value: 'six_months' },
-    { id: 3, label: 'Past 1 Year', disabled: false, value: 'one_year' },
-    { id: 4, label: 'All Time', disabled: true, value: 'all_time' },
+    { id: 2, label: 'Past 3 Months', disabled: false, value: 'three_months' },
+    { id: 3, label: 'Past 6 Months', disabled: false, value: 'six_months' },
+    DEFAULT_OPTION,
+    { id: 5, label: 'All Time', disabled: true, value: 'all_time' },
   ];
 
-  const defaultOption = 2;
-
   return (
     <Section title="Date Range">
       <p>Select the date range for statistics.</p>
       <Input
         options={options}
-        selectedOption={selectedOption || options[defaultOption]}
+        selectedOption={selectedOption || DEFAULT_OPTION}
         setSelectedOption={setSelectedOption}
       />
     </Section>
@@ -35,7 +35,6 @@ const DateRangeSection = ({ selectedOption, setSelectedOption }) => {
 DateRangeSection.propTypes = {
   selectedOption: PropTypes.object.isRequired,
   setSelectedOption: PropTypes.func.isRequired,
-  privateAccess: PropTypes.bool.isRequired,
 };
 
 export default DateRangeSection;

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

@@ -15,6 +15,8 @@ import { authenticate } from '../../api';
 import { login as _login } from '../../redux/actions/userActions';
 import { HOST } from '../../constants';
 import { CardTypes } from '../../utils';
+import { DEFAULT_OPTION as DEFAULT_TIME_RANGE } from '../../components/Home/DateRangeSection';
+import { DEFAULT_OPTION as DEFAULT_LAYOUT } from '../../components/Home/LanguagesLayoutSection';
 
 const HomeScreen = () => {
   const [isLoading, setIsLoading] = useState(false);
@@ -36,13 +38,9 @@ const HomeScreen = () => {
   const [imageSrc, setImageSrc] = useState(`?&username=${userId}`);
 
   // for stage two
-  const defaultTimeRange = {
-    id: 3,
-    label: 'Past 1 Year',
-    disabled: false,
-    value: 'one_year',
-  };
-  const [selectedTimeRange, setSelectedTimeRange] = useState(defaultTimeRange);
+  const [selectedTimeRange, setSelectedTimeRange] =
+    useState(DEFAULT_TIME_RANGE);
+  const [selectedLayout, setSelectedLayout] = useState(DEFAULT_LAYOUT);
 
   const [usePercent, setUsePercent] = useState(false);
   const [usePrivate, setUsePrivate] = useState(false);
@@ -57,7 +55,7 @@ const HomeScreen = () => {
   const [hideProgress, setHideProgress] = useState(false);
 
   const resetCustomization = () => {
-    setSelectedTimeRange(defaultTimeRange);
+    setSelectedTimeRange(DEFAULT_TIME_RANGE);
     setUsePercent(false);
     setUsePrivate(false);
     setUseLocChanged(false);
@@ -72,8 +70,11 @@ const HomeScreen = () => {
     setImageSrc(`?&username=${userId}`);
   }, [userId]);
 
-  const time = selectedTimeRange.value;
-  let fullSuffix = `${imageSrc}&time_range=${time}`;
+  let fullSuffix = `${imageSrc}&time_range=${selectedTimeRange.value}`;
+
+  if (selectedLayout !== DEFAULT_LAYOUT) {
+    fullSuffix += `&layout=${selectedLayout.value}`;
+  }
 
   if (usePercent) {
     fullSuffix += '&use_percent=True';
@@ -213,6 +214,8 @@ const HomeScreen = () => {
               imageSrc={imageSrc}
               selectedTimeRange={selectedTimeRange}
               setSelectedTimeRange={setSelectedTimeRange}
+              selectedLayout={selectedLayout}
+              setSelectedLayout={setSelectedLayout}
               usePrivate={usePrivate}
               setUsePrivate={setUsePrivate}
               groupOther={groupOther}

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

@@ -5,11 +5,14 @@ import { CheckboxSection, DateRangeSection, Image } from '../../../components';
 import { CardTypes } from '../../../utils';
 import TextSection from '../../../components/Home/TextSection';
 import NumericSection from '../../../components/Home/NumericSection';
+import LanguagesLayoutSection from '../../../components/Home/LanguagesLayoutSection';
 
 const CustomizeStage = ({
   selectedCard,
   selectedTimeRange,
   setSelectedTimeRange,
+  selectedLayout,
+  setSelectedLayout,
   usePrivate,
   setUsePrivate,
   groupOther,
@@ -65,6 +68,12 @@ const CustomizeStage = ({
             max={20}
           />
         )}
+        {cardType === CardTypes.TOP_LANGS && (
+          <LanguagesLayoutSection
+            selectedOption={selectedLayout}
+            setSelectedOption={setSelectedLayout}
+          />
+        )}
         <DateRangeSection
           selectedOption={selectedTimeRange}
           setSelectedOption={setSelectedTimeRange}
@@ -145,6 +154,8 @@ CustomizeStage.propTypes = {
   selectedCard: PropTypes.string.isRequired,
   selectedTimeRange: PropTypes.object.isRequired,
   setSelectedTimeRange: PropTypes.func.isRequired,
+  selectedLayout: PropTypes.object.isRequired,
+  setSelectedLayout: PropTypes.func.isRequired,
   usePrivate: PropTypes.bool.isRequired,
   setUsePrivate: PropTypes.func.isRequired,
   groupOther: PropTypes.bool.isRequired,