From 60680d9322f4bea4a9c10aa6d4514d02be5924d4 Mon Sep 17 00:00:00 2001
From: Valdir Mendes <valdir.mfjesus@hotmail.com>
Date: Wed, 7 Jul 2021 16:22:26 -0300
Subject: [PATCH] fix: Handle emtpy object in security array

---
 .../SecurityRequirement.tsx                   | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/SecurityRequirement/SecurityRequirement.tsx b/src/components/SecurityRequirement/SecurityRequirement.tsx
index 3a52ad81..ebda3bd1 100644
--- a/src/components/SecurityRequirement/SecurityRequirement.tsx
+++ b/src/components/SecurityRequirement/SecurityRequirement.tsx
@@ -8,8 +8,8 @@ import { SecurityRequirementModel } from '../../services/models/SecurityRequirem
 import { linksCss } from '../Markdown/styled.elements';
 
 const ScopeName = styled.code`
-  font-size: ${props => props.theme.typography.code.fontSize};
-  font-family: ${props => props.theme.typography.code.fontFamily};
+  font-size: ${(props) => props.theme.typography.code.fontSize};
+  font-family: ${(props) => props.theme.typography.code.fontFamily};
   border: 1px solid ${({ theme }) => theme.colors.border.dark};
   margin: 0 3px;
   padding: 0.2em;
@@ -67,18 +67,22 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
     const security = this.props.security;
     return (
       <SecurityRequirementOrWrap>
-        {security.schemes.map(scheme => {
-          return (
-            <SecurityRequirementAndWrap key={scheme.id}>
-              <Link to={scheme.sectionId}>{scheme.id}</Link>
-              {scheme.scopes.length > 0 && ' ('}
-              {scheme.scopes.map(scope => (
-                <ScopeName key={scope}>{scope}</ScopeName>
-              ))}
-              {scheme.scopes.length > 0 && ') '}
-            </SecurityRequirementAndWrap>
-          );
-        })}
+        {security.schemes.length ? (
+          security.schemes.map((scheme) => {
+            return (
+              <SecurityRequirementAndWrap key={scheme.id}>
+                <Link to={scheme.sectionId}>{scheme.id}</Link>
+                {scheme.scopes.length > 0 && ' ('}
+                {scheme.scopes.map((scope) => (
+                  <ScopeName key={scope}>{scope}</ScopeName>
+                ))}
+                {scheme.scopes.length > 0 && ') '}
+              </SecurityRequirementAndWrap>
+            );
+          })
+        ) : (
+          <SecurityRequirementAndWrap>Anonymous</SecurityRequirementAndWrap>
+        )}
       </SecurityRequirementOrWrap>
     );
   }
@@ -89,7 +93,7 @@ const AuthHeaderColumn = styled.div`
 `;
 
 const SecuritiesColumn = styled.div`
-  width: ${props => props.theme.schema.defaultDetailsWidth};
+  width: ${(props) => props.theme.schema.defaultDetailsWidth};
   ${media.lessThan('small')`
     margin-top: 10px;
   `}