Add missing type definitions, fix implicit any

src/components/ThemeSystemProvider.tsx

@@ -5,12 +5,12 @@ import { themes, variants } from '../theme';
 
 interface ThemeSystemState {
   currentTheme: string;
-  setCurrentTheme: (string) => void;
+  setCurrentTheme: (name: string) => void;
 }
 
 const ThemeSystem = createContext({} as ThemeSystemState);
 
-function ThemeSystemProvider({ children, initialTheme = 'chapo' }) {
+function ThemeSystemProvider({ children, initialTheme = 'chapo' }: { children: React.ReactNode,initialTheme?: string }) {
   console.log({ initialTheme });
   const [currentTheme, setCurrentTheme] = useState(initialTheme);
 
@@ -26,7 +26,7 @@ function ThemeSystemProvider({ children, initialTheme = 'chapo' }) {
   }, []);
 
   useEffect(() => {
-    function handleThemeChange(e) {
+    function handleThemeChange(e: any) {
       if (Object.keys(themes).includes(e.detail)) {
         setCurrentTheme(e.detail);
       } else {

src/components/navbar.tsx

@@ -80,23 +80,7 @@ class UnwrappedNavbar extends Component<any, NavbarState> {
     siteLoading: true,
   };
 
-  state = {
-    isLoggedIn: false,
-    unreadCount: 0,
-    replies: [],
-    mentions: [],
-    messages: [],
-    expanded: false,
-    siteName: undefined,
-    version: undefined,
-    admins: [],
-    sitemods: [],
-    searchParam: '',
-    toggleSearch: false,
-    creatingCommunitiesEnabled: false,
-    communityDropdownShown: false,
-    siteLoading: false,
-  };
+  state = this.emptyState;
 
   componentDidMount() {
     // Subscribe to user changes

src/components/post-form.tsx

@@ -31,12 +31,11 @@ import {
   toast,
   randomStr,
   setupTippy,
-  hostname,
+  // hostname,
   pictrsDeleteToast,
   validTitle,
   isPostChanged,
 } from '../utils';
-// import Choices from 'choices.js';
 import { i18n } from '../i18next';
 import { cleanURL } from '../clean-url';
 import { Icon } from './icon';
@@ -49,7 +48,6 @@ import {
   ComboboxPopover,
   ComboboxList,
   ComboboxOption,
-  ComboboxOptionText,
 } from '@reach/combobox';
 import '@reach/combobox/styles.css';
 import { Button } from 'theme-ui';
@@ -58,13 +56,13 @@ export const MAX_POST_TITLE_LENGTH = 160;
 export const MAX_POST_BODY_LENGTH = 20000;
 export const MAX_COMMENT_LENGTH = 10000;
 
-function CommunityInput({ communities, onSelect }) {
+function CommunityInput({ communities, onSelect }: any) {
   const [value, setValue] = useState('');
   const results = matchSorter(communities, value, {
-    keys: [item => `${item.name}`],
+    keys: [(item: Community) => `${item.name}`],
   });
 
-  function handleChange(e) {
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
     setValue(e.target.value);
   }
 
@@ -134,17 +132,17 @@ interface PostFormState {
   crosspostCommunityId?: number;
 }
 
-export const TextAreaWithCounter = ({ maxLength, value, ...props }) => {
+export const TextAreaWithCounter = ({ maxLength, value = '', ...props }: { value: string, maxLength: number } & React.HTMLProps<HTMLTextAreaElement>) => {
   const characterLimitExceeded = value && value.length > maxLength;
   return (
     <>
       <textarea value={value || ''} {...props} />
-      {props.value && (
+      {value && (
         <div className="mt-2">
           <span
             style={{ color: characterLimitExceeded ? 'var(--red)' : 'inherit' }}
           >
-            {props.value.length.toLocaleString()}{' '}
+            {value.length.toLocaleString()}{' '}
           </span>{' '}
           / {maxLength.toLocaleString()}
         </div>
@@ -626,7 +624,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     this.setState(this.state);
   }
 
-  handlePostCommunityChange = community_id => {
+  handlePostCommunityChange = (community_id: number) => {
     this.setState({ postForm: { ...this.state.postForm, community_id } });
   };
 

src/components/post-listing.tsx

@@ -114,7 +114,7 @@ const VoteButtons = ({
   enableDownvotes,
   score,
   pointsTippy,
-}) => (
+}: any) => (
   <>
     <button
       className={`btn-animate btn btn-link p-0 ${

src/components/private-message.tsx

@@ -55,8 +55,6 @@ export class PrivateMessage extends Component<
   }
 
   get mine(): boolean {
-    console.log(UserService.Instance.user?.id);
-    console.log(this.props.privateMessage.creator_id);
     return (
       UserService.Instance.user?.id == this.props.privateMessage.creator_id
     );

src/components/reports.tsx

@@ -128,13 +128,13 @@ export class BaseReports extends Component<any, ReportsState> {
     });
   }
 
-  fetchReportCount(communityId) {
+  fetchReportCount(communityId: number) {
     WebSocketService.Instance.getReportCount({
       community: communityId,
     });
   }
 
-  fetchCommunity(communityId, communityName) {
+  fetchCommunity(communityId: number, communityName: string) {
     WebSocketService.Instance.getCommunity({
       id: communityId,
       name: communityName,

src/components/user.tsx

@@ -1031,7 +1031,7 @@ class BaseUser extends Component<any, UserState> {
     i.setState(i.state);
   }
 
-  handleUserSettingsThemeChange = value => {
+  handleUserSettingsThemeChange = (value: string) => {
     changeTheme(value);
     this.setState({
       userSettingsForm: { ...this.state.userSettingsForm, theme: value },

src/theme.tsx

@@ -130,11 +130,16 @@ export const themes = {
 
 // console.log({ themes })
 
-export function ThemeSelector({ value, onChange }) {
+interface ThemeSelectorProps {
+  value: string;
+  onChange: (name: string) => void;
+}
+
+export function ThemeSelector({ value, onChange }: ThemeSelectorProps) {
   const { setCurrentTheme } = useThemeSystem();
   // console.log({ context });
 
-  function handleThemeChange(e) {
+  function handleThemeChange(e: React.ChangeEvent<HTMLSelectElement>) {
     setCurrentTheme(e.target.value);
     onChange(e.target.value);
   }

src/utils.ts

@@ -1098,6 +1098,9 @@ export const doesUserModerateCommunity = ({
 export const getAllUserModeratedCommunities = ({
   moderatorId,
   siteModerators,
+}: {
+  moderatorId: number
+  siteModerators: CommunityModsState | null
 }) => {
   return Object.keys(siteModerators).reduce((agg, communityId) => {
     if (

tsconfig.json

@@ -21,7 +21,7 @@
     "jsx": "react"
   },
   "include": [
-    "src", "public/assets"
+    "src", "public/assets", "types.d.ts"
   ],
   "exclude": ["node_modules", "**/*.spec.ts", "src/components/welcome.tsx"]
 }

types.d.ts

@@ -0,0 +1,11 @@
+declare module 'tributejs/src/Tribute.js'
+declare module 'markdown-it-emoji/light'
+declare module 'markdown-it-for-inline';
+declare module 'emoji-short-name';
+declare module 'toastify-js';
+declare module '@theme-ui/color';
+declare module '@theme-ui/presets';
+declare module 'types/lodash.isequal';
+declare module 'lodash.isequal';
+declare module 'emoji-mart';
+declare module 'match-sorter';