Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Restyled the components #42

Merged
merged 2 commits into from
Jan 22, 2022
Merged

Restyled the components #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d729eba
Restyled the components
irffanasiff Jan 18, 2022
4dd3991
added svg to /public + removed unused code
irffanasiff Jan 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
210 changes: 163 additions & 47 deletions app/components/discourserankedlist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,171 @@
import { ListGroup} from "react-bootstrap"
import styles from "../styles/Discourserankedlist.module.css"
import { Col, Row } from 'react-bootstrap';
import styles from '../styles/Discourserankedlist.module.css';
import Like from '../public/svg/like.js';
import Comment from '../public/svg/comment';

function timeSince(date) {
let seconds = Math.floor((new Date() - date) / 1000);
let interval = seconds / 31536000;
if (interval > 1) {
return Math.floor(interval) + " years";
}
interval = seconds / 2592000;
if (interval > 1) {
return Math.floor(interval) + " months ago";
}
interval = seconds / 86400;
if (interval > 1) {
return Math.floor(interval) + " days ago";
}
interval = seconds / 3600;
if (interval > 1) {
return Math.floor(interval) + " hours ago";
}
interval = seconds / 60;
if (interval > 1) {
return Math.floor(interval) + " minutes ago";
}
return Math.floor(seconds) + " seconds ago";
function TimeSince(date) {
let seconds = Math.floor((new Date() - date) / 1000);
let interval = seconds / 31536000;
if (interval > 1) {
return Math.floor(interval) + ' years';
}

interval = seconds / 2592000;
if (interval > 1) {
return Math.floor(interval) + ' months ago';
}
interval = seconds / 86400;
if (interval > 1) {
return Math.floor(interval) + ' days ago';
}
interval = seconds / 3600;
if (interval > 1) {
return Math.floor(interval) + ' hours ago';
}
interval = seconds / 60;
if (interval > 1) {
return Math.floor(interval) + ' minutes ago';
}
return Math.floor(seconds) + ' seconds ago';
}

function Discourserankedlist(props) {
let activityItems = [];
props.topposts[0]?.TopPost?.topic_list?.topics.map((topic) => {
let newTopic = {
title: topic.fancy_title,
time: timeSince(new Date(topic.created_at)),
upvotes: topic.like_count,
comments: topic.posts_count,
link: `https://forums.rocket.chat/t/${topic.slug}/${topic.id}`,
image_url: topic.image_url
}
activityItems.push(newTopic);
})
const Data = [
{
id: 1,
title:
'Upload stuck at 0% again after initially fixing with chanding site url in General admin options',
time: '6:57 PM',
upvotes: '89',
comments: '91',
},
{
id: 2,
title: 'Why can’t we have thumbnails for video uploads on mobile?',
time: '4:00 PM',
upvotes: '500',
comments: '4',
},
{
id: 3,
title: 'Can’t find “Users must use Two Factor Authentication” Option',
time: '12:53 PM',
upvotes: '456',
comments: '75',
},
{
id: 4,
title: 'Can’t “forget/remove my data” directly in RC 4.3.0 in livechat',
time: '8:36 AM',
upvotes: '234',
comments: '199',
},
{
id: 5,
title: 'Not migrating, control is locked',
time: '11:30 PM',
upvotes: '441',
comments: '74',
},
{
id: 6,
title:
'Upload stuck at 0% again after initially fixing with chanding site url in General admin options',
time: '7:14 PM',
upvotes: '972',
comments: '42',
},
{
id: 7,
title: 'Can’t find “Users must use Two Factor Authentication” Option',
time: '3:36 PM',
upvotes: '4279',
comments: '98',
},
{
id: 8,
title: 'Cannot Chat Log Level - Option has disappeared',
time: '11:06 AM',
upvotes: '51',
comments: '291',
},
{
id: 9,
title: 'Wrong IP Server',
time: '2:00 PM',
upvotes: '478',
comments: '25',
},
{
id: 10,
title: 'Not migrating, control is locked',
time: '11:03 PM',
upvotes: '16',
comments: '15',
},
];
//generates random colour for border styling
const color = [
'border-primary',
'border-success',
'border-danger',
'border-warning',
'border-info',
];

return(
<>
<ListGroup>
{activityItems.map((item) => (
<ListGroup.Item>{item.title}</ListGroup.Item>
// let activityItems = [];
// props.topposts[0]?.TopPost?.topic_list?.topics.map((topic) => {
// let newTopic = {
// title: topic.fancy_title,
// time: timeSince(new Date(topic.created_at)),
// upvotes: topic.like_count,
// comments: topic.posts_count,
// link: `https://forums.rocket.chat/t/${topic.slug}/${topic.id}`,
// image_url: topic.image_url,
// };
// activityItems.push(newTopic);
// });
//todo - add top posts array instead of Data array when discourse integration works
return (
<>
<Col
className={`${styles.container} d-flex flex-wrap justify-content-center`}
>
{Data.map((item) => (
<Col
href={item.link}
className={`${
styles.coloumn
} p-2 m-2 mx-md-3 ps-4 col-md-5 d-flex justify-content-between border-start border-4 ${
color[Math.floor(Math.random() * color.length)]
}`}
>
<Row className={`${styles.item_container}`}>
<div className={`${styles.heading} text-truncate pb-2`}>
{item.title}
</div>
<div className={`fw-light fst-italic pb-1 ${styles.time}`}>
{item.time}
</div>
<span className=''>
<span className={`me-3 ${styles.numbers}`}>
<span className='me-2'>
<Like />
</span>
{item.upvotes}
</span>
<span className={`me-2 ${styles.numbers}`}>
<span className='me-2'>
<Comment />
</span>
{item.comments}
</span>
</span>
</Row>
</Col>
))}
</ListGroup>
</>
)
</Col>
</>
);
}

export default Discourserankedlist
export default Discourserankedlist;
36 changes: 17 additions & 19 deletions app/components/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
import styles from "../styles/Footer.module.css"
import Image from "next/image"
import Image from 'next/image';
function Footer() {
return (
<>
<footer className={styles.footer}>
<a>
Powered by{' '}
<span className={styles.logo}>
<Image src="/logo.svg" alt="Rocket.Chat Logo" width={98} height={32} />
</span>
</a>
</footer>

</>

)


return (
<>
<footer>
<a className='p-3 d-flex align-content-center justify-content-center text-decoration-none text-black'>
Powered by{' '}
<Image
src='/logo.svg'
alt='Rocket.Chat Logo'
width={98}
height={32}
/>
</a>
</footer>
</>
);
}

export default Footer
export default Footer;
70 changes: 37 additions & 33 deletions app/components/growthcounters.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,38 @@
import styles from "../styles/Growthcounters.module.css"
import Countup from "./clientsideonly/countup"
import { FaGlobe, FaComments, FaUsers } from "react-icons/fa"
import styles from '../styles/Growthcounters.module.css';
import Countup from './clientsideonly/countup';

export default function Growthcounters() {
return (
<>
<span>
<FaUsers className={styles.icon} />
&nbsp;
<span suppressHydrationWarning={true}>
{process.browser && <Countup end={343433} className="no" />}
</span>
&nbsp;
Users
&nbsp;&nbsp;&nbsp;
<FaComments className={styles.icon} />
&nbsp;
<span suppressHydrationWarning={true}>
{process.browser && <Countup end={12940830} className="no" />}
</span>
&nbsp;
Messsages
&nbsp;&nbsp;&nbsp;
<FaGlobe className={styles.icon} />
&nbsp;
<span suppressHydrationWarning={true}>
{process.browser && <Countup end={507} className="no" />}
</span>
&nbsp;
Online
</span>
</>
)
}
return (
<>
<div className=' d-flex flex-row align-items-center justify-content-center '>
<div className='d-flex flex-column pe-4 px-md-5 mx-md-3'>
<span suppressHydrationWarning={true}>
{process.browser && (
<Countup end={343433} className={` ${styles.countup}`} />
)}
</span>

<span className={` ${styles.text}`}>Users</span>
</div>

<div className='d-flex flex-column px-4 px-md-5 mx-md-3 border-start border-gray'>
<span suppressHydrationWarning={true}>
{process.browser && (
<Countup end={1294056} className={` ${styles.countup}`} />
)}
</span>
<span className={` ${styles.text}`}>Messages</span>
</div>

<div className='d-flex flex-column ps-4 px-md-5 mx-md-3 border-start border-gray'>
<span suppressHydrationWarning={true}>
{process.browser && (
<Countup end={507} className={` ${styles.countup}`} />
)}
</span>
<span className={` ${styles.text}`}>Online</span>
</div>
</div>
</>
);
}
Loading