├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json ├── src ├── Apollo │ ├── Client.js │ └── LocalState.js ├── Components │ ├── App.js │ ├── Avatar.js │ ├── Button.js │ ├── FatText.js │ ├── FollowButton │ │ ├── FollowButtonContainer.js │ │ ├── FollowButtonPresenter.js │ │ ├── FollowButtonQueries.js │ │ └── index.js │ ├── Footer.js │ ├── Header.js │ ├── Icons.js │ ├── Input.js │ ├── Loader.js │ ├── Post │ │ ├── PostContainer.js │ │ ├── PostPresenter.js │ │ ├── PostQueries.js │ │ └── index.js │ ├── Routes.js │ ├── SquarePost.js │ └── UserCard.js ├── Hooks │ └── useInput.js ├── Routes │ ├── Auth │ │ ├── AuthContainer.js │ │ ├── AuthPresenter.js │ │ ├── AuthQueries.js │ │ └── index.js │ ├── EditProfile.js │ ├── Explore.js │ ├── Feed.js │ ├── Post.js │ ├── Profile │ │ ├── ProfileContainer.js │ │ ├── ProfilePresenter.js │ │ └── index.js │ └── Search │ │ ├── SearchContainer.js │ │ ├── SearchPresenter.js │ │ ├── SearchQueries.js │ │ └── index.js ├── SharedQueries.js ├── Styles │ ├── GlobalStyles.js │ └── Theme.js └── index.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Instaclone Frontend 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "prismagram-frontend", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "apollo-boost": "^0.3.1", 7 | "graphql": "^14.1.1", 8 | "prop-types": "^15.7.2", 9 | "react": "^16.8.4", 10 | "react-apollo-hooks": "^0.4.3", 11 | "react-autosize-textarea": "^6.0.0", 12 | "react-dom": "^16.8.4", 13 | "react-helmet": "^5.2.0", 14 | "react-router-dom": "^4.3.1", 15 | "react-scripts": "2.1.8", 16 | "react-toastify": "^4.5.2", 17 | "rl-react-helmet": "^5.2.0", 18 | "styled-components": "^4.1.3", 19 | "styled-reset": "^2.0.0" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test", 25 | "eject": "react-scripts eject" 26 | }, 27 | "eslintConfig": { 28 | "extends": "react-app" 29 | }, 30 | "browserslist": [ 31 | ">0.2%", 32 | "not dead", 33 | "not ie <= 11", 34 | "not op_mini all" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/prismagram-frontend/5b90b0200be1949aeb89213e43f25143457c3532/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 15 | 16 | 25 | React App 26 | 27 | 28 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/Apollo/Client.js: -------------------------------------------------------------------------------- 1 | import ApolloClient from "apollo-boost"; 2 | import { defaults, resolvers } from "./LocalState"; 3 | 4 | export default new ApolloClient({ 5 | uri: 6 | process.env.NODE_ENV === "development" 7 | ? "http://localhost:4000" 8 | : "https://prismagram-backend.herokuapp.com", 9 | clientState: { 10 | defaults, 11 | resolvers 12 | }, 13 | headers: { 14 | Authorization: `Bearer ${localStorage.getItem("token")}` 15 | } 16 | }); 17 | -------------------------------------------------------------------------------- /src/Apollo/LocalState.js: -------------------------------------------------------------------------------- 1 | export const defaults = { 2 | isLoggedIn: Boolean(localStorage.getItem("token")) || false 3 | }; 4 | 5 | export const resolvers = { 6 | Mutation: { 7 | logUserIn: (_, { token }, { cache }) => { 8 | localStorage.setItem("token", token); 9 | cache.writeData({ 10 | data: { 11 | isLoggedIn: true 12 | } 13 | }); 14 | return null; 15 | }, 16 | logUserOut: (_, __, { cache }) => { 17 | localStorage.removeItem("token"); 18 | window.location = "/"; 19 | return null; 20 | } 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /src/Components/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { gql } from "apollo-boost"; 3 | import styled, { ThemeProvider } from "styled-components"; 4 | import { HashRouter as Router } from "react-router-dom"; 5 | import { useQuery } from "react-apollo-hooks"; 6 | import { ToastContainer, toast } from "react-toastify"; 7 | import "react-toastify/dist/ReactToastify.css"; 8 | import GlobalStyles from "../Styles/GlobalStyles"; 9 | import Theme from "../Styles/Theme"; 10 | import Routes from "./Routes"; 11 | import Footer from "./Footer"; 12 | import Header from "./Header"; 13 | 14 | const QUERY = gql` 15 | { 16 | isLoggedIn @client 17 | } 18 | `; 19 | 20 | const Wrapper = styled.div` 21 | margin: 0 auto; 22 | max-width: ${props => props.theme.maxWidth}; 23 | width: 100%; 24 | `; 25 | 26 | export default () => { 27 | const { 28 | data: { isLoggedIn } 29 | } = useQuery(QUERY); 30 | 31 | return ( 32 | 33 | <> 34 | 35 | 36 | <> 37 | {isLoggedIn &&
} 38 | 39 | 40 |