Skip to content

Commit 128fe59

Browse files
setchysetchy
authored
fix(avatar): add default icon when no repository avatar available (#913)
* fix(avatar): add default icon when no repository avatar available * fix(avatar): add default icon when no repository avatar available
1 parent de48b91 commit 128fe59

File tree

3 files changed

+127
-2
lines changed

3 files changed

+127
-2
lines changed

‎src/components/Repository.test.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,4 +81,15 @@ describe('components/Repository.tsx', () => {
8181
'github.com',
8282
);
8383
});
84+
85+
it('should use default repository icon when avatar is not available', () => {
86+
props.repoNotifications[0].repository.owner.avatar_url = '';
87+
88+
const tree = TestRenderer.create(
89+
<AppContext.Provider value={{}}>
90+
<RepositoryNotifications {...props} />
91+
</AppContext.Provider>,
92+
);
93+
expect(tree).toMatchSnapshot();
94+
});
8495
});

‎src/components/Repository.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useCallback, useContext } from 'react';
2-
import { ReadIcon, CheckIcon } from '@primer/octicons-react';
2+
import { ReadIcon, CheckIcon, MarkGithubIcon } from '@primer/octicons-react';
33
import { CSSTransition, TransitionGroup } from 'react-transition-group';
44

55
import { AppContext } from '../context/App';
@@ -42,7 +42,11 @@ export const RepositoryNotifications: React.FC<IProps> = ({
4242
<>
4343
<div className="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white group">
4444
<div className="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap">
45-
<img className="rounded w-5 h-5" src={avatarUrl} />
45+
{avatarUrl ? (
46+
<img className="rounded w-5 h-5" src={avatarUrl} />
47+
) : (
48+
<MarkGithubIcon size={18} />
49+
)}
4650
<span onClick={openBrowser}>{repoName}</span>
4751
</div>
4852

‎src/components/__snapshots__/Repository.test.tsx.snap

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,3 +92,113 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
9292
</div>,
9393
]
9494
`;
95+
96+
exports[`components/Repository.tsx should use default repository icon when avatar is not available 1`] = `
97+
[
98+
<div
99+
className="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white group"
100+
>
101+
<div
102+
className="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap"
103+
>
104+
<svg
105+
aria-hidden="true"
106+
className="octicon octicon-mark-github"
107+
fill="currentColor"
108+
focusable="false"
109+
height={18}
110+
style={
111+
{
112+
"display": "inline-block",
113+
"overflow": "visible",
114+
"userSelect": "none",
115+
"verticalAlign": "text-bottom",
116+
}
117+
}
118+
viewBox="0 0 16 16"
119+
width={18}
120+
>
121+
<path
122+
d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
123+
/>
124+
</svg>
125+
<span
126+
onClick={[Function]}
127+
>
128+
manosim/gitify
129+
</span>
130+
</div>
131+
<div
132+
className="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
133+
>
134+
<button
135+
className="focus:outline-none h-full hover:text-green-500"
136+
onClick={[Function]}
137+
title="Mark Repository as Done"
138+
>
139+
<svg
140+
aria-label="Mark Repository as Done"
141+
className="octicon octicon-check"
142+
fill="currentColor"
143+
focusable="false"
144+
height={16}
145+
role="img"
146+
style={
147+
{
148+
"display": "inline-block",
149+
"overflow": "visible",
150+
"userSelect": "none",
151+
"verticalAlign": "text-bottom",
152+
}
153+
}
154+
viewBox="0 0 16 16"
155+
width={16}
156+
>
157+
<path
158+
d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
159+
/>
160+
</svg>
161+
</button>
162+
<div
163+
className="w-[14px]"
164+
/>
165+
<button
166+
className="focus:outline-none h-full hover:text-green-500"
167+
onClick={[Function]}
168+
title="Mark Repository as Read"
169+
>
170+
<svg
171+
aria-label="Mark Repository as Read"
172+
className="octicon octicon-read"
173+
fill="currentColor"
174+
focusable="false"
175+
height={14}
176+
role="img"
177+
style={
178+
{
179+
"display": "inline-block",
180+
"overflow": "visible",
181+
"userSelect": "none",
182+
"verticalAlign": "text-bottom",
183+
}
184+
}
185+
viewBox="0 0 16 16"
186+
width={14}
187+
>
188+
<path
189+
d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
190+
/>
191+
</svg>
192+
</button>
193+
</div>
194+
</div>,
195+
<div>
196+
<div>
197+
NotificationRow
198+
</div>
199+
<div>
200+
NotificationRow
201+
</div>
202+
</div>,
203+
]
204+
`;

0 commit comments

Comments
 (0)