Merge pull request #11 from MatteoPieroni/feature/lock-buttons-for-ad…

…mins [Feature] - Updated to show buttons and forms to only admins
MatteoPieroni · Jan 2, 2020 · da89e30 · da89e30
2 parents 5144e68 + 1af8d35
commit da89e30
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/src/components/links/links.tsx b/src/components/links/links.tsx
@@ -8,6 +8,7 @@ import { StyledH2 } from '../styled';
 import { Icon } from '../icons';
 import { NewLink } from '../new-link';
 import { Button } from '../button';
+import { useUser } from '../../shared/hooks';
 
 interface ILinkProps {
   links: ILink[];
@@ -44,20 +45,24 @@ const StyledLinks = styled.div`
 
 export const Links: React.FC<ILinkProps> = ({ links }) => {
   const [isEditing, setIsEditing] = useState(false);
+  const [user] = useUser();
+  const { isAdmin } = user;
 
   return (
     <StyledLinks>
       <div className="header">
         <StyledH2>Link utili</StyledH2>
-        <Button icon={Icon.Pencil} ghost className="links-button" onClick={(): void => setIsEditing(!isEditing)}>
-          Modifica
-        </Button>
+        {isAdmin && (
+          <Button icon={Icon.Pencil} ghost className="links-button" onClick={(): void => setIsEditing(!isEditing)}>
+            Modifica
+          </Button>
+        )}
       </div>
       <ul>
         {links && links.map(link => (
-          <SavedLink key={link.id} link={link} editable={isEditing} />
+          <SavedLink key={link.id} link={link} editable={isAdmin && isEditing} />
         ))}
-        {isEditing && <NewLink />}
+        {isAdmin && isEditing && <NewLink />}
       </ul>
     </StyledLinks>
   )

diff --git a/src/components/quote/quote.tsx b/src/components/quote/quote.tsx
@@ -6,6 +6,7 @@ import { Icon } from '../icons';
 import { QuoteForm } from '../forms';
 import { Button } from '../button';
 import { IQuote } from '../../services/firebase/types';
+import { useUser } from '../../shared/hooks';
 
 interface IQuoteProps {
   quote: IQuote;
@@ -64,10 +65,12 @@ const StyledQuote = styled.div`
 `;
 
 export const Quote: React.FC<IQuoteProps> = ({ quote, refresh }) => {
-  const [isEditing, setIsEditing] = useState(false)
+  const [isEditing, setIsEditing] = useState(false);
+  const [user] = useUser();
+  const { isAdmin } = user;
   const { url, text } = quote;
 
-  const onSave = () => {
+  const onSave = (): void => {
     refresh();
     setIsEditing(false);
   }
@@ -76,12 +79,14 @@ export const Quote: React.FC<IQuoteProps> = ({ quote, refresh }) => {
     <StyledQuote>
       <div className="header">
         <StyledH2>Citazione del mese</StyledH2>
-        <Button icon={Icon.Pencil} ghost className="links-button" onClick={(): void => setIsEditing(!isEditing)}>
-          Modifica
-        </Button>
+        {isAdmin && (
+          <Button icon={Icon.Pencil} ghost className="links-button" onClick={(): void => setIsEditing(!isEditing)}>
+            Modifica
+          </Button>
+        )}
       </div>
       <div className="quote">
-        {isEditing ? (
+        {isAdmin && isEditing ? (
           <QuoteForm initialState={quote} className="form" onSave={onSave} />
         ) : (
             <p>{text}</p>