T-1 commit for the hackathon

components/home-page/home-center-component.tsx

@@ -0,0 +1,55 @@
+import dynamic from 'next/dynamic';
+import ReactList from 'react-list';
+import { useEffect, useState } from 'react';
+import { connect, fetchPosts } from '~/logics';
+import { ITweet } from '../shared/tweet';
+const TweetComponent = dynamic(() => import('../shared/tweet'), { ssr: false });
+const TweetBox = dynamic(() => import('./tweet-box'), { ssr: false });
+
+const HomeCenterComponent = () => {
+
+ const [tweets, setTweets] = useState<ITweet[]>([])
+
+ const fetchData = async () => {
+ await connect()
+ const data = await fetchPosts()
+ const tweetsData = data.map((tweet) => {
+ const { content, struct } = tweet
+ return {
+ id: struct.id,
+ description: content?.body,
+ username: content?.title,
+ name: struct.owner.toString(),
+ avatar: "/images/personal.jpg",
+ date: Date.now(),
+ likes: struct.upvotesCount.toNumber(),
+ replies: struct.repliesCount.toNumber(),
+ retweets: struct.repliesCount.toNumber(),
+ }
+ })
+ setTweets(tweetsData as any as ITweet[])
+ }
+
+ useEffect(() => {
+ fetchData()
+ }, [])
+
+ return (
+ <div>
+ <div className="p-3 border-b border-white border-opacity-15 sticky top-0 bg-dark z-50">
+ <span className="text-white text-xl font-extrabold">Home</span>
+ </div>
+ <TweetBox />
+ <div>
+ <ReactList
+ type="variable"
+ axis="y"
+ length={tweets.length}
+ itemRenderer={(idx, key) => <TweetComponent key={key} {...tweets[idx]} />}
+ />
+ </div>
+ </div>
+ );
+};
+
+export default HomeCenterComponent;

components/home-page/styles/tweet-box.module.css

@@ -0,0 +1,9 @@
+.actionbtn {
+ @apply text-primary p-2 rounded-full;
+ &:hover {
+ @apply bg-primary bg-opacity-25;
+ }
+ &:focus {
+ @apply outline-none bg-opacity-50;
+ }
+}

components/home-page/tweet-box.tsx

@@ -0,0 +1,89 @@
+import ContentEditable, { ContentEditableEvent } from 'react-contenteditable';
+// import sanitizeHtml from 'sanitize-html';
+import { useState } from 'react';
+import Link from 'next/link';
+import Gallery from '../../svgs/gallery.svg';
+import Gif from '../../svgs/gif.svg';
+import Poll from '../../svgs/poll.svg';
+import Emoji from '../../svgs/emojis.svg';
+import Schedule from '../../svgs/schedule.svg';
+import styles from './styles/tweet-box.module.css';
+import { postTweet } from '~/logics';
+const TweetBox: React.FC = () => {
+ const [tweetData, setTweet] = useState('');
+
+ const onTweetBtnClick = async () => {
+ await postTweet(tweetData)
+ setTweet('')
+ }
+
+ const updateTweetData = async (e: ContentEditableEvent) => {
+ setTweet(e.target.value);
+ };
+ return (
+ <div>
+ <div className="px-3 pt-3 pb-2 flex flex-wrap">
+ <Link href="/mhmdou1">
+ <a className="flex-shrink-0 h-12 w-12">
+ <div className="relative">
+ <div className="absolute anim left-0 right-0 top-0 bottom-0 z-10 hover:bg-black rounded-full hover:bg-opacity-15"></div>
+ <img
+ src="/images/personal.jpg"
+ alt="mhmdou1"
+ className="rounded-full min-w-full asd h-12 w-12"
+ />
+ </div>
+ </a>
+ </Link>
+ <div id="tweet-box" className="flex-grow px-2 pt-3 pb-1 relative">
+ <div className="px-2">
+ <div className="pointer-events-none absolute text-gray-600 max-h-full text-lg">
+ {tweetData.length === 0 && "What's happening?"}
+ </div>
+
+ <ContentEditable
+ aria-multiline="true"
+ aria-autocomplete="list"
+ aria-describedby="tweet-box"
+ spellCheck
+ tagName="div"
+ className="text-white text-lg w-full focus:outline-none select-text whitespace-pre-wrap break-all inline-block"
+ onChange={updateTweetData}
+ html={tweetData}></ContentEditable>
+ </div>
+ <div className="flex flex-wrap justify-between mt-5">
+ <div className="flex items-center">
+ <button className={styles.actionbtn}>
+ <Gallery height="1.5rem" />
+ </button>
+ <button className={styles.actionbtn}>
+ <Gif height="1.5rem" />
+ </button>
+ <button className={styles.actionbtn}>
+ <Poll height="1.5rem" />
+ </button>
+ <button className={styles.actionbtn}>
+ <Emoji height="1.5rem" />
+ </button>
+ <button className={styles.actionbtn}>
+ <Schedule height="1.5rem" />
+ </button>
+ </div>
+ <div className="">
+ <button
+ onClick={onTweetBtnClick}
+ disabled={tweetData.length === 0}
+ className={`text-white px-4 py-2 shadow-sm focus:outline-none font-bold bg-primary rounded-full ${tweetData.length === 0 ? 'cursor-not-allowed opacity-50' : ''
+ }`}>
+ Tweet
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div className="h-2 bg-gray-100 w-full bg-opacity-15"></div>
+ </div>
+ );
+};
+
+export default TweetBox;

components/layout/header.tsx

@@ -0,0 +1,24 @@
+import styles from './styles/header.module.css';
+import Link from 'next/link';
+import Logo from '../../svgs/logo.svg';
+import dynamic from 'next/dynamic'
+const TwitterNav = dynamic(() => import('./nav'), { ssr: false })
+
+const Header: React.FC = () => {
+ return (
+ <header className="flex-grow flex justify-end">
+ <div className={styles.header}>
+ <Link href="/">
+ <a>
+ <div className="w-12 h-12 flex justify-center items-center rounded-full cursor-pointer hover:bg mt-1 mb-4 hover:bg-dark-hover">
+ <Logo height="1.75rem" />
+ </div>
+ </a>
+ </Link>
+ <TwitterNav />
+ </div>
+ </header>
+ );
+};
+
+export default Header;

components/layout/index.tsx

@@ -0,0 +1,19 @@
+import Header from './header';
+import styles from './styles/index.module.css';
+
+export type ILayout = {
+ hideLayout?: boolean;
+};
+
+const Layout: React.FC<ILayout> = ({ children, hideLayout = false }) => {
+ return (
+ <div className="flex min-h-screen">
+ {!hideLayout && <Header />}
+ <main className="flex-grow ">
+ {!hideLayout ? <div className={styles.main}>{children}</div> : children}
+ </main>
+ </div>
+ );
+};
+
+export default Layout;

components/layout/nav.tsx

@@ -0,0 +1,64 @@
+import Home from '../../svgs/home.svg';
+import Explore from '../../svgs/hashtag.svg';
+import Notification from '../../svgs/notification.svg';
+import Envelope from '../../svgs/envelope.svg';
+import Bookmark from '../../svgs/bookmark.svg';
+import Profile from '../../svgs/profile.svg';
+import Settings from '../../svgs/settings.svg';
+import List from '../../svgs/list.svg';
+import Tweet from '../../svgs/tweet.svg';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import styles from './styles/nav.module.css';
+import useMedia from '../../hooks/useMedia';
+const links = [
+ { href: '/home', icon: <Home height="1.4rem" />, title: 'Home' },
+ { href: '/explore', icon: <Explore height="1.4rem" />, title: 'Explore' },
+ { href: '/notifications', icon: <Notification height="1.4rem" />, title: 'Notifications' },
+ { href: '/messages', icon: <Envelope height="1.4rem" />, title: 'Messages' },
+ { href: '/bookmarks', icon: <Bookmark height="1.4rem" />, title: 'Bookmarks' },
+ { href: '/lists', icon: <List height="1.4rem" />, title: 'List' },
+ // { href: '/profile', icon: <Profile height="1.4rem" />, title: 'Profile' },
+ { href: 'https://twitter.com/sri_mash', icon: <Profile height="1.4rem" />, title: 'Profile' },
+];
+
+const TwitterNav = () => {
+ const router = useRouter();
+ const isMobile = useMedia(1280);
+ const path = router.asPath;
+ return (
+ <nav className="flex flex-col text-center xl:text-left">
+ {links.map(link => {
+ const classname = path === link.href ? 'text-primary' : 'text-white';
+ return (
+ <Link prefetch={false} key={link.href} href={link.href}>
+ <a className={` ${styles.link} ${classname}`}>
+ <div className="font-bold inline-flex items-center text-xl anim rounded-full px-2 xl:px-3 py-2">
+ {link.icon}
+ <div className="mx-5 hidden xl:inline-block">
+ <span>{link.title}</span>
+ </div>
+ </div>
+ </a>
+ </Link>
+ );
+ })}
+ <div className={styles.link}>
+ <div className="font-bold inline-flex text-white items-center text-xl anim rounded-full px-2 xl:px-3 py-2">
+ <Settings height="1.4rem" />
+ <div className="mx-5 hidden xl:inline-block">
+ <span>More</span>
+ </div>
+ </div>
+ </div>
+
+ <div>
+ <button className="text-white xl:w-11/12 shadow-sm focus:outline-none font-bold mt-3 bg-primary hover:bg-primary-hover py-3 px-3 text-center xl:px-4 rounded-full">
+ {isMobile ? <Tweet height="1.4rem" /> : 'Tweet'}
+ </button>
+ </div>
+ </nav>
+ );
+};
+
+export default TwitterNav;

components/layout/styles/header.module.css

@@ -0,0 +1,6 @@
+.header {
+ @apply px-4 max-h-screen sticky top-0;
+ @screen xl {
+ width: 275px;
+ }
+}

components/layout/styles/index.module.css

@@ -0,0 +1,8 @@
+.main {
+ @apply min-h-screen;
+ @media (min-width: 1000px) {
+ width: 990px;
+ }
+ width: 600px;
+ max-width: calc(100vw - 97px);
+}

components/layout/styles/nav.module.css

@@ -0,0 +1,11 @@
+.link {
+ @apply inline-block mb-4 cursor-pointer;
+ @screen xl {
+ @apply mb-3;
+ }
+ &:hover {
+ > div {
+ @apply bg-primary text-primary bg-opacity-25;
+ }
+ }
+}

components/login-page/login-component.tsx

@@ -0,0 +1,56 @@
+import Logo from '../../svgs/logo.svg';
+import { newFlatSubsocialApi } from '@subsocial/api'
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+import { connect, fetchProfile } from '~/logics';
+const LoginComponent = () => {
+ const router = useRouter();
+
+ useEffect(() => {
+ connect()
+ }, [])
+
+ const connectWallet = async () => {
+ const { isWeb3Injected, web3Enable, web3AccountsSubscribe } = await import('@polkadot/extension-dapp')
+ const injectedExtensions = await web3Enable('twitter-dapp-subsocial')
+ if (!isWeb3Injected) {
+ alert('Browser do not have any polkadot extension')
+ return;
+ }
+
+ if (!injectedExtensions.length) {
+ alert('Polkadot Extension have not authorized us to get accounts');
+ return;
+ }
+
+ await web3AccountsSubscribe(async (accounts) => {
+ if (accounts.length > 0) {
+ const addresses = accounts.map((account) => account.address)
+ console.log(addresses[0])
+
+ // Integrate SubSocial SDK.
+ fetchProfile(addresses[0])
+
+ router.replace('/home')
+ }
+ })
+ };
+
+ return (
+ <div className="flex flex-col justify-center container mt-5 text-white mx-auto">
+ <Logo height="2.3rem" />
+ <span className="font-bold text-2xl mt-6 pt-1 text-center">Log in to Twitter</span>
+ <small className="text-center">just type anything</small>
+ <div className=" lg:w-5/12 lg:px-0 px-5 w-full mt-5 mx-auto">
+ <button
+ onClick={connectWallet}
+ type="submit"
+ className={`bg-primary focus:outline-none font-bold hover:bg-primary-hover text-white rounded-full w-full py-3`}>
+ Log in
+ </button>
+ </div>
+ </div>
+ );
+};
+
+export default LoginComponent;

components/shared/center-content.tsx

@@ -0,0 +1,14 @@
+const CenterContent: React.FC = ({ children }) => {
+ return (
+ <div className=" center-container flex-grow border-r min-h-screen border-l border-opacity-15 border-white">
+ <style jsx>{`
+ .center-container {
+ max-width: 600px;
+ }
+ `}</style>
+ {children}
+ </div>
+ );
+};
+
+export default CenterContent;