Skip to content

Commit

Permalink
Merge pull request #42 from demonicirfan/irfan
Browse files Browse the repository at this point in the history 
Restyled the components
  • Loading branch information
@Sing-Li
Sing-Li authored Jan 22, 2022
2 parents a5ca2af + 4dd3991 commit 43d489e
Show file tree
Hide file tree
Showing 25 changed files with 13,599 additions and 711 deletions.
210 changes: 163 additions & 47 deletions app/components/discourserankedlist.js
View file
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
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
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

0 comments on commit 43d489e

Please sign in to comment.