no more imports with ../../../

Author: flexbox

hackathon/react-native-heroes/.eslintrc

@@ -2,5 +2,6 @@
  "extends": "react-native-wcandillon",
  "rules": {
  "camelcase": "off",
+ "import/no-extraneous-dependencies": 0
  }
 }

hackathon/react-native-heroes/App.tsx

@@ -1,13 +1,13 @@
-/* eslint-disable import/no-default-export */
 import { ApolloProvider } from "@apollo/client";
 import { ThemeProvider } from "@shopify/restyle";
+import React from "react";
 
-import { HeroesList } from "./src/components/HeroesList";
-import theme from "./src/theme/theme";
-import { ScreenContainer } from "./src/components/ScreenContainer";
-import { client } from "./graphql/client";
+import { HeroesList } from "~/components/HeroesList";
+import { client } from "~/graphql/client";
+import theme from "~/theme/theme";
+import { ScreenContainer } from "~/components/ScreenContainer";
 
-export default function App() {
+function App() {
  return (
  <ApolloProvider client={client}>
  <ThemeProvider theme={theme}>
@@ -18,3 +18,7 @@ export default function App() {
  </ApolloProvider>
  );
 }
+
+// App.tsx always exports a single component
+// eslint-disable-next-line import/no-default-export
+export default App;

hackathon/react-native-heroes/package.json

@@ -8,7 +8,8 @@
  "ios": "expo start --ios",
  "web": "expo start --web",
  "eject": "expo eject",
- "lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx ."
+ "lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx .",
+ "cache:clear": "watchman watch-del-all && rm -rf node_modules yarn.lock && yarn install"
  },
  "dependencies": {
  "@apollo/client": "^3.5.8",

hackathon/react-native-heroes/src/components/Box.tsx

@@ -1,5 +1,5 @@
 import { createBox } from "@shopify/restyle";
 
-import type { Theme } from "../theme/theme";
+import type { Theme } from "~/theme/theme";
 
 export const Box = createBox<Theme>();

hackathon/react-native-heroes/src/components/HeroesListItem.tsx

@@ -6,14 +6,13 @@ import {
  TouchableOpacity,
  Linking,
  Modal,
- Dimensions,
 } from "react-native";
 import { Colors, Headline } from "react-native-paper";
 import { AntDesign } from "@expo/vector-icons";
 import React, { useState } from "react";
 
-import { Box } from "./Box";
-import { Upvote } from "./Upvote";
+import { Box } from "~/components/Box";
+import { Upvote } from "~/components/Upvote";
 
 export type HeroProps = {
  item: {
@@ -22,10 +21,10 @@ export type HeroProps = {
  full_name: string;
  github_username: string;
  twitter_username: string;
- counter: string;
+ counter: number;
  };
 };
-const screenWidth = Dimensions.get("window").width;
+
 export const HeroesListItem = (hero: HeroProps) => {
  const [modalVisible, setModalVisible] = useState(false);
 
@@ -125,7 +124,6 @@ export const styles = StyleSheet.create({
  paddingVertical: 2,
  paddingHorizontal: 10,
  },
-
  middle: {
  flex: 1,
  width: "60%",

hackathon/react-native-heroes/src/components/ScreenContainer.tsx

@@ -3,7 +3,8 @@ import React from "react";
 import { StatusBar } from "expo-status-bar";
 import { Colors, Headline } from "react-native-paper";
 
-import { Box } from "./Box";
+import { Box } from "~/components/Box";
+import theme from "~/theme/theme";
 
 type Props = {
  children: React.ReactNode;
@@ -25,13 +26,12 @@ const styles = StyleSheet.create({
  container: {
  flex: 1,
  backgroundColor: Colors.black,
- paddingTop: 16,
+ paddingTop: theme.spacing.s,
  },
  text: {
- color: "white",
- fontSize: 30,
+ color: Colors.white,
+ fontSize: 32,
  fontWeight: "bold",
- marginVertical: 20,
- textAlign: "center",
+ marginVertical: theme.spacing.m,
  },
 });

hackathon/react-native-heroes/src/components/Upvote.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { AntDesign } from "@expo/vector-icons";
 import { Button, Colors, Paragraph } from "react-native-paper";
-import { gql, useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client";
 import {
  Linking,
  Modal,
@@ -10,7 +10,19 @@ import {
  StyleSheet,
 } from "react-native";
 
-export const Upvote = ({ idHero, heroCounter, twitterUsername }) => {
+import { MUTATION_COUNTER } from "~/graphql/mutations";
+
+interface UpvoteProps {
+ idHero: string;
+ heroCounter: number;
+ twitterUsername: string;
+}
+
+export const Upvote = ({
+ idHero,
+ heroCounter,
+ twitterUsername,
+}: UpvoteProps) => {
  const [counter, setCounter] = useState<number>(heroCounter);
  const [hasUpvoted, setHasUpvoted] = useState<boolean>(false);
  const [addTodo] = useMutation(MUTATION_COUNTER);
@@ -30,14 +42,14 @@ export const Upvote = ({ idHero, heroCounter, twitterUsername }) => {
  const style = hasUpvoted
  ? {
  borderColor: Colors.orange900,
- backgroundColor: "white",
+ backgroundColor: Colors.white,
  borderWidth: 2,
  }
- : { backgroundColor: "white" };
+ : { backgroundColor: Colors.white };
 
  const styleIcon = hasUpvoted
  ? { color: Colors.orange900 }
- : { color: "black" };
+ : { color: Colors.black };
 
  return (
  <>
@@ -79,18 +91,6 @@ export const Upvote = ({ idHero, heroCounter, twitterUsername }) => {
  );
 };
 
-const MUTATION_COUNTER = gql`
- mutation update_counter($id: Int!) {
- update_heroes(where: { id: { _eq: $id } }, _inc: { counter: 1 }) {
- affected_rows
- returning {
- id
- counter
- }
- }
- }
-`;
-
 export const styles = StyleSheet.create({
  modalShareView: {
  margin: 20,
@@ -100,7 +100,7 @@ export const styles = StyleSheet.create({
  width: "70%",
  height: "20%",
  alignItems: "center",
- shadowColor: "#000",
+ shadowColor: Colors.black,
  shadowOffset: {
  width: 0,
  height: 2,

hackathon/react-native-heroes/src/config/config.ts

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-default-export */
+/* eslint-disable import/no-anonymous-default-export */
 import Constants from "expo-constants";
 
 export default {

hackathon/react-native-heroes/graphql/client.ts renamed to hackathon/react-native-heroes/src/graphql/client.ts

@@ -1,6 +1,6 @@
 import { ApolloClient, InMemoryCache } from "@apollo/client";
 
-import config from "../src/config/config";
+import config from "~/config/config";
 
 export const client = new ApolloClient({
  uri: config.HASURA_API_URL,

hackathon/react-native-heroes/src/graphql/mutations.ts

@@ -0,0 +1,13 @@
+import { gql } from "@apollo/client";
+
+export const MUTATION_COUNTER = gql`
+ mutation update_counter($id: Int!) {
+ update_heroes(where: { id: { _eq: $id } }, _inc: { counter: 1 }) {
+ affected_rows
+ returning {
+ id
+ counter
+ }
+ }
+ }
+`;