Skip to content

Commit c58b415

Browse files
foyzulkarimfoyzulkarim
authored
Merge pull request #6 from foyzulkarim/feature/feed-wrapper-implementation
Refactoring Repository Card Component and Adding Feed Cards Component
2 parents 92b00b2 + a948b3a commit c58b415

File tree

4 files changed

+325
-87
lines changed

4 files changed

+325
-87
lines changed

‎client/src/components/feed/feed-cards.jsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import Stack from '@mui/material/Stack';
5+
6+
import RepositoryCard from '../repository/repository-card';
7+
8+
const FeedCards = ({ items }) => (
9+
<Stack spacing={2}>
10+
{items.map((item) => (
11+
<RepositoryCard {...item} />
12+
))}
13+
</Stack>
14+
);
15+
16+
FeedCards.propTypes = {
17+
items: PropTypes.array.isRequired,
18+
};
19+
20+
export default FeedCards;

‎client/src/components/feed/feed.stories.js

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
import Feed from './feed-cards'; // Assuming Feed is the component you want to create a story for
2+
3+
const feedData = [
4+
{
5+
id: 10270250,
6+
node_id: 'MDEwOlJlcG9zaXRvcnkxMDI3MDI1MA==',
7+
name: 'react',
8+
full_name: 'facebook/react',
9+
private: false,
10+
html_url: 'https://github.com/facebook/react',
11+
description: 'The library for web and native user interfaces.',
12+
fork: false,
13+
url: 'https://api.github.com/repos/facebook/react',
14+
languages_url: 'https://api.github.com/repos/facebook/react/languages',
15+
created_at: '2013-05-24T16:15:54Z',
16+
updated_at: '2024-03-17T02:37:45Z',
17+
pushed_at: '2024-03-17T01:34:23Z',
18+
homepage: 'https://react.dev',
19+
size: 405436,
20+
stargazers_count: 220201,
21+
watchers_count: 220201,
22+
language: 'JavaScript',
23+
languageData: {
24+
JavaScript: 4168197,
25+
HTML: 120786,
26+
CSS: 64424,
27+
'C++': 44290,
28+
TypeScript: 21136,
29+
CoffeeScript: 17378,
30+
C: 5227,
31+
Shell: 2205,
32+
Python: 259,
33+
Makefile: 189,
34+
},
35+
forks_count: 44998,
36+
open_issues_count: 1620,
37+
license: {
38+
key: 'mit',
39+
name: 'MIT License',
40+
spdx_id: 'MIT',
41+
url: 'https://api.github.com/licenses/mit',
42+
node_id: 'MDc6TGljZW5zZTEz',
43+
},
44+
topics: ['declarative', 'frontend', 'javascript', 'library', 'react', 'ui'],
45+
subscribers_count: 6634,
46+
owner: {
47+
login: 'facebook',
48+
id: 69631,
49+
node_id: 'MDEyOk9yZ2FuaXphdGlvbjY5NjMx',
50+
avatar_url: 'https://avatars.githubusercontent.com/u/69631?v=4',
51+
},
52+
},
53+
{
54+
id: 1296269,
55+
node_id: 'MDEwOlJlcG9zaXRvcnkxMjk2MjY5',
56+
name: 'Hello-World',
57+
full_name: 'octocat/Hello-World',
58+
private: false,
59+
html_url: 'https://github.com/octocat/Hello-World',
60+
description: 'This your first repo!',
61+
fork: false,
62+
url: 'https://api.github.com/repos/octocat/Hello-World',
63+
homepage: 'https://github.com',
64+
forks_count: 9,
65+
forks: 9,
66+
stargazers_count: 80,
67+
watchers_count: 80,
68+
watchers: 80,
69+
size: 108,
70+
default_branch: 'master',
71+
open_issues_count: 0,
72+
open_issues: 0,
73+
is_template: false,
74+
topics: ['octocat', 'atom', 'electron', 'api'],
75+
has_issues: true,
76+
has_projects: true,
77+
has_wiki: true,
78+
has_pages: false,
79+
has_downloads: true,
80+
has_discussions: false,
81+
archived: false,
82+
disabled: false,
83+
visibility: 'public',
84+
pushed_at: '2011-01-26T19:06:43Z',
85+
created_at: '2011-01-26T19:01:12Z',
86+
updated_at: '2011-01-26T19:14:43Z',
87+
permissions: {
88+
pull: true,
89+
push: false,
90+
admin: false,
91+
},
92+
allow_rebase_merge: true,
93+
temp_clone_token: 'ABTLWHOULUVAXGTRYU7OC2876QJ2O',
94+
allow_squash_merge: true,
95+
allow_auto_merge: false,
96+
delete_branch_on_merge: true,
97+
allow_merge_commit: true,
98+
subscribers_count: 42,
99+
network_count: 0,
100+
license: {
101+
key: 'mit',
102+
name: 'MIT License',
103+
spdx_id: 'MIT',
104+
url: 'https://api.github.com/licenses/mit',
105+
node_id: 'MDc6TGljZW5zZW1pdA==',
106+
},
107+
organization: {
108+
login: 'octocat',
109+
id: 1,
110+
node_id: 'MDQ6VXNlcjE=',
111+
avatar_url: 'https://github.com/images/error/octocat_happy.gif',
112+
gravatar_id: '',
113+
url: 'https://api.github.com/users/octocat',
114+
html_url: 'https://github.com/octocat',
115+
followers_url: 'https://api.github.com/users/octocat/followers',
116+
following_url: 'https://api.github.com/users/octocat/following{/other_user}',
117+
gists_url: 'https://api.github.com/users/octocat/gists{/gist_id}',
118+
starred_url: 'https://api.github.com/users/octocat/starred{/owner}{/repo}',
119+
subscriptions_url: 'https://api.github.com/users/octocat/subscriptions',
120+
organizations_url: 'https://api.github.com/users/octocat/orgs',
121+
repos_url: 'https://api.github.com/users/octocat/repos',
122+
events_url: 'https://api.github.com/users/octocat/events{/privacy}',
123+
received_events_url: 'https://api.github.com/users/octocat/received_events',
124+
type: 'Organization',
125+
site_admin: false,
126+
},
127+
},
128+
{
129+
id: 1296269,
130+
node_id: 'MDEwOlJlcG9zaXRvcnkxMjk2MjY5',
131+
name: 'Hello-World-Template',
132+
full_name: 'octocat/Hello-World-Template',
133+
owner: {
134+
login: 'octocat',
135+
id: 1,
136+
node_id: 'MDQ6VXNlcjE=',
137+
avatar_url: 'https://github.com/images/error/octocat_happy.gif',
138+
gravatar_id: '',
139+
url: 'https://api.github.com/users/octocat',
140+
html_url: 'https://github.com/octocat',
141+
followers_url: 'https://api.github.com/users/octocat/followers',
142+
following_url: 'https://api.github.com/users/octocat/following{/other_user}',
143+
gists_url: 'https://api.github.com/users/octocat/gists{/gist_id}',
144+
starred_url: 'https://api.github.com/users/octocat/starred{/owner}{/repo}',
145+
subscriptions_url: 'https://api.github.com/users/octocat/subscriptions',
146+
organizations_url: 'https://api.github.com/users/octocat/orgs',
147+
repos_url: 'https://api.github.com/users/octocat/repos',
148+
events_url: 'https://api.github.com/users/octocat/events{/privacy}',
149+
received_events_url: 'https://api.github.com/users/octocat/received_events',
150+
type: 'User',
151+
site_admin: false,
152+
},
153+
private: false,
154+
html_url: 'https://github.com/octocat/Hello-World-Template',
155+
description: 'This your first repo!',
156+
fork: false,
157+
url: 'https://api.github.com/repos/octocat/Hello-World-Template',
158+
git_url: 'git:github.com/octocat/Hello-World-Template.git',
159+
homepage: 'https://github.com',
160+
language: null,
161+
forks: 9,
162+
forks_count: 9,
163+
stargazers_count: 80,
164+
watchers_count: 80,
165+
watchers: 80,
166+
size: 108,
167+
default_branch: 'master',
168+
open_issues: 0,
169+
open_issues_count: 0,
170+
is_template: true,
171+
license: {
172+
key: 'mit',
173+
name: 'MIT License',
174+
url: 'https://api.github.com/licenses/mit',
175+
spdx_id: 'MIT',
176+
node_id: 'MDc6TGljZW5zZW1pdA==',
177+
html_url: 'https://api.github.com/licenses/mit',
178+
},
179+
topics: ['octocat', 'atom', 'electron', 'api'],
180+
has_issues: true,
181+
has_projects: true,
182+
has_wiki: true,
183+
has_pages: false,
184+
has_downloads: true,
185+
archived: false,
186+
disabled: false,
187+
visibility: 'public',
188+
pushed_at: '2011-01-26T19:06:43Z',
189+
created_at: '2011-01-26T19:01:12Z',
190+
updated_at: '2011-01-26T19:14:43Z',
191+
permissions: {
192+
admin: false,
193+
push: false,
194+
pull: true,
195+
},
196+
allow_rebase_merge: true,
197+
temp_clone_token: 'ABTLWHOULUVAXGTRYU7OC2876QJ2O',
198+
allow_squash_merge: true,
199+
allow_auto_merge: false,
200+
delete_branch_on_merge: true,
201+
allow_merge_commit: true,
202+
subscribers_count: 42,
203+
network_count: 0,
204+
},
205+
];
206+
207+
export default {
208+
title: 'gitstream/components/Feed',
209+
component: Feed,
210+
parameters: {
211+
layout: 'centered',
212+
},
213+
};
214+
215+
export const Default = {
216+
args: { items: feedData },
217+
};

‎client/src/components/repository/repository.jsx renamed to ‎client/src/components/repository/repository-card.jsx

Lines changed: 36 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import Card from '@mui/material/Card';
99
import Chip from '@mui/material/Chip';
1010
import Link from '@mui/material/Link';
1111
import Stack from '@mui/material/Stack';
12-
import Button from '@mui/material/Button';
1312
import Avatar from '@mui/material/Avatar';
1413
import MenuItem from '@mui/material/MenuItem';
1514
import StarIcon from '@mui/icons-material/Star';
@@ -18,15 +17,16 @@ import CardHeader from '@mui/material/CardHeader';
1817
import Typography from '@mui/material/Typography';
1918
import ShareIcon from '@mui/icons-material/Share';
2019
import TodayIcon from '@mui/icons-material/Today';
20+
import CardActions from '@mui/material/CardActions';
2121
import CardContent from '@mui/material/CardContent';
2222
import ThumbUpIcon from '@mui/icons-material/ThumbUp';
2323
import BookmarkIcon from '@mui/icons-material/Bookmark';
2424
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
2525
import ForkRightIcon from '@mui/icons-material/ForkRight';
2626
import VisibilityIcon from '@mui/icons-material/Visibility';
27-
import ExpandCircleDownIcon from '@mui/icons-material/ExpandCircleDown';
2827
import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
2928

29+
3030
const RepositoryCard = ({
3131
full_name = '',
3232
description = '',
@@ -57,31 +57,33 @@ const RepositoryCard = ({
5757
};
5858

5959
return (
60-
<Card>
60+
<Card variant="outlined">
6161
<CardHeader
6262
avatar={<Avatar src={owner.avatar_url} />}
6363
title={full_name}
6464
subheader={timeSinceCreation}
6565
/>
6666

6767
<CardContent>
68-
<Stack spacing={2}>
69-
<Stack>
68+
<Stack spacing={2} flexWrap="wrap">
69+
<Stack flexWrap="wrap">
7070
<Typography variant="body2" color="text.secondary">
7171
{description}
7272
</Typography>
7373
</Stack>
74-
<Stack direction="row" spacing={1} mt={1}>
74+
<Stack direction="row" spacing={1} margin={1} flexWrap="wrap">
7575
{Object.entries(languageData).map(([lng, linesOfCode]) => (
76-
<Chip
77-
key={lng}
78-
label={`${lng}: ${((linesOfCode / totalLinesOfCode) * 100).toFixed(2)}%`}
79-
variant="outlined"
80-
size="small"
81-
/>
76+
<Box paddingTop={1}>
77+
<Chip
78+
key={lng}
79+
label={`${lng}: ${((linesOfCode / totalLinesOfCode) * 100).toFixed(2)}%`}
80+
variant="outlined"
81+
size="small"
82+
/>
83+
</Box>
8284
))}
8385
</Stack>
84-
<Stack direction="row" spacing={1} mt={1}>
86+
<Stack direction="row" spacing={1} mt={1} flexWrap="wrap">
8587
{topics.map((topic) => (
8688
<Chip key={topic} label={topic} variant="outlined" size="small" />
8789
))}
@@ -137,32 +139,27 @@ const RepositoryCard = ({
137139
</Stack>
138140
</Stack>
139141
</CardContent>
140-
<CardContent>
141-
<Stack direction="row">
142-
<IconButton>
143-
<ShareIcon />
144-
</IconButton>
145-
<IconButton>
146-
<BookmarkIcon />
147-
</IconButton>
148-
<IconButton>
149-
<ChatBubbleOutlineIcon />
150-
</IconButton>
151-
<IconButton>
152-
<ThumbUpIcon />
153-
</IconButton>
154-
<IconButton onClick={handleClick}>
155-
<MoreHorizIcon />
156-
</IconButton>
157-
<Button variant="text" endIcon={<ExpandCircleDownIcon />}>
158-
Details
159-
</Button>
160-
<Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
161-
<MenuItem onClick={handleClose}>Option 1</MenuItem>
162-
<MenuItem onClick={handleClose}>Option 2</MenuItem>
163-
</Menu>
164-
</Stack>
165-
</CardContent>
142+
<CardActions disableSpacing>
143+
<IconButton>
144+
<ShareIcon />
145+
</IconButton>
146+
<IconButton>
147+
<BookmarkIcon />
148+
</IconButton>
149+
<IconButton>
150+
<ChatBubbleOutlineIcon />
151+
</IconButton>
152+
<IconButton>
153+
<ThumbUpIcon />
154+
</IconButton>
155+
<IconButton onClick={handleClick}>
156+
<MoreHorizIcon />
157+
</IconButton>
158+
<Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
159+
<MenuItem onClick={handleClose}>Option 1</MenuItem>
160+
<MenuItem onClick={handleClose}>Option 2</MenuItem>
161+
</Menu>
162+
</CardActions>
166163
</Card>
167164
);
168165
};

0 commit comments

Comments
 (0)