organizing react proj

src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/LinkButtonGroup.tsx

@@ -30,15 +30,15 @@ interface IProps {
 export const LinkButtonGroup = (props: IProps) => {
     const viewUrlMirrors = new Array(props.viewUrlMirror1, props.viewUrlMirror2).filter(u => u);
     return <div className="col-3 p-0 btn-group-vertical justify-content-start d-flex align-items-end">
-               <SubscribeButtonGroup {...props} url={props.viewUrl} urlMirrors={viewUrlMirrors}/>
-               <ViewButtonGroup {...props} url={props.viewUrl} urlMirrors={viewUrlMirrors}/>
-               <HomeButton {...props} url={props.homeUrl}/>
-               <PolicyButton {...props} url={props.policyUrl}/>
-               <DonateButton {...props} url={props.donateUrl}/>
-               <IssuesButton {...props} url={props.issuesUrl}/>
-               <ForumButton {...props} url={props.forumUrl}/>
-               <ChatButton {...props} url={props.chatUrl}/>
-               <SubmitButton {...props} url={props.submissionUrl}/>
-               <EmailButton {...props} emailAddress={props.emailAddress}/>
+               <SubscribeButtonGroup name={props.name} url={props.viewUrl} urlMirrors={viewUrlMirrors}/>
+               <ViewButtonGroup name={props.name} url={props.viewUrl} urlMirrors={viewUrlMirrors}/>
+               <HomeButton name={props.name} url={props.homeUrl}/>
+               <PolicyButton name={props.name} url={props.policyUrl}/>
+               <DonateButton name={props.name} url={props.donateUrl}/>
+               <IssuesButton name={props.name} url={props.issuesUrl}/>
+               <ForumButton name={props.name} url={props.forumUrl}/>
+               <ChatButton name={props.name} url={props.chatUrl}/>
+               <SubmitButton name={props.name} url={props.submissionUrl}/>
+               <EmailButton name={props.name} emailAddress={props.emailAddress}/>
            </div>;
 };

src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/infoCard/InfoCard.tsx

@@ -31,7 +31,7 @@ export const InfoCard = (props: IProps) => {
                <div className="d-md-none">
                    {props.syntax.supportedSoftware.map(
                        (s: ISyntaxSupportedSoftwareDto, i: number) =>
-                       <a href={s.homeUrl} title={`View ${s.name}'s homepage.`} key={i}>
+                       <a href={s.homeUrl} key={i}>
                            <SoftwareIcon id={s.id} key={i}/>
                        </a>)}
                </div>

src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/infoCard/Languages.tsx

@@ -10,11 +10,11 @@ export const Languages = (props: IProps) => {
                  ? <li className="list-group-item">
                        <p className="m-0">Languages:</p>
                        <ul>
-                           {props.languages.map((language: string) => <li>{language}</li>)}
+                           {props.languages.map((language: string, i: number) => <li key={i}>{language}</li>)}
                        </ul>
                    </li>
                  : <li className="list-group-item">
-                       <p>Language: {props.languages.map((language: string) => language)}</p>
+                       <p>Language: {props.languages[0]}</p>
                    </li>
                : null;
 };

src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/infoCard/Tag.tsx

@@ -3,10 +3,12 @@ import { IListTagDto } from "../IFilterListDetailsDto";
 import { getContrast } from "../../../../../utils";
 
 export const Tag = (props: IListTagDto) => {
-    const style = {
-        backgroundColor: props.colorHex ? `#${props.colorHex}` : undefined,
-        color: props.colorHex ? getContrast(`${props.colorHex}`) : undefined
-    };
+    const style = props.colorHex
+                      ? {
+                          backgroundColor: `#${props.colorHex}`,
+                          color: getContrast(`${props.colorHex}`)
+                      }
+                      : undefined;
     return props.name
                ? <span className="badge"
                        style={style}

src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/infoCard/Tags.tsx

@@ -9,7 +9,7 @@ interface IProps {
 export const Tags = (props: IProps) => {
     return props.tags.length > 0
                ? <div className="d-md-none">
-                     {props.tags.map((t: IListTagDto, i) => <Tag {...t} key={i}/>)}
+                     {props.tags.map((t: IListTagDto, i: number) => <Tag {...t} key={i}/>)}
                  </div>
                : null;
 };

src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/maintainersInfoCard/MaintainerAdditionalLists.tsx

@@ -13,7 +13,7 @@ export const MaintainerAdditionalLists = (props: IProps) => {
                           <h4>More by {props.name}:</h4>
                           <ul>
                               {props.additionalLists.map(
-                                  (l: IMaintainerAdditionalListDto, i) => <li key={i}>{l.name}</li>)}
+                                  (l: IMaintainerAdditionalListDto, i: number) => <li key={i}>{l.name}</li>)}
                           </ul>
 
                       </div>

src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/maintainersInfoCard/MaintainersInfoCard.tsx

@@ -9,7 +9,8 @@ interface IProps {
 export const MaintainersInfoCard = (props: IProps) => {
     return props.maintainers.length > 0
                ? <div className="w-100">
-                     {props.maintainers.map((m: IListMaintainerDto, i) => <MaintainerInfoCard {...m} key={i}/>)}
+                     {props.maintainers.map(
+                         (m: IListMaintainerDto, i: number) => <MaintainerInfoCard {...m} key={i}/>)}
                  </div>
                : null;
 };

src/FilterLists.Web/ClientApp/modules/home/components/linkButtons/SubscribeButtonGroup.tsx

@@ -35,7 +35,8 @@ const SubscribeButtonGroupDropdown = (props: ISubscribeButtonGroupDropdownProps)
                <div className="dropdown-menu" aria-labelledby="btnGroupDropSubscribe">
                    <SubscribeButton {...props} text={firstButtonText}/>
                    {props.urlMirrors.map(
-                       (m, i) => <SubscribeButton {...props} url={m} text={`Mirror ${i + 1 + mirrorIndex}`} key={i}/>)}
+                       (m: string, i: number) =>
+                       <SubscribeButton {...props} url={m} text={`Mirror ${i + 1 + mirrorIndex}`} key={i}/>)}
                </div>
            </div>;
 };

src/FilterLists.Web/ClientApp/modules/home/components/linkButtons/ViewButtonGroup.tsx

@@ -35,7 +35,8 @@ const ViewButtonGroupDropdown = (props: IViewButtonGroupDropdownProps) => {
                <div className="dropdown-menu" aria-labelledby="btnGroupDropView">
                    <ViewButton {...props} text={firstButtonText}/>
                    {props.urlMirrors.map(
-                       (m, i) => <ViewButton {...props} url={m} text={`Mirror ${i + 1 + mirrorIndex}`} key={i}/>)}
+                       (m: string, i: number) =>
+                       <ViewButton {...props} url={m} text={`Mirror ${i + 1 + mirrorIndex}`} key={i}/>)}
                </div>
            </div>;
 };